How to use SetDataSource Method of the Kendo UI Grid
Solution 1
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);
Solution 2
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.
![Sike12](https://i.stack.imgur.com/0Uk7A.jpg?s=256&g=1)
Comments
-
Sike12 almost 2 years
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; }
-
Sike12 about 11 yearsHI thedixon. Thank you for the code but i am trying to do the same with the Grid. I have tried all sorts of option but none worked until i came across this method called setDataSource. Would you be able to show the example like this for Grid. I can post my code if you want to see where it can be fit in.
-
Chris Dixon about 11 yearsYep, if you could post your current code and what you're trying to do, that'd be great.
-
Chris Dixon about 11 yearsUpdated my answer, still not 100% sure what you're trying to achieve, but that should point you in the right direction.
-
Sike12 about 11 yearsThank you very much. I'll see if i can refresh my datagrid contents dynamically with your suggestion.
-
Chris Dixon about 11 yearsNo problem, be sure to mark the answer as accepted if it works and is able to help others :)
-
Sike12 about 11 yearsHi thedixon the code var grid = $('#grid').data("kendoGrid"); are you sure thats how we do it? cause my grid declaration is different to what you have showed me.
-
Sike12 about 11 yearsFurther explanation has been added to the question
-
Sike12 about 11 yearsHi thedixon. i modified by onDateChange Function with your code. function onDateChange() { var selectedDate = kendo.toString(this.value(), 'dd/MM/yyyy'); GetRemoteData(selectedDate); var grid = $('#grid').data("kendoGrid"); grid.setDataSource(source); }. This worked like magic. You are a Kendo UI Champion/Superman. Thank you very much for your help.
-
Chris Dixon about 11 yearsHaha, thank you @Sike12 and I'm glad you got your solution all working, have fun with Kendo! :)
-
Sike12 over 8 yearsThank you @freedeveloper