jQuery 如何从ajax查询将数据绑定到kendoui网格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11248478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to bind data to a kendoui grid from an ajax query?
提问by Daniel
I have a datepicker and a grid on a page. I want the grid to be populated based on the date in the datepicker. I have done this with a Telerik mvc grid using grid.dataBind.
我在页面上有一个日期选择器和一个网格。我希望根据日期选择器中的日期填充网格。我使用 grid.dataBind 使用 Telerik mvc 网格完成了此操作。
var grid = $('#Grid').data('tGrid');
var pDate = document.getElementById('DatePicker').value;
$.ajax(
{
type: 'POST',
url: '/Home/AccountSummary/',
dataType: 'json',
data: { date: pDate },
success: function (result) {
grid.dataBind(result);
}
});
Now I want to do the same thing except with the Kendoui grid. I know I need to get the grid by using $('#Grid').data('kendoGrid'). But how do I bind my result to the grid?
现在我想做同样的事情，除了 Kendoui 网格。我知道我需要使用$('#Grid').data('kendoGrid'). 但是如何将我的结果绑定到网格？
回答by Igorrious
Assuming the result variable contains an array of javascript objects, and it contains data for the same number of columns as the original mark up.
假设结果变量包含一个 javascript 对象数组，并且它包含与原始标记相同数量的列的数据。
ie. result = [{"AccountId":1,"Name":"AAA"},{"AccountId":2,"Name":"BBB"}];
IE。 result = [{"AccountId":1,"Name":"AAA"},{"AccountId":2,"Name":"BBB"}];
Try the following:
请尝试以下操作：
$.ajax(
{
type: 'POST',
url: '/Home/AccountSummary/',
dataType: 'json',
data: { date: pDate },
success: function (result) {
$("#Grid").data("kendoGrid").dataSource.data(result);
}
});
回答by phyrisrose
You can also do it this way:
你也可以这样做：
var dataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
$.ajax({
type: "POST",
url: "Controller/Handler",
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: JSON.stringify({key: "value"}),
success: function(data) {
options.success(data);
}
});
}
}
});
Then bind it to the grid:
然后将其绑定到网格：
var grid = $("#grid").kendoGrid({
dataSource: dataSource
}
This way you can add the rest of the CRUD actions to your transport and you will have all your code in one place.
通过这种方式，您可以将其余的 CRUD 操作添加到您的传输中，并且您将在一个地方拥有所有代码。
回答by Kiran
You can bind Json results to the grid. And also you can pass Model if you need to. See the code snippet below for example.
您可以将 Json 结果绑定到网格。如果需要，您也可以传递模型。例如，请参阅下面的代码片段。
See herefor more details.
请参阅此处了解更多详情。
$('#FindBtn').click(function (e) {
e.preventDefault();
var UserDetails =
{
"FirstName": document.getElementById('FirstName').value,
"LastName": document.getElementById('LastName').value,
};
$.ajax({
url: "SearchJsonRequest",
type: 'POST',
contentType: "application/json;charset=utf-8",
data: JSON.stringify(UserDetails),
dataType: "json",
success: function (data) {
var grid = $('#AssociateSearch').getKendoGrid();
grid.dataSource.data(data);
grid.refresh();
}
});
return false;
});
回答by ancajic
To extend on Igorrious... That exact answer didn't help me but it lead me to an answer.
扩展 Igorrious ......这个确切的答案对我没有帮助，但它让我找到了答案。
What worked for me:
什么对我有用：
$.ajax(
{
type: 'POST',
url: '/Controller/Action',
data: {
paramKey: paramValue
},
success: function (result) {
$("#my-grid").data("tGrid").dataBind(result);
}
});
If this doesn't help you, do some javascript debugging to find out why some of the elements in chain [$("#my-grid")] . [data("tGrid")] . [dataBind]have value == 'undefined'.
如果这对您没有帮助，请进行一些 javascript 调试以找出为什么链中的某些元素[$("#my-grid")] . [data("tGrid")] . [dataBind]具有value == 'undefined'.
