如何使用 Kendo UI Grid 的 SetDataSource 方法 [英] How to use SetDataSource Method of the Kendo UI Grid
问题描述
有没有人能够使用剑道UI网格的setdatasource方法?我相信这用于分配可以在后期分配给网格的数据源，也用于网格刷新目的.但是我找不到任何合适的文档来解释如何使用这种方法并制作可刷新的网格.
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.
我正在尝试通过远程 ajax 调用更新我的数据源.我还假设它应该在源更新时通过将 autosync 属性设置为 true 来自动刷新.每次单击日历控件时，我都会将日期值传递给 GetRemoteData 函数，以便通过 ajax 请求更新数据.
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.
这暂时不起作用.有什么线索可以解决这个问题吗?
This doesn't work at the moment. Any clue as to what is the solution for this?
我的观点
$('#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;
}
推荐答案
到目前为止您尝试了什么?这是非常基本的.
What have you tried so far? This is pretty basic.
示例:
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.
网格更新
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);
这篇关于如何使用 Kendo UI Grid 的 SetDataSource 方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
