How to Override the default field "Text" in Lightbox

In the Lightbox, I want to substitute what drives the time entry label – see the screen shot.

I want to replace map_to:"text" to be the Employee from the dropdown list.

Is it possible?


Hi,
this label is defined by event_text and event_bar_text templates,
so in order to have a dropdown label there you need to redefine these templates, i.e.
snippet.dhtmlx.com/15de0946b

Couple of notices

  • I’ve used scheduler.serverList method to provide options to the dropdown and to retrieve them inside a template. This method can be also used to load options with the rest of data using a connector and update them dynamically which can be convenient.
    docs.dhtmlx.com/scheduler/api__ … rlist.html
  • inside a template there is a linear search for a selected item - in some cases when you have a lot of events/options it may have a noticeable impact on performance, since these templates can be called quite often - in that case you could create a hash for a quick search instead of iterating array every time.
  • lastly, as you notice, client-side should have a complete list of options in order to display them. If you use for example auto complete search which pulls required options dynamically you may not have a full list on a client and will need to load it manually.
    An alternative that sometimes is used is binding labels on a backend via sql JOIN and avoiding loading client-side calculations (i.e. in connector configuration you do SELECT options.label as text,… FROM events JOIN options ON events.option_id = options.id) - but at least from my perspective when such approach is used with scheduler/gantt it usually creates more challenges than it solves, since it doesn’t go very well with the approach used in components.
1 Like

Ok, I am still trying to make it work @Aliaksandr but to no success.

My code is listed below. Here are my questions:

(1) I tried positioning scheduler.templates.event_text = scheduler.templates.event_bar_text = function() before and after the Lightbox stuff – no success.
(2) does map_to need to map to the column name from my MySQL table?
(3) does the value from my MySQL table for column name eventName need to relate to the key in the options list or the label in the options list?

` scheduler.locale.labels.section_select1 = ‘Availability’;
scheduler.locale.labels.section_employees = ‘Employees’;
scheduler.locale.labels.section_time = ‘Start - End’;
scheduler.config.lightbox.sections = [
{ name:“employees”, height:40, map_to:“eventName”, type:“select”, options:scheduler.serverList( “employees”, [
{ key: 193, label: ‘Jones, Sally’ },
{ key: 020, label: ‘Smith, Joe’ },
] ) },
{ name:“select1”, height:40, type:“select”, options:availability_options, focus:true },
{ name:“Comment”, height:50, map_to:“text”, type:“textarea” },
//{ name:“recurring”, height:72, type:“recurring”, map_to:“rec_type”, button:“recurring”},
{ name:“time”, height:72, type:“time”, map_to:“auto”, time_format:["%H:%i"] }
];

scheduler.templates.event_text = scheduler.templates.event_bar_text = function( start, end, event ){
var employees = scheduler.serverList(“employees”);
for( var i=0; i<employees.length; i++ ){
if( employees[i].key == event.employees ){
return employees[i].label;
}
}
return ‘’;
};`

Hi,

Please check my demo here forum.dhtmlx.com/viewtopic.php?f=6&t=54794

It needs to match a property name of events that comes from the backend handler or assigned on the client - i.e. docs.dhtmlx.com/scheduler/data_formats.html - while these properties may not match database columns, you can do any kind of mapping or use aliases while pulling data from the db and feeding it to the client.

column values need to relate to the key of the option

Everything solved and tested. Thanks @Aliaksandr!!

Okay to close this post

You once against saved my bacon you legend!

When you say

in that case you could create a hash for a quick search instead of iterating array every time.

What exactly does this mean please?

Thank you

Hello @squatman,

It’s just a performance suggestion, in order to make search faster with Hash Table(or any similar data structure that allows to access data faster), that in usual array iterating, here is a description of such a feature:

Kind regards,

1 Like

@Siarhei thank you very much for the prompt response, really appreciate it.