Changing DataTextField of Kendo MultSelect dynamically

Question

I have a Kendo combo box with two values: Main, Secondary. I also have a Kendo mutliselect linked to a data source. By default, the combo box displays 'Main' and multi select displays 'Parent1', 'Parent2' i.e. 'Name' field of the datasource.

I would like to dynamically change the dataTextField of the multiselect to Name2 if a user selects 'Secondary' from the combo box, similarly, multiselect should be linked to 'Name' as its dataTextField when a user selects 'Main' from the drop down.

Here is the Fiddle

HTML

<select id="CategoryOption" style="width: 100px;">
<option>Main</option>
<option>Secondary</option>
</select> <br><br><br><br><br><br>
<select id="MainCategory" style="width: 90%;"></select> 

Java Script

createCategoryOption("#CategoryOption");
createMainCategory("#MainCategory", "Name", "ID");
function createCategoryOption(divID1)
{
$(divID1).kendoComboBox({
        change: function (e) {
            SetSelectServicesText();
        }
    });
}
function createMainCategory(usersDiv, textField, valueField) {
 $("#MainCategory").kendoMultiSelect({
    dataSource: [
        { Name: "Parent1", Id: 1, Name2: "Child1" },
        { Name: "Parent2", Id: 2, Name2: "Child2" }
    ],
    dataTextField: textField,
    dataValueField: valueField
});
}
function SetSelectServicesText()
{
        if($("#CategoryOption").data("kendoComboBox").value() == "Main")
        {
            $("#MainCategory").destroy();
        createMainCategory("#MainCategory", "Name", "ID");
        }
        else
        {
            $("#MainCategory").destroy();
        createMainCategory("#MainCategory", "Name2", "ID");
        }
}

External Sources

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>

Answer 1

Kendo widgets usually creates a wrapper structure around the target element, which isn't destroyed by the method destroy()(which I think that is a bad thing).

So destroying(or removing from DOM) a widget isn't that simple. Check it out:

function createMainCategory(usersDiv, textField, valueField, remove) 
{
    var mc = $("#MainCategory");

    if (remove)
    {
        // Destroys the widget
        mc.data("kendoMultiSelect").destroy();

        // Get the widget wrapper element structure
        var p = mc.closest(".k-widget");

        // Detache the #MainCategory from the wrapper structure
        mc = mc.empty().detach();

        // Remove the wrapper structure
        p.remove();

        // Append the #MainCategory to the body again
        $('body').append(mc);
    }

    $("#MainCategory").kendoMultiSelect({
        dataSource: [
            { Name: "Parent1", Id: 1, Name2: "Child1" },
            { Name: "Parent2", Id: 2, Name2: "Child2" }
        ],
        dataTextField: textField,
        dataValueField: valueField
    });
}

As you can see, in the remove block it...

• Destroys the widget using the built-in method destroy();
• Then it selectes the main wrapped element which holds all the structure inside;
• Before removing it, it selectes and detaches the #MainCategory outside the wrapper(the detach() removes but returns its reference for further manipulation of the element);
• So, with the #MainCategory safe, it removes the wrapper entire structure from DOM;
• And finally added #MainCategory on the body again to be used to host a new widget.

Fiddle.