jQuery 如何使用 Kendo UI Grid 的 SetDataSource 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16014159/
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 use SetDataSource Method of the Kendo UI Grid
提问by Sike12
Has anyone been able to use setdatasource method of the kendo UI grid? I believe this is used to assign datasource that can be assigned to the grid at the later stage and also for grid refresh purposes. However i couldn't find any proper documentation that explains how to use this method and make refreshable grid.
有没有人能够使用剑道 UI 网格的 setdatasource 方法？我相信这用于分配可以在后期分配给网格的数据源，也用于网格刷新目的。但是，我找不到任何适当的文档来解释如何使用此方法并制作可刷新的网格。
I am trying to update my datasource via remote ajax call. I also assumed that it should autorefresh when the source is updated by setting the autosync property to true. Everytime i click the calendar control i pass in a date value to the GetRemoteData function so that the data is updated via the ajax request.
我正在尝试通过远程 ajax 调用更新我的数据源。我还假设它应该在源更新时通过将 autosync 属性设置为 true 来自动刷新。每次单击日历控件时，我都会将日期值传递给 GetRemoteData 函数，以便通过 ajax 请求更新数据。
This doesn't work at the moment. Any clue as to what is the solution for this?
这暂时不起作用。有什么线索可以解决这个问题吗？
My View
我的看法
$('#calendarContainer').kendoCalendar({
format: "dd/MM/yyyy",
culture: "en-GB",
change: onDateChange
});
function onDateChange() {
var selectedDate = kendo.toString(this.value(), 'dd/MM/yyyy');
GetRemoteData(selectedDate);
/*
$("#grid").data("kendoGrid").dataSource.data(bob);
$("#grid").data("kendoGrid").dataSource.read();
*/
}
$('#grid').kendoGrid({
dataSource:GetRemoteData(date),
scrollable: {
virtual: true
},
navigatable: true,
groupable: true,
sortable: true,
selectable: "row",
pageable: true,
pageable: {
input: true,
numeric: false
},
resizable: true,
reorderable: true,
filterable: {
extra: false
},
columns: [
{
field: "DealNumber",
width: 150,
title: "DealNumber",
filterable: {
operators: {
string: {
startswith: "Starts With",
contains: "Contains"
}
}
},
},
{
field: "DealIssuer",
width: 150,
title: "Issuer",
filterable: {
operators: {
string: {
startswith: "Starts With",
contains: "Contains"
}
}
}
},
{
field: "Ticker",
width: 150,
title: "Ticker",
filterable: {
operators: {
string: {
startswith: "Starts With",
contains: "Contains"
}
}
}
},
{
field: "DealType",
width: 150,
title: "Type",
filterable: {
operators: {
string: {
startswith: "Starts With",
contains: "Contains"
}
}
}
},
{
field: "DealValue",
width: 150,
title: "Value",
filterable: {
operators: {
string: {
startswith: "Starts With",
contains: "Contains"
}
}
}
},
{
field: "DealStatus",
width: 150,
title: "Status",
filterable: {
operators: {
string: {
startswith: "Starts With",
contains: "Contains"
}
}
}
},
{
field: "DealPricingCompletionDate",
width: 230,
title: "DealPricingCompletionDate",
format: "{0:dd/MM/yyyy}",
// template: '#= kendo.toString(StartDate, "dd/MM/yyyy") #',
filterable: {
ui: "datetimepicker",
operators: {
date: {
gt: "After",
lt: "Before",
eq: "Equals"
},
messages: {
filter: "Apply",
clear: "Clear"
}
}
}
},
{
command: { text: "View Details", click: showDetails }, title: " ", width: "140px"
},
],
editable: "popup",
height: 600
}).data("kendoGrid");
function GetRemoteData(date) {
var chosenDate;
if (typeof date == "undefined") {
chosenDate = "12-12-2013";
}
else {
chosenDate = date;
}
var source = new kendo.data.DataSource({
autoSync: true,
transport: {
read: {
type: "GET",
url: "http://localhost:35798/RestServiceImpl.svc/GetDealData",
dataType: "jsonp",
contentType: "application/json; charset=utf-8",
cache: false,
},
parameterMap: function (data, type) {
var data = {
startDate: chosenDate
}
return data;
}
},
schema: {
model: {
fields: {
DealNumber: { type: "string" },
DealIssuer: { type: "string" },
Ticker: { type: "string" },
DealType: { type: "string" },
DealValue: { type: "number" },
DealStatus: { type: "string" },
DealPricingCompletionDate: { type: "date" }
}
}
},
pageSize: 16
});
source.fetch(function () {
var data = this.data();
});
return source;
}
回答by Chris Dixon
What have you tried so far? This is pretty basic.
你都尝试了些什么？这是非常基本的。
Example:
例子：
var ddl = $('#testDropDown').data("kendoDropDownList");
var otherDropDownList= $('#otherDropDown').data("kendoDropDownList");
var ds = new kendo.data.DataSource();
ds.data(otherDropDownList.dataSource.data()); // set new DataSource to otherDropDown's data source then filter it
ds.filter(
{
field: "Id",
operator: "eq",
value: parseInt(id)
}
)
ddl.setDataSource(ds);
Obviously this is all going to be different for whichever scenario you have.
显然，无论您遇到哪种情况，这一切都会有所不同。
Update for Grid
网格更新
var ds = new kendo.data.DataSource();
var grid = $('#grid').data("kendoGrid");
grid.setDataSource(ds); // sets to a blank dataSource
Or, use this dataSource with another grid?
或者，将此数据源与另一个网格一起使用？
var gridDataSource = $('#grid').data("kendoGrid").dataSource;
var secondGrid = $('#secondGrid').data("kendoGrid");
secondGrid.setDataSource(gridDataSource);
回答by freedeveloper
If you want to set the setDataSource other way is creating a dataSource from the object returned by your ajax request as is explain in the following LINKby Brett
如果您想设置 setDataSource 其他方式是从您的 ajax 请求返回的对象创建一个数据源，如下面的LINK由Brett解释
var dataSource = new kendo.data.DataSource({
data: "your object returned by ajax"
});
$('#GridKatildigiKurslar').data('kendoGrid').setDataSource(dataSource);
Off Course the grid should be configured to show the returned object.
当然，网格应该配置为显示返回的对象。
