Reloading datasource of Kendo Multiselect creates new instance of multiselect

Question

In our project we have created a function in .js file that initialize any object into multiselect drop down. That function accepts two parameters. First is object name and second is url for ajax method to load data into it. The function is like this

function initializeMultiSelectCombo(comboName, url) {
$("#" + comboName).kendoMultiSelect({
    dataTextField: "Value",
    dataValueField: "Id",
    dataSource: {
        type: "json",
        transport: {
            read: {
                url: url,
                type: "POST",
                data: "json"
            }
        },
        autoClose: false
    }
    });
}

To initialise the object I call above function and pass object name that needs to be display data as multiselect.

initializeMultiSelectCombo("costCentreMulti", "/CostCentre/GetDataForComboForBranch?branchId=0");

By default I pass 0 as branchId so that it loads all the costcentres for all branches. Method in the controller is as mentioned below:

public JsonResult GetDataForComboForBranch(int branchId)
    {
        var list = _unitOfWork.CostCentres
            .GetListByUser(Convert.ToInt16(AppSession.Current.UserID), branchId).ToList();
        
        var comboList = list.Select(e => new { Id = e.CostCentreID, Value = e.CostCentre, Column2 = e.BranchLocation });
        return Json(comboList, JsonRequestBehavior.AllowGet);
    }

When I run application this is how it looks, the cost centre dropdown is a multiselect one and it displays costcentres for all branches.

Now if a user selects any branch from the first drop down then the multiselect should get reloaded and show only those cost centres which are associated with the selected branch. For this I use the same initialise function which we have created but only this time instead of 0 as branchid I pass appropriate branchid associated with the selected branch. When I do this instead of re-loading the multiselect it creates a new instance.

Whenever i select any branch from the first dropdown it creates new instance and show with the ones which are already there.

How can i stop this rendering process and only re-load datasource and display data based on the parameter passed.

Regards,

Savan Parmar

Answer 1

The mistake i was doing was that when ever i want to re-populate multiselect drop down i was calling same initialise method

initializeMultiSelectCombo("costCentreMulti", "/CostCentre/GetDataForComboForBranch?branchId=0");

Instead of that what i need to do is to use the read method with appropriate paramter and it will re-load the datasource.

$("#costCentreMulti").data("kendoMultiSelect").dataSource.read({ branchId: branchId });

This fixed my issue and now multiselect is showing properly.