assign dataSource property of grid doesn't seem to work

[Tim R]

  The grid has been initialized, so:

    $(document).ready(function()
    {
        $("#foo-grid").kendoGrid(
      { height: 360,
          groupable: false,
          scrollable: true,
          sortable: true,
          pageable: true,
          columns:[
              {
                  field: "id",
                  title: "id"
              },
              {
                  field: "baz",
                  title: "chosen"
              }   
          ]
      });
 });

And later, based on user-interaction with the page, some data are fetched in JSON format from a generic handler (ashx) and are passed to the function below, in the params object:

   function populateGrid(event, params) {
        // at this juncture, examination in the debugger confirms that params.data contains an array of json objects
        // [ {"id":1, "baz": true }, {"id":2, "baz": true}, {"id":3, "baz": false},.{"id":4, "baz": true }]
         var grid = $("#foo-grid).data("kendoGrid");   // get a handle to the grid
         grid.dataSource = { data: params.data, pageSize: 25 };
    }

I get a handle to the grid and then assign its dataSource object via the API, but nothing happens. Instead of instantiating the grid when the document is ready and then later trying to set its dataSource, should I wait to instantiate the grid object inside the function above and populate it all in one fell swoop? If so, how do I completely destroy the grid?  The user may make multiple queries, and the grid would then have to be reinstantiated and repopulated several times.

[Atanas Korchev]

Hi,

 Setting the datasource after the grid is initialized is not supported. You can do the following however:

grid.dataSource.pageSize(25);
grid.dataSource.data(params.data);

Regards,
Atanas Korchev
the Telerik team

[Tim R]

If the dataSource cannot be reassigned, I will have to reinstantiate the grid multiple times, because the users are making multiple queries.  Imagine a call center where the operator is being asked, "Do you have any distributors near my zip code?" and with each call, executing a new geolocation search against the distributor's database, using the zipcode's latitude and longitude.

Will the jQuery remove() function get rid of all vestiges of the grid, all listeners too, leaving nothing whatsoever behind?  It's totally self-contained?

            $("#myKendoGrid").remove();

[Atanas Korchev]

Hello,

 Setting the datasource's data has the same effect as reassigning it. Did you try the code that I suggested?

 $("#myKendoGrid").remove(); will remove the myKendoGrid element from the DOM tree.

Regards,
Atanas Korchev
the Telerik team

[Tim R]

I thought you said the datasource could not be reassigned (could not be set after the grid was already initialized) and therefore understood this code you suggested:

       grid.dataSource.data(params.data); 

as a line that would be executed when the grid was being first instantiated/initialized, not later.

Whereas I need to reassign the datasource of the grid multiple times.  In query #1, the user might supply zip code '10012'. In query #2, the user might supply zip code '90120'.  After each query, the grid would have to be cleared of any previous rows and the new rows "injected".  The grid is on the same web page as the textbox that accepts the zipcode:


                     find distributors near zip code [              ]                [SEARCH BUTTON]
                     -----------------------------------------------------------------------------------------

                        results grid here. 


Hence, my follow up question: Does remove()   destroy all vestiges of the grid so it can simply be recreated?

[Tim R]

OK, it is possible to reassign the data array of the dataSource property of the grid, but not the dataSource object as a whole.
Thanks. Cooking with gas....