0

以下に示すように、カスタムデータソースで機能を複製する際にいくつかの問題が発生したため、階層グリッドの実装に関して問題が発生しています。

var DataSource1 = [

  { ID: “1” , FirstName: “John”, Lastname: “Smith”, Title: “Mr”},

  { ID: “2” , FirstName: “Jane”, Lastname: “Doe”, Title: “Miss”},

  { ID: “3” , FirstName: “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”} 
];

次の質問についてサポートが必要です:-

ID に基づいて詳細なリンクを作成するにはどうすればよいでしょうか。つまり、クライアントがタブ ボタンをクリックすると、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>

ありがとう、

4

1 に答える 1

0

これを実現するには、親グリッドと子グリッドの 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()
)

2 番目のグリッド (子グリッド)。ご覧のとおり、子グリッドは関数 "HierarchyBinding_XYZ" から "#=Cid" を取得します。

<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-25T20:01:38.467 に答える