Select method not selecting Kendo UI Grid row
Question
I can't seem to get the select kendo ui grid (web) method to select a row (or anything for that matter). I read in another post to include the div id in the selector, but that doesn't help either. For simplicity, I am trying to do this in telerick's example here: http://dojo.telerik.com/oNeR
I would expect that the first row is selected automatically by adding:
var gridRow = $("#rowSelection").data("kendoGrid");
gridRow.select("tr:eq(0)");
Full Example:
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/selection">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/orders.js"></script>
<div id="example">
<div class="demo-section k-header">
<h4>Grid with multiple row selection enabled</h4>
<div id="rowSelection"></div>
</div>
<div class="demo-section k-header">
<h4>Grid with multiple cell selection enabled</h4>
<div id="cellSelection"></div>
</div>
<script>
$(document).ready(function () {
$("#rowSelection").kendoGrid({
dataSource: {
data: orders,
pageSize: 6
},
selectable: "single",
pageable: {
buttonCount: 5
},
scrollable: false,
navigatable: true,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
]
});
$("#cellSelection").kendoGrid({
dataSource: {
data: orders,
pageSize: 6
},
selectable: "multiple cell",
pageable: {
buttonCount: 5
},
scrollable: false,
navigatable: true,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
]
});
});
var gridRow = $("#rowSelection").data("kendoGrid");
gridRow.select("tr:eq(0)");
</script>
</div>
</body>
</html>
2 answers
solution1
0 2014-09-05 21:10:26
On first glance the grid code is correct. I am almost certain your issue is that your script is executing and calling the methods on the grid before it can be initialised - certainly before it can be bound. In the first case I'd expect to see errors in the console because gridRow would be defined, in the second I'd expect it to fail silently because the selector tr:eq(0) won't match anything.
Try attaching a function to the databound event of the grid as follows-
<script>
$(document).ready(function () {
function selectFirstRow(event) {
event.sender.select("tr:eq(0)");
}
$("#rowSelection").kendoGrid({
dataBound: selectFirstRow,
dataSource: {
data: orders,
pageSize: 6
},
selectable: "single",
pageable: {
buttonCount: 5
},
scrollable: false,
navigatable: true,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
]
});
$("#cellSelection").kendoGrid({
dataSource: {
data: orders,
pageSize: 6
},
selectable: "multiple cell",
pageable: {
buttonCount: 5
},
scrollable: false,
navigatable: true,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
]
});
});
</script>
solution2
0 2022-08-29 15:48:42
In your grid configuration your selectable property is incorrect:
selectable: "single"
set this to selectable: "row"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.