Multiselect in custom popup from Treelist

[Dave]

Hi

I have a tree list with a custom edit popup setup containing a multiselct box and having a couple of issues getting the data-bind working correctly.

Here is a subset of the ds_Tables - all fine

    var ds_Tables = new kendo.data.DataSource({
        data: [
            {id:'MemberAdvertising', name:'Advertising'},
            {id:'MemberCorporate', name:'Corporate'},
            {id:'MemberHotel', name:'Hotel'},
            {id:'MemberSpecialOffer', name:'Special Offers'}
        ]
    })

Here is the code for the multiselect which loads and works fine

                        <select id="MemberType_MemberTypeTables" name="MemberType_MemberTypeTables"
                            data-bind="value:MemberTypeArray, source:ds_Tables"
                            data-value-field="id"
                            data-text-field="name"
                            data-source="ds_Tables"
                            data-role="multiselect" /></select>

The MemberType_MemberTypeTables  variable in JSON is a comma separated string, so my Treeview edit looks like

       edit: function(e) {
            var MemberTypeArray = e.model.MemberType_MemberTypeTables.split(",");
            e.model.MemberTypeArray = MemberTypeArray;
       }

where I'm basically creating an array of tables to use as the data-bind values and assigning to a 'dummy variable' e.model.MemberTypeArray

The first time I press edit it doesn't do the data-binding showing the selected tables, but if I then press cancel and then edit again it works ok.

How can I force the edit popup to use the Array the first time ?

Thanks in advance.

Dave

[Nikolay Rusev]

Hello Dave,

The edit event is triggered after the form is already bound. You should call kendo.bind(e.container, e.model) in order to re-populate the edit container. 

Unfortunately there is bug on our side in current version and e.container doesn't hold reference to the edit form container, but to the row element which in this case is different element. We will fix this for next internal build.

As a temporary workaround, which will be also valid after the fix, you can manually grab the edit form from. Here is how the edit event might be implemented:

edit: function(e) {                          
 var MemberTypeArray = e.model.MemberType_MemberTypeTables.split(",");
 e.model.MemberTypeArray = MemberTypeArray;
 e.model.ds_Tables = ds_Tables;
                          
 var editForm = $(".k-popup-edit-form[data-uid=" + e.container.data("uid") + "]");
 kendo.bind(editForm, e.model);
}

And a quick example I've assembled - http://dojo.telerik.com/@rusev/AHehe

Regards,
Nikolay Rusev
Telerik

 

 

[Dave]

Thank you Nikolay

Worked perfectly

Very impressed with what Kendo can do

[K.Ramadan]

Hello Nikolay,

I'm trying to add a multiselect to my Scheduler Edit-PopUp .. so I'm trying to figure out how to fetch the data from a server .. in your example you took the data from a "list" but i have an ActionMethod that i want to use.

Can you please help me .. thank you in advance ..

[Martin]

Hello,

I can see that you have asked the same question in Thread 1131849. You will find the answer from my colleague Dimitar. If you have further questions on the matter that are not related to the topic of the thread, please open a new one so that the discussion of different issues would be separated in different threads. 

Regards,
Martin
Progress Telerik