Question

如何使用本地数据创建分层剑道网格？我有一个＆＃34;主人＆＃34;网格如下：

<section id="master-item">
    <div class="panel">
                @(Html.Kendo().Grid<TheViewModel>()
            .Name("dealerFacilitySchedules")
            .DataSource(data => data
                .Ajax()
                .Model(model => model.Id(p => p.FacilityScheduleId))
                .ServerOperation(false)
            )
            .BindTo(Model.FacilitySchedules)
            .Columns(columns =>
            { /* colums definition */
            })
            /* other staff */
            .ClientDetailTemplateId("slave-item")
        )
    </div>
</section>

我不知道如何获得＆＃34;奴隶＆＃34;项目定义。如何在BindTo方法中提取商品ID？

<script id="slave-item" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<TheSlaveItemViewModel>()
            .Name("dealerFacilitySchedule#=Id#")
            .DataSource(data => data
                .Ajax()
                .Model(model => model.Id(p => p.FacilityScheduleItemId))
                .ServerOperation(false)
            )
            .BindTo(Model.FacilitySchedules[ **How to add templated ID here??** ])
            .Columns(columns =>
            { /* definition of columns */
            })
            /* other config */
            .ToClientTemplate()
    )
</script>

Answer 1

如果有人仍然对该主题感兴趣，我还没有找到如何使用ASP.NET包装器来解决问题。但是，可以使用纯HTML和JS来解决它，如下所示：

<section id="root-grid">
    <div class="panel">
        <div class="grid"></div>
    </div>
</section>

<script type="text/x-kendo-template" id="slave-template">
    <div class="panel">
        <div class="grid"></div>
    </div>
</script>

<script type="text/javascript">
    $(function () {
        var data = @Html.Raw(Json.Encode(Model.FacilitySchedules));
        var columns = [
            makeKendoColumn("ValidFrom", "@Resources.DealerFacility_ValidFrom", "{0:d}", "date"),
            // other columns
        ];
        var detailColumns = [
            // as above - columns definition
        ];

        OnRootScheduleGridInitialize(
            data,
            columns, detailColumns,
            $('#root-grid').find('.grid'));
    });
</script>

脚本：

function OnRootScheduleGridInitialize(dataObject, columnsDefinition, subGridColumnsDefinition, $node) {
    $node.kendoGrid({
        dataSource: {
            data: dataObject,
            schema: {
                model: {
                    fields: {
                        // root model fields definition
                    }
                }
            },
            pageSize: 20
        },
        scrollable: true,
        sortable: true,
        pageable: {
            input: true,
            numeric: false
        },
        columns: columnsDefinition,

        detailTemplate: kendo.template($("#slave-template").html()),
        detailInit: OnDetailsScheduleInitializeFactory(subGridColumnsDefinition),
    });
}

function OnDetailsScheduleInitializeFactory(columnsDefinition) {
    return function (e) {
        var $row = e.detailRow;

        $row.find('.grid').kendoGrid({
            dataSource: {
                data: e.data.FacilityScheduleItems,
                schema: {
                    model: {
                        fields: {
                            // slave object model fields definition
                        }
                    }
                },
                pageSize: 20
            },
            scrollable: true,
            sortable: true,
            pageable: {
                input: true,
                numeric: false
            },
            columns: columnsDefinition,
        });
    };
}

function makeKendoDateColumn(columnName, columnLabel) {
    return makeKendoColumn(columnName, columnLabel, 'd', 'date');
}

function makeKendoNumericColumn(columnName, columnLabel) {
    return makeKendoColumn(columnName, columnLabel, 'n', 'number');
}

function makeKendoGenericColumn(columnName, columnLabel) {
    return {
        field: columnName,
        title: columnLabel,
        width: '100px',
    };
}

function makeKendoColumn(name, label, format, attrClass) {
    var maker = function (n, l, f, c) {
        var result = {
            width: '100px'
        };
        n(result);
        l(result);
        f(result);
        c(result);
        return result;
    }

    var nameDec = function (r) { r.field = name; };
    var labelDec = function (r) { r.title = label; };
    var attrDec = function () { };
    var formatDec = function () { };

    if (attrClass) {
        attrDec = function (r) { r.attributes = { "class": attrClass }; };
        formatDec = function (r) { r.format = format; };
    }
    else {
        if (format) {
            attrDec = function (r) { r.attributes = { "class": attrClass }; };
        }
    }

    return maker(nameDec, labelDec, formatDec, attrDec);
}

如果您有任何其他解决方案，请分享。

Answer 2

这是一个片段，描述了从父网格中获取值的语法。它调用的Action方法是使用当前商机

中的数据填充模型

 .DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("GetDetailsAll", "Order", new {  opportunityId = "#=OpportunityId#" }))

通过#=OpportunityId#

调用父行OppId

具有本地数据的分层Kendo Grid

2 个答案: