Create and display a grid when a link is clicked

[Anica]

I want to  display a grid  when a link inside a ListView is clicked . I'm using a template for the 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 following code but nothing happens. Only id is read correctly but the request is not made.

$(" .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"},
            ]
       });

}});

[Vladimir Iliev]

Hi Anica,

I have reviewed your code and it seems that the issue comes from the invalid property "data" in schema definition:

schema: {
    data:"data",

Also please note that you should initialize the Grid only once -  for example at document ready function. After that on "click" event  you should only refresh the DataSource with different Id.

e.g.:

$(".list").live({ click: function() {
              $("#grid").data("kendoGrid").dataSource.read({ id: value })

Kind Regards,
Vladimir Iliev
the Telerik team