Kendo grid with multiple select option enabled is not working properly

1
votes

I am using a kendo grid in which i given multiple select option and i will display the grid on button click. Below is the code written under script...

    $('#btn').on("click", function(e) {
    summaryResultDataSource = [
            { name: "Jane Doe", age: 30 },
            { name: "John Doe", age: 33 },
            { name: "John Doe", age: 33 },
            { name: "John Doe", age: 33 },
            { name: "John Doe", age: 33 },
            { name: "John Doe", age: 33 },
            { name: "John Doe", age: 33 }
    ];

    $("#grid").kendoGrid({
    columns: [
             { field: "name" },
             { field: "age" }
    ],
    dataSource: { 
             data: summaryResultDataSource
    },
    selectable: "multiple, row"
    });

    });

Now, when i click on button, the grid displays properly as expected and select the mutiple row by using ctrl + click option. First time i able to select multiple row.

Again, click on button now i am not able to select the multiple row using ctrl + click and it is not working.

Where, i am doing wrong. Please, help me to resolve this issue

Here is the demo... http://dojo.telerik.com/EKOm/4

2
jquerykendo-uikendo-grid

2 Answers

0
votes

Please find the Updated demo Link http://dojo.telerik.com/EKOm/7

whenever you are clicking a button , just try to empty the gird like belew,

  var Grid =  $('#grid').data("kendoGrid");   
      if(typeof (Grid) != 'undefined') {
         $("#grid").empty();
}

I hope it will help you!!!!

1
votes

Try this:

It is an odd issue. You said it would work after the first click and not after the second: true. I found that it would work on every other click: after the third click, for example, it would work again. Anyway, give it a try, I did a little workaround to the problem.

    var first = true;
    $(function() {
	    var first = true;
    });
    
  $('#btn').on("click", function (e) {
    
      summaryResultDataSource = [{
          name: "Jane Doe",
          age: 30
      }, {
          name: "John Doe",
          age: 33
      }, {
          name: "John Doe",
          age: 33
      }, {
          name: "John Doe",
          age: 33
      }, {
          name: "John Doe",
          age: 33
      }, {
          name: "John Doe",
          age: 33
      }, {
          name: "John Doe",
          age: 33
      }];

    if (first)
    {
      first = false;
      $("#grid").kendoGrid({
        columns: [{ field: "name"}, { field: "age" }],
        dataSource: { data: summaryResultDataSource },
        selectable: "multiple, row"
      });
    }
    else
    {
      $("#grid").kendoGrid({
        columns: [{ field: "name"}, { field: "age" }],
        dataSource: { data: summaryResultDataSource }
        });
    }
  });

  
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/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/2014.2.903/js/kendo.all.min.js"></script>
</head>
<body>
  <button id="btn">Search</button>
<div id="grid"></div>


  </body>

Kendo UI Dojo