如何使用Kendo UI Grid的SetDataSource方法 [英] How to use SetDataSource Method of the Kendo UI Grid
问题描述
有没有人能够使用kendo UI网格的setdatasource方法？我相信这是用来分配后期可以分配给网格的数据源，也可以用于网格刷新的目的。然而，我找不到任何适当的文档，说明如何使用此方法，并使网格可刷新。
我试图通过远程ajax调用更新我的数据源。我还假定它应该在通过将autosync属性设置为true更新源时自动刷新。每次我点击日历控件我都会将日期值传递给GetRemoteData函数，以便通过ajax请求更新数据。
此时此功能不起作用。有什么解决办法的任何线索？
我的观点
<$ p $ {
格式：dd / MM / yyyy，
culture：en-GB，
更改：onDateChange
}）;
函数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，
可分页：{
输入：true，
数字：false
} ，
可调整大小：true，
可重新排序：true，
可过滤：{
extra：false
}，
列：[
{
字段：DealNumber，
宽度：150，
标题：DealNumber，
可过滤：{
运算符：{
string ：{
startswith：Starts With，
包含：包含
}
}
}，
}，
{
字段：DealIssuer，
宽度：150，
标题：发行人，
可过滤：{
运营商：{
string：{
开头：开始于，
包含：包含
}
}
}
}，
{
字段：Ticker，
宽度：150，
标题：Ticker，
可过滤：{
运营商：{
字符串：{
startswith：开始于，
包含：包含
}
}
}
}，
{
字段：DealType，
宽度：150，
标题：类型，
可过滤：{
操作符：{
字符串：{
startswith：开始于，
包含：包含
}
}
}
}，
{
字段：DealValue，
宽度：150，
title：Value，
可过滤：{
操作符：{
字符串：{
startswith：开始于，
包含：Contains
字段：DealStatus
width 150
title ：状态，
可过滤：{
操作员：{
字符串：{
startswith：开始于，
包含：包含
}
}
}
}，
{
字段：DealPricingCompletionDate，
width：230，
title： DealPricingCompletionDate，
格式：{0：dd / MM / yyyy}，
//模板：'＃= kendo.toString（StartDate，dd / MM / yyyy）＃'，
可过滤：{
ui：datetimepicker，
运营商：{
date：{
gt：After，
lt：Before ，
eq：等于
}，
消息：{
过滤器：应用，
清除：清除
}
}
}
}，
{
命令：{text：查看详情，点击：showDetails}，标题：，width：140px
}，
]，
editable：popup，
height：600
}）。data （ kendoGrid）;
函数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：{
键入：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：selectedDate
}
返回数据;
}
}，
架构：{
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（）;
}）;
返回来源;
}
到目前为止你尝试过什么？
示例： （ '#testDropDown'）的数据（ kendoDropDownList）;
var otherDropDownList = $（'＃otherDropDown'）。data（kendoDropDownList）;
var ds = new kendo.data.DataSource（）;
ds.data（otherDropDownList.dataSource.data（））; //将new DataSource设置为otherDropDown的数据源，然后过滤它
ds.filter（
{
field：Id，
operator：eq，
value ：parseInt（id）
}
）
ddl.setDataSource（ds）;
显然，无论你有哪种情况，这都会有所不同。
网格更新
var ds = new kendo.data。数据源（）;
var grid = $（'＃grid'）。data（kendoGrid）;
grid.setDataSource（ds）; //设置为空数据源
或者，使用这个数据源与另一个网格？
var gridDataSource = $（'＃grid'）。data（kendoGrid）。dataSource;
var secondGrid = $（'＃secondGrid'）。data（kendoGrid）;
secondGrid.setDataSource（gridDataSource）;
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.
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?
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;
}
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);
这篇关于如何使用Kendo UI Grid的SetDataSource方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
