I have tried many different methods suggested in stackoverflow and on the other pages but still cannot refresh data on the Kendo Grid. I encounter "TypeError: $(...).data(...) is undefined" error when applying the following methods. Any help pls?
<div id="grid"></div>
<button id="refresh" class="k-button" onclick="Refresh()">Refresh</button>
<script>
var grid = $("#grid").kendoGrid({
//code omitted for brevity
dataSource: {
type: "json",
transport: {
read: {
url: "/Event/Event_Read",
dataType: "json",
cache: false
}
},
schema: {
model: {
fields: {
CardNo: { type: 'number' }
//code omitted for brevity
}
}
}
},
pageable: {
pageSize: 15,
refresh: true
},
filterable: true,
columns:
[
{ field: "CardNo", title: "Card No", filterable: true }
//code omitted for brevity
]
}).data("kendoGrid");
function Refresh() {
$("#grid").data("kendoGrid").dataSource.read();
$("#grid").data("kendoGrid").refresh();
}
</script>
I have tried many different methods suggested in stackoverflow and on the other pages but still cannot refresh data on the Kendo Grid. I encounter "TypeError: $(...).data(...) is undefined" error when applying the following methods. Any help pls?
<div id="grid"></div>
<button id="refresh" class="k-button" onclick="Refresh()">Refresh</button>
<script>
var grid = $("#grid").kendoGrid({
//code omitted for brevity
dataSource: {
type: "json",
transport: {
read: {
url: "/Event/Event_Read",
dataType: "json",
cache: false
}
},
schema: {
model: {
fields: {
CardNo: { type: 'number' }
//code omitted for brevity
}
}
}
},
pageable: {
pageSize: 15,
refresh: true
},
filterable: true,
columns:
[
{ field: "CardNo", title: "Card No", filterable: true }
//code omitted for brevity
]
}).data("kendoGrid");
function Refresh() {
$("#grid").data("kendoGrid").dataSource.read();
$("#grid").data("kendoGrid").refresh();
}
</script>
-
Try putting your grid initialization in a
$(document).ready()– Matt Millican Commented Dec 7, 2015 at 5:23 - As a warning, do not spam links to this question across the site in ments. These ments are being flagged and removed. – Brad Larson Commented Dec 7, 2015 at 5:29
3 Answers
Reset to default 3Hi try this code instead, include the following css and js and try reloading grid.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.mon.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<button id="refresh" class="k-button" onclick="Refresh()">Refresh</button>
<script type="text/javascript">
$(function () {
var grid = $("#grid").kendoGrid({
//code omitted for brevity
dataSource: {
type: "json",
transport: {
read: {
url: "/Event/Event_Read",
dataType: "json",
cache: false
}
},
schema: {
model: {
fields: {
CardNo: { type: 'number' }
//code omitted for brevity
}
}
}
},
pageable: {
pageSize: 15,
refresh: true
},
filterable: true,
columns:
[
{ field: "CardNo", title: "Card No", filterable: true }
//code omitted for brevity
]
}).data("kendoGrid");
function Refresh() {
$("#grid").data("kendoGrid").dataSource.read();
$("#grid").data("kendoGrid").refresh();
}
});
</script>
worked for me and for reference have a look at this telerik website.
This should refresh the grid:
$("#grid").data("kendoGrid").dataSource.read();
The refresh method populates the grid again from the data source. If the data hasn't change the grid won't change either.
If you getting firebug error
TypeError: $(...).data(...) is undefined
it means that the grid is not yet initialized when this code is invoked or that the selector is wrong. Make sure that you dont mix up the name of grid with some other control
Try by changing Your selector name.
$("#MyGrid").data("kendoGrid").dataSource.read();
Please try this
$(".k-pager-refresh").trigger('click');
in your refresh function
or try this
$("#grid").data("kendoGrid").dataSource.read();
$("#grid").data("kendoGrid").refresh();
This helps you
Regards,
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742369269a4430931.html
评论列表（0条）