Edit Form Binding Events

Discontinued products Scheduler for Mobile and Touch devices
#1

I have added 2 richselects to the editForm.
Basically, when the edit form is shown I would like to be able to detect that the first select has been bound up, and then go and populate the second select based on the value in the first select.
I was hoping there might be a “bound” event for the select, but I can’t seem to find one. Any help would be greatly appreciated. Thanks.

#2

Hello,

you may set onChange event for the first richselect:

$$(“scheduler”).$$(“richselect1”).attachEvent(“onChange”,function(value){

})

#3

Thanks for the reply.

I have tried that, but what happens is that the event fires as soon as the edit form is displayed, but apparently before the second richselect is available to populate. So initially the second richselect isn’t populated, and is only populated once you physically change the first richselect.

#4

Could you provide an example of form config. Are you using external data source for the first richselect ?

#5

I think I have a solution, but if you could look at the code and see if it is the best way of doing it.

scheduler.config.form = [
    {view:"text", id:'text', label:"Event"},
    {view:"richselect", id:'field1', label:'Field1', data: myData, on:{"onChange": function(new_value, old_value){field1Changed(new_value, old_value);}}},
    {view:"richselect", id:'field2', label:'Field2', data:[], on:{"onAfterRender": function(){ field2Rendered(); }}},
    {view:"datepicker", id:'start_date', label:"Start", timeSelect:1, dateFormat:"%Y-%m-%d %H:%i"},
    {view:"datepicker", id:'end_date', label:"End", timeSelect:1, dateFormat:"%Y-%m-%d %H:%i"},
    {view:"textarea", id:'details', label:"Notes", width:300, height:150},
    {view:"button", id:'delete', label:"Delete event", type:"form", css:"delete"}
];

function field1Changed(new_value, old_value)
{
    if (old_value!= new_value)
        populateField2(new_value); // does ajax get and returns json
}

function field2Rendered()
{
    var eventId = $$("scheduler").getCursor();
    var item = $$("scheduler").item(eventId);
    populateField2(item.field1); // does ajax get and returns json
}

Because I couldn’t find any event to fire when the edit form is shown, I keyed into the onAfterRender event of the richselect I need to populate.

So the first time in, the field2Rendered event should fire, and populate the field2 richselect items based on what value is in field1.

If I change the value of the field1 richselect manually, the populate routine will again be called .

Lastly, if I go back to the day list, pick a new event, and click edit, then the changed event will fire and will also repopulate the field2 richselect based on the new value bound to field1.

Any feedback would be appreciated.

Thanks.

#6

I forgot to mention, the first richselect is always going to have the same data in it, so I set that in the form config (you’ll see its just called myData).

#7

The issue with double onChange calls will be solved in the next version that is going to released next week.