Question

我们遇到了有关层次结构网格实现的问题，因为我们在使用自定义数据源复制功能时遇到了一些困难，如下所示：

var DataSource1 = [

{ID：“1”，名字：“John”，姓：“Smith”，标题：“Mr”}，

{ID：“2”，名字：“Jane”，姓：“Doe”，标题：“Miss”}，

{ID：“3”，名字：“Bruce”，姓：“Wayne”，标题：“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”};

我们需要以下问题的帮助： -

我们如何根据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>

谢谢，

Answer 1

您需要放置2个Kendo网格来实现这一点，父网格和子网格。

第一个网格（父网格）

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

第二个网格（子网格）。您可以看到子网格从函数中获取“＃= Cid” “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;
}

希望这对你有所帮助。祝你好运：）

Kendo网格过滤/层次结构问题

1 个答案: