劍道電網濾波/層次問題

如下圖所示我們有關於層次網格的執行問題，因爲我們已經經歷了與我們的自定義數據源複製功能的一些困難：劍道電網濾波/層次問題

VAR DataSource1 = [

{ID：「1」，姓氏：「John」，姓氏：「Smith」，標題：「Mr」}，

{ID：「2」，名字：「Jane」，姓氏：「Doe」，標題：「Miss」}，

{ID ：「3」，名：「Bruce」，姓：「Wayne」，標題：「MR」}];

變種DataSource2 = [

{ID：「1」，數據1：「1001」，數據2：「2900」，數據3「Y」}，

{ID：「2」，數據1：數據3「，」數據2「，」數據2「，」數據2「，」數據2「，」數據3「，」數據2「，」2902「，數據3」

我們需要對以下問題的援助： -

我們如何創建基於ID的詳細鏈接即因此當上的Tab鍵，只顯示ID爲1的數據源中的客戶端的點擊？

+--------------+---+------+-------+----+ 
|    | 1 | John | Smith | MR | 
+--------------+---+------+-------+----+ 
| Detailed Tab | 1 | 1001 | 2900 | Y | 
+--------------+---+------+-------+----+

您能否告訴我們如何用本地數據源實現這一點，並且我們正在用Java腳本開發HTML。

請在下面找到我們的示例代碼中，我們試圖讓過濾器工作

<!DOCTYPE html> 
<html> 
<head> 
    <title>Detail template</title> 

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet"> 
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet"> 
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet"> 

    <script src="../../../js/jquery.min.js"></script> 
    <script src="../../../js/kendo.web.min.js"></script> 
    <script src="../../content/shared/js/console.js"></script> 



    <script> 

    </script> 
</head> 
<body> 

      <script type="text/x-kendo-template" id="template"> 
       <div class="tabstrip"> 
        <ul> 
         <li class="k-state-active"> 
          Orders 
         </li> 
        </ul> 
        <div> 
         <div class="orders"></div> 
        </div> 
       </div> 

      </script> 



<div id="grid1"></div> 

    <script> 
       var DataSource1 = [ 
       { ID: "1" ,Fristname: "Jhon", Lastname: "Smith", Title: "Mr"}, 
       { ID: "2" ,Fristname: "Jane", Lastname: "Doe", Title: "Miss"}, 
       { ID: "3" ,Fristname: "Bruce", Lastname: "Wayne", Title: "MR"}, ]; 

       var DataSource2 = [ 
       { ID: "1" , Data1: "1001", Data2: "2900", Data3: "Y"}, 
       { ID: "2" , Data1: "1002", Data2: "2901", Data3: "Y"}, 
       { ID: "3" , Data1: "1003", Data2: "2902", Data3: "N"}, ]; 

       $("#grid1").kendoGrid({ 
        dataSource: DataSource1, 
        detailInit: detailInit, 
        detailTemplate: kendo.template($("#template").html()), 

        toolbar: ["save", "cancel"], 
        columns: [ 
        { field:"ID",title:"ID" }, 
        { field:"Fristname",title:"Fristname" }, 
        { field:"Lastname",title:"Lastname" }, 
        { field:"Title",title:"Title" }, 
        ], 
        editable : true, 
       }); 

       function detailInit(e) { 
        var detailRow = e.detailRow; 

        detailRow.find(".tabstrip").kendoTabStrip({ 
         animation: { 
          open: { effects: "fadeIn" } 
         } 
        }); 

        detailRow.find(".orders").kendoGrid({ 
         dataSource: DataSource2, 

         filter: { field: "ID", operator: "eq", value: e.data.ID }, 

         scrollable: false, 
         sortable: true, 
         pageable: true, 
         columns: [ 
         { field:"ID",title:"ID" }, 
         { field:"Data1",title:"Data1" }, 
         { field:"Data2",title:"Data2" }, 
         { field:"Data3",title:"Data3" }, 
         ], 
         editable : true, 
        }); 
       } 

</script> 




</body> 
</html>

感謝，

來源

2013-07-11 Philip

想知道是否有任何更新，以指向正確的方向嗎？ – Philip

您需要將2個劍道網格來實現這一點，家長網格和子網格。

一格（父網格）

@(Html.Kendo().Grid<XYZ.Models.ViewModels.ABCMODEL>() 
    .Name("ParentGrid") 
    .Columns(columns => 
    { 
     columns.Bound(e => e.A).Title("ABC").Width(30); 
     columns.Bound(e => e.B).Title("EFG").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" }); 
     columns.Bound(e => e.C).Title("IJK").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" }); 
     columns.Bound(e => e.D).Title("MNO").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" }); 
     columns.Bound(e => e.E).Title("XYZ.").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" }); 

    }) 
    //.Scrollable() 
    .DetailTemplateId("template") 
     .HtmlAttributes(new { style = "height:100%; background-color: #fcfedf;" }) 
     .HtmlAttributes(new { @class = "tableMain" }) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     // .PageSize(6) 
      .Read(read => read.Action("HierarchyBinding_ABC", "Profit")) 
    ) 
    .Events(events => events.DataBound("dataBound")) 
    //.ColumnMenu() 
    // .Scrollable() 
    //.Sortable() 
    //.Pageable() 
)

第二格（子網格）。正如你可以看到孩子電網從功能以「＃=熙德」「HierarchyBinding_XYZ」

<script id="template" type="text/kendo-tmpl"> 
@(Html.Kendo().Grid<ABC.Models.ViewModels.ABCMODEL>() 
     .Name("grid_#=CId#") 
     .Columns(columns => 
     { 
      columns.Bound(e => e.a).Title("123").Width(30); 
      columns.Bound(e => e.b).Title("456").Format("{0:N3}").Width(30); 
      columns.Bound(e => e.c).Title("789").Format("{0:N3}").Width(30); 
      columns.Bound(e => e.d).Title("101").Format("{0:N3}").Width(30); 
      columns.Bound(e => e.e).Title("112").Format("{0:N3}").Width(30); 
     }) 
     .DataSource(dataSource => dataSource 
      .Ajax() 
      // .PageSize(5) 
      .Read(read => read.Action("HierarchyBinding_XYZ", "Profit", new { CId =  "#=CId#" })) 
     ) 
     .ToTemplate() 
) 



</script>

額外的代碼被添加： -

<script> 

    function dataBound() { 
     var grid = this; 


     $(".k-hierarchy-cell").css({ width: 8 });  
     $(".k-hierarchy-col").css({ width: 8 }); 
    } 
</script> 


    <style> 

.k-grid tbody .k-grid .k-grid-header 
{ 
    display: none; 
}

希望這可以幫助你。祝你好運:)

來源

2013-12-25 20:01:38 Shivam657

劍道電網濾波/層次問題

回答

相關問題