Menu
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;
}
671
Bind data to Kendo Grid by using AJAX Read action method. Change the datasource on change event of any HTML controls. Normally, a developer can bind the data to Grid by using AJAX Read method. This read method is ActionResult method in MVC which will return JSON DataSourceResult & direclty bind the data to Grid.
ParameterMap, as defined in Kendo documentation, is a function which converts the request parameters to a format suitable for the remote service. In the format of the function, ParameterMap: function (options, operation){...}, the options parameter is a tricky one. In Kendo documentation, it is called data.
Returns the data item to which the specified table row is bound. The data item is a Kendo UI Model instance.
autoBind Boolean (default: true)By default, autoBind is set to true and the widget will bind to the data source specified in the configuration. Setting autoBind to false is useful when multiple widgets are bound to the same data source.
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 LINK by 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.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
