101
rated 0 times
[
103]
[
2]
/ answers: 1 / hits: 42770
/ 11 Years ago, mon, april 15, 2013, 12:00:00
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;
}
More From » jquery
