This is a migrated thread and some comments may be shown as answers.

Select() for The Second Grid On The Same Page Won't Work

2 Answers 103 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shoji Kaburagi
Top achievements
Rank 1
Shoji Kaburagi asked on 29 May 2015, 02:13 PM

 

Hello,

I have a situation where I need to put two grid on a same page. The problem is that when I try to select the first row in the grid, the select() for the second grid won't work. I used the example in the Telerik document and it does the same thing. Is there any way to work around this?

 <!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/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.429/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/jszip.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<div id="grid2"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
  ],
  selectable: "row"
});
var grid = $("#grid").data("kendoGrid");
grid.select("tr:eq(1)");
  
$("#grid2").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
      { name: "bubba Doe", age: 40 },
      { name: "kate Doe", age: 21 }
  ],
  selectable: "row"
});
  
var grid2 = $("#grid2").data("kendoGrid");
grid2.select("tr:eq(1)");
  
</script>
</body>
</html>

 

Thanks.

2 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 01 Jun 2015, 07:44 AM

Hello Shoji Kaburagi,

The reason for the issue is that selector for the row that should be selected is not specific enough i.e. in both calls of the select method it targets the first row on the page, not the first row of the current grid. I would suggest to change it like this:

var grid = $("#grid").data("kendoGrid");
grid.select(grid.tbody.find("tr:eq(1)"));

The call for the second Grid is equivalent. I hope this information helps.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Shoji Kaburagi
Top achievements
Rank 1
answered on 01 Jun 2015, 12:50 PM
Yes, that solves it. Thanks!
Tags
Grid
Asked by
Shoji Kaburagi
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Shoji Kaburagi
Top achievements
Rank 1
Share this question
or