This is a migrated thread and some comments may be shown as answers.

Set grid's datasource after the grid has been created

5 Answers 2332 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tyler
Top achievements
Rank 1
Tyler asked on 30 Jul 2012, 06:16 PM

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: {
                       url: "http://localhost/DashboardServices/api/Assessments",
                       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

Sort by
0
Atanas Korchev
Telerik team
answered on 31 Jul 2012, 07:36 AM
Hello Tyler,

 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();
}

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tyler
Top achievements
Rank 1
answered on 01 Aug 2012, 12:37 AM

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: {
                       url: "http://localhost/DashboardServices/api/Assessments",
                   }
               },
               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  
}
0
Atanas Korchev
Telerik team
answered on 01 Aug 2012, 05:27 AM
Hi,

 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.

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tyler
Top achievements
Rank 1
answered on 02 Aug 2012, 01:13 AM
So can I do something like this that just re-uses the dataSource of the existing grid?
var grid = $("#grid").data("kendoGrid");
grid.dataSource.transport.read.url = "http://localhost/DashboardServices/api/Assessments";
grid.dataSource.read();


0
Atanas Korchev
Telerik team
answered on 02 Aug 2012, 08:02 AM
Hello Tyler,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Tyler
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Tyler
Top achievements
Rank 1
Share this question
or