Kendo UI grid related issue

1 Answer 43 Views
DropDownList Grid
Saraswati
Top achievements
Rank 1
Saraswati asked on 20 May 2022, 12:39 PM | edited on 20 May 2022, 01:07 PM

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

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 25 May 2022, 09:58 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
DropDownList Grid
Asked by
Saraswati
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or