Kendo ui 剑道UI网格-单击链接显示网格

我正在使用剑道网，当点击显示剑道网格时，我希望在剑道列表视图中有链接。我正在使用ListView的模板

HTML:

---

我通过删除函数外部网格的创建来解决这个问题。 因此，首先显示没有数据的网格

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

单击一个链接，就会用更新的url重新读取数据源，并刷新，现在会显示所需的数据

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

     }});

---

您希望网格替换ListView，还是在剑道窗口中打开？我希望网格位于ListView旁边。类似于master detail。我建议您使用AJAX请求一个返回JSON的服务器方法，并将其绑定到$（“#grid”）.data（“kendoGrid”）。（返回时的数据）

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

}});

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

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

     }});