I'm having a problem trying to set the Grid's datasource after the grid has been created. Here is what I currently have, I've tried a bunch of diffenent vatiations of it, but none have worked. I can see from the Dev Tools in IE9 that its making the service call.
$(document).ready(function() { grid = $("#grid").kendoGrid({ dataSource: { pageSize: 10 }, height: 800, scrollable: true, sortable: true, filterable: true, pageable: { input: true, numeric: false }, columns: [ { field: "UnitId", title: "ID" }, { field: "UnitName", title: "Name", width: 200 }, { field: "Location", width: 200 }, { field: "Number", title: "Number" }, { field: "Rating" }, { field: "Date", title: "Date" } ] }); setDataSource() }); function setDataSource() { //check if the data is in the db var dataSource = new kendo.data.DataSource({ type: "json", transport: { read: { complete: function(e){ debugger; $("#grid").data("kendoGrid").dataSource.data(e); $("#grid").data("kendoGrid").dataSource.read();} } }, schema: { model: { fields: { UnitId: { type: "string" }, UnitName: { type: "string" }, Location: { type: "string" }, Number: { type: "string" }, Rating: { type: "string" }, Assessed: { type: "date" } } } }, }); }5 Answers, 1 is accepted
The data method of the DataSource needs a JavaScript array. You are passing the event argument of the jQuery.ajax complete event. This will not work.
Could you let us know what are you trying to achieve? Perhaps you can just set the grid's autoBind setting to false and manually call the datasource's read method when you need to:
grid = $("#grid").kendoGrid({ dataSource: { // the full data source configuration }, autoBind: false});function setDataSource() { $("#grid").data("kendoGrid").dataSource.read();}Atanas Korchev
the Telerik team
Rank 1
I would like to be able to create a new datasource at any time and assign it to the grid. There will be filters that a user can select on the page and when the filters change the datasource will need to be recreated.
I've tried setting it like the last few lines below but couldn't get it to work.
function setDataSource() { var dataSource = new kendo.data.DataSource({ type: "json", transport: { read: { } }, schema: { model: { fields: { UnitId: { type: "string" }, UnitName: { type: "string" }, Location: { type: "string" }, Number: { type: "string" }, Rating: { type: "string" }, Assessed: { type: "date" } } } }, }); $("#grid").data("kendoGrid").dataSource.read(); $("#grid").data("kendoGrid").dataSource.data(dataSource.data); //doesn't work $("#grid").data("kendoGrid").dataSource = dataSource; //doesn't work } To set the filters of the data source you could use the filter method:
$("#grid").data("kendoGrid").dataSource.filter( { field: "name", operator: "eq", value: "John Doe" });
$("#grid").data("kendoGrid").dataSource.data(dataSource.data);
won't work because dataSource.data is a function. This would work though:
$("#grid").data("kendoGrid").dataSource.data(dataSource.data());
However you need to be sure that the data has been received from the server.
I still recommend using the API of the grid's data source instead of replacing the data source altogether.
Atanas Korchev
the Telerik team
Rank 1
var grid = $("#grid").data("kendoGrid");grid.dataSource.transport.read.url = "http://localhost/DashboardServices/api/Assessments";grid.dataSource.read();No, this will not work. The transport is used only when the data source is initialized. Changing it after that will have no effect.
Could you please let us know what exactly are you trying to achieve? I thought my first reply answered your question but I probably misunderstood the issue.
Regards,
Atanas Korchev
the Telerik team