Multiselect in custom popup from Treelist

3 posts, 1 answers
  1. Dave
    Dave avatar
    12 posts
    Member since:
    Jan 2015

    Posted 29 Jan 2015 Link to this post


    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{
            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-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.

  2. Answer
    Nikolay Rusev
    Nikolay Rusev avatar
    2289 posts

    Posted 02 Feb 2015 Link to this post

    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=" +"uid") + "]");
     kendo.bind(editForm, e.model);

    And a quick example I've assembled -

    Nikolay Rusev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Dave
    Dave avatar
    12 posts
    Member since:
    Jan 2015

    Posted 03 Feb 2015 in reply to Nikolay Rusev Link to this post

    Thank you Nikolay

    Worked perfectly

    Very impressed with what Kendo can do
Back to Top