Kendo UI Grid - display a grid by reference

Question

I use KendoUI Web and want the links inside the Kendo ListView to be clicked to display the Kendo Grid. I am using a template for a ListView.

HTML:

<div id="listView" ></div> <div id="grid" ></div> 

Template:

 <script type="text/x-kendo-tmplate" id="template"> <div> <ul> <li><a class="list k-link" title="#= title #" id="#= id#" >#= name #</a></li> </ul> </div> </script> 

I tried to do this using the following code, but nothing happens. Only the identifier is read correctly, but the request is not executed.

  $(" .list").live({click:function(){ var id=$(this).attr('id'); $("#grid").kendoGrid({ dataSource: { transport: { read: "somefile.php?id="+id, }, schema: { data:"data", model: { id: "id_pf", fields:{ first:{}, second:{} } } }, total: function(response) { return $(response.data).length; }, pageSize: 10 }, columns: [ { title: "First", field: "first"}, { title: "Second", field: "second"}, ] }); }}); 

Answer 1

I solved this by removing meshing outside the function. So, at first the grid is displayed without data.

 var ds=new kendo.data.DataSource({ transport: { read: "somefile.php", }, schema: { data:"data", model: { id: "id_pf", fields:{ first:{}, second:{} } } }, total: function(response) { return $(response.data).length; }, pageSize: 10 }); $("#grid").kendoGrid({ dataSource: ds, columns: [ { title: "First", field: "first"}, { title: "Second", field: "second"}, ] }); 

When the link is clicked, the data source is re-read with the updated URL, updated and now displays the necessary data.

  $(" .list").live({click:function(){ var id=$(this).attr('id'); var gridUrl = "somefile.php?id="+ id; var grid = $("#grid").data("kendoGrid"); grid.dataSource.transport.options.read.url =gridUrl; grid.dataSource.read(); grid.dataSource.refresh(); }});