Start Building Professional
Web Apps Today

Scheduler: Customizing details form -> getting select element value

Dear Sir or Madam, hello once again,

after testing some of the other dhtmlx-components, I'm now playing around with the scheduler.
I try to customize the details form in the following way:

godi_art= "[
        {key:"1", label:"Chorprobe"},
        {key:"2", label:"Gottesdienst"},
        {key:"3", label:"Chorabend"}]"

gemstelle = "[
        {key:"1", label:"Muenchen"},
        {key:"2", label:"Nuernberg"},
        {key:"3", label:"Stuttgart"}]"

scheduler.config.lightbox.sections=[
    {name:"Veranstaltung", height:23, type:"select", options:godi_art, map_to:"Veranstaltung" },
    {name:"Gemeindestelle", height:23, type:"select", options:gemstelle, map_to:"Gemeindestelle" },
    {name:"time", height:72, type:"time", map_to:"auto"}]

Now I wanted to get the infos displayed in the "week"-view and here the problem begins:

scheduler.templates.event_text=function(start,end,event){
return "Veranstaltung:<b> "+event.Veranstaltung+"</b><br>"+"Ort: "+event.Gemeindestelle;
}

With this one I get "Veranstaltung: 1 Ort :1" if I select "Chorprobe" and "Muenchen". How can I get the labels instead of the keys of the select-element? I think it's a newbie questions but I didn't find out yet.

JayN

Actually there is no built-in helper for such scenario, object always store ID from select list and has not ability to return related value, you can add the custom helper as

function event_label(coll, id){
   for (var i=0; i<coll.length; i++) if (coll[i].key==id) return coll[i].label;
}
....

return "Veranstaltung:<b> "+event_label(godi_art,event.Veranstaltung)+"</b>

Hello Stanislav,

thank you for your quick answer. I will test the workaround.

Hello,

I hope I can ask an additional question in this thread without opening a new one.
First of all, thank you for the workaround, it works fine.
Now the next question.

I'm working on the event_bar_text-template this time. I try to customize its content dynamically, but it doesn't work.

Here's my code:

scheduler.templates.event_bar_text=function(start,end,event){
      if (isNaN(event.Veranstaltung) == "false")
      {
             return "<b>"+event_label(godi_art,event.Veranstaltung)+"</b>"+" ("+event_label(gemstelle,event.Gemeindestelle)+")";
             scheduler.updateEvent(event.id);  //<---- added later
        }   
        else
        {
            return "Neue Veranstaltung anlegen";
        }
    }

If I create a new event via doubleclick, it's my intention that the header says "Neue Veranstaltung anlegen". If the "save"-button is clicked, so the bar_text in the month-view should be something like: "Chorprobe (Muenchen)". But it still says "Neue Veranstaltung anlegen". So I tried to add the updateEvent-method, but it doesn't work either.
Later I tried it with the schedulerEvent "onEventSave":

scheduler.attachEvent("onEventSave",function(id,data)
{
    var ev = scheduler.getEvent(id);
    scheduler.templates.event_bar_text(id.start,id.end,ev);
    return true;
}
)

This didn't help. Where the point I don't get? Could you help me with this? I hope the problem is stated clearly.

Greetings

Jay

Normally after closing lightbox the view is fully repainted, so the new data will be applied to templates. If you are using non-lightbox editing, or custom lightbox you can try to use 

scheduler.attachEvent("onEventAdded",function(id){
    scheduler.updateEvent(id);
    return true;
})

and you need not to call updateEvent directly from template for sure.

Maybe problem caused by non-numeric values of Veranstaltung

(typeof event.Veranstaltung != "undefined") instead of (isNaN(event.Veranstaltung) == "false") was the solution. Thanks.