Кендо сетки фильтрации/Иерархия проблема

мы имеем вопросы, касающиеся реализаций иерархии Энергосистемы, как мы испытали некоторые трудности с тиражированием функциональности нашего источником пользовательских данных, как показано ниже:Кендо сетки фильтрации/Иерархия проблема

варом DataSource1 = [

{ID: "1", FirstName: "John", Фамилия: "Smith", Название: "Mr"},

{ID: "2", FirstName: "Jane", Lastname: "Doe" Название: «Мисс»},

{ID : "3", FirstName: "Bruce", Lastname: "Wayne", Title: "MR"}];

вар DataSource2 = [

{ID: «1», Данные1: «1001», Data2: «2900», Data3 «Y»},

{ID: «2», Данные1: «1002», Data2: «2901», Data3 «Y»},

{ID: "3", Data1: "1003", Data2: "2902", Data3 "N"}];

Мы требуем помощи по следующим вопросам: -

Как мы создаем подробную ссылку, основанную на ID, т.е. Таким образом, когда клиент нажмите на кнопке Tab она отображает только источник данных для ID-1?

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

Можете ли вы посоветовали, каким образом это может быть достигнуто с помощью локального источника данных, и мы развиваемся в HTML с Java скриптов.

Пожалуйста, найдите ниже наш пример кода, который мы пытаемся получить фильтр работать

<!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 Кендо сетки для достижения этой цели, Parent сетки и ребенок сетки.

Первая сетка (Parent Сетка)

@(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() 
)

Вторая сетка (ребенок Grid) .Как вы можете увидеть ребенка сетки принимает "# = Сида" из функции "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; 
}

Надеется, что это помогает you.Good удачи :)

источник

2013-12-25 20:01:38 Shivam657

Кендо сетки фильтрации/Иерархия проблема

ответ

Смежные вопросы