Kendo UI grid related issue

[Saraswati]

Hi,

We are using keno grid component, in one of the grid column we are appending kendo multiselect to user to select option ,on selecting we are setting other columns , on setting of other columns selected option from dropdown is going off

Scenario1: once we set the remaining columns the selected option from kendo multiselect is going off.

Scenario2: if we select second time the same option then the selected option is not going off.

Scenario3: if we add the row to the grid , the second time selected option is going off again.

can u please suggest is there anything wrong in the code.

for reference:  http://dojo.telerik.com/iNaqIYEh/27

Thank you

[Georgi Denchev]

Hello, Saraswati,

Thank you for the provided Dojo.

I'm assuming you've followed the logic in this KB article, correct?

Problem

The problem occurs because the value of the MultiSelect is not being updated. Additionally, it seems like there is a bug in the older versions of Kendo UI and the value isn't getting assigned properly.

Solution

The first step would be to update to a newer version of Kendo UI - 2021/2022.

After that you need to update the logic to assign the value to the multiselect. This way even when the Grid refreshes, the value will remain in the input.

        function bkeyDropDownPopulate(){
          var grid = $("#grid").data("kendoGrid"),
              model = grid.dataItem($('.dropDownTemplate').closest("tr"));
          
          $('.dropDownTemplate').kendoMultiSelect({
            dataSource: {
              data:data
            },
            value: model ? model.bkeyName : null, // set the value to the bkeyName if it exists.
            dataValueField: "bkeyName",
            dataTextField: "bkeyName",



// ... change event

            change: function(e) {
              var value = this.value(),
                  dataItem = this.dataItems()[0];

              if(value.length) {
                var selectedBkeyDesc = dataItem.bkeyDesc;
                var selectedDataSource = dataItem.bkeyDataSource;

                model.set("bkeyName", value); // set the value to the bkeyName
                model.set("bkeyDesc", selectedBkeyDesc);  // set the description 
                model.set("bkeyDataSource", selectedDataSource); // set the datasource
              }
            },

Dojo

https://dojo.telerik.com/@gdenchev/IDeJEpOk 

The Dojo uses the latest version of Kendo UI, however the solution should also work with slightly older versions as well. The solution won't work with v2014.

Best Regards,
Georgi Denchev
Progress Telerik