Сетка иерархии кендо - иерархия не работает - PullRequest
Новая
       20

Сетка иерархии кендо - иерархия не работает

0 голосов
/ 18 февраля 2019

Я пытаюсь создать иерархическую сетку в mvvm, прошел через несколько примеров, но не повезло.Должно быть, сделал какую-то ошибку.Хотя это не дает никаких исключений, но иерархия не работает, нормальная сетка заполняется.

Моя виртуальная машина выглядит следующим образом: 

var PolicyList;
xxx.PayRollProcess.PayRollPolicy = (function ($, kendo, _, App) {

    var vmSalaryPolicy = kendo.observable({
        // Properties
        //*******************************
        Id: null,
        Name: null,
        Description: null,
        CreatedBy: null,
        CreatedDate: null,
        PolicyID: null,
        SaveFieldButtonText: "Save Field",
        PolicyList : new kendo.data.DataSource({
            transport: {
                read: {
                    type: "GET",
                    url: xxx.Layout.viewModel.GetApiUrl("PayRoll/GetPolicies"),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    complete: function (data) {
                        debugger;
                        if (data.responseJSON !== null) {
                            vmSalaryPolicy.set("IsRecordFound", data.responseJSON.length > 0 ? true : false);
                            vmSalaryPolicy.set("SalryField", data.responseJSON[0]);
                        }
                    },
                    error: function (err) {
                        xxx.Layout.viewModel.ShowError(err);
                    }
                }
            },
            schema: {
                model: {
                    fields: {
                        SalaryPolicyID: { type: "number" },
                        Name: { type: "string" },
                        Description: { type: "string" },
                        CreatedBy: { type: "bool" },
                        CreatedOn: { type: "string" }
                    }
                }
            },
            pageSize: 10
        }),
        AllPolicyFieldDetailList : new kendo.data.DataSource({
            transport: {
                read: {
                    type: "GET",
                    url: xxx.Layout.viewModel.GetApiUrl("PayRoll/GetAllPayRollPolicyDetails"),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    complete: function (data) {
                        if (data.responseJSON !== null) {
                            vmSalaryField.set("IsRecordFound", data.responseJSON.length > 0 ? true : false);
                            vmSalaryField.set("SalryField", data.responseJSON[0]);
                        }
                    },
                    error: function (err) {
                        xxx.Layout.viewModel.ShowError(err);
                    }
                }
            },
            schema: {
                model: {
                    fields: {
                        SalaryPolicyID: { type: "number" },
                        SalaryPolicyName: { type: "bool" },
                        SalaryPolicyDescription: { type: "string" },
                        SalaryFieldID: { type: "string" },
                        SalaryFieldName: { type: "bool" },
                        Type: { type: "bool" },
                        HeaderName: { type: "string" }
                    }
                }
            },
            pageSize: 10
        }),
        dataSource: PolicyList,
        detailInit: function (e) {
            debugger;
            $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    type: "Get",
                    transport: {
                        read: {
                            type: "GET",
                            url: xxx.Layout.viewModel.GetApiUrl("PayRoll/GetAllPayRollPolicyDetails"),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            complete: function (data) {
                                if (data.responseJSON !== null) {
                                    vmSalaryPolicy.set("IsRecordFound", data.responseJSON.length > 0 ? true : false);
                                    vmSalaryPolicy.set("SalryField", data.responseJSON[0]);
                                }
                            },
                            error: function (err) {
                                xxx.Layout.viewModel.ShowError(err);
                            }
                        }
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    pageSize: 6,
                    filter: { field: "SalaryPolicyID", operator: "eq", value: e.data.SalaryPolicyID }
                },
                scrollable: false,
                sortable: true,
                pageable: true,
                columns: [
                    { field: "SalaryFieldID", title: "ID", width: "110px" },
                    { field: "SalaryFieldName", title: "Field Name", width: "110px" },
                    { field: "Type", title: "Type" },
                    { field: "HeaderName", title: "Header Name", width: "300px" }
                ]
            });
        },
        dataBound: function (e) {
            debugger;
            e.sender.expandRow(e.sender.tbody.find("tr.k-master-row").first());
        },
    });

    $(function () {
        kendo.bind($("#PolicyPage"), vmSalaryPolicy);
    });
    return { viewModel: vmSalaryPolicy };
})(jQuery, kendo, _, xxx);

.cshtml содержит: 

     <div class="box-body rm-padding">
            <div data-bind="invisible: IsRecordFound">No Policy Details found.</div>
            <div id="PayRollPolicyFieldGrid"
                 data-role="grid"
                 data-sortable="true"
                 data-pageable="true"
                 data-height="450"
                 data-detail-init="detailInit"
                 data-columns='[{"field": "SalaryPolicyID"}, {"field": "Name"}, {"field": "Description"}, {"field": "CreatedBy"}, {"field": "CreatedOn"}]'
                 data-bind="source: PolicyList, events: { dataBound: dataBound }">
            </div>

        </div>

Я попробовал пример здесь

Но не повезло.

Загружает только сетку с деталями политики.

Json for GetPolicies: 

{
    "ArrayOfSalaryPolicy": {
        "SalaryPolicy": {
            "CreatedBy": "101429",
            "CreatedOn": "2019-01-18T21:01:21.97",
            "Description": "Band A Salary Policy",
            "Name": "Band-A",
            "SalaryPolicyID": "1"
        },
        "_xmlns:i": "http://www.w3.org/2001/XMLSchema-instance",
        "_xmlns": "http://schemas.datacontract.org/2004/07/xxx.Common"
    }
}

JSON для AllPolicyFieldDetailList: 

{
"ArrayOfSalaryPolicyField": {
    "SalaryPolicyField": [
        {

            "HeaderID": "0",
            "HeaderName": "OtherDeduction",
            "ID": "5",
            "IsActive": "false",
            "SalaryFieldID": "0",
            "SalaryFieldName": "LWF",
            "SalaryPolicyDescription": "Band A Salary Policy",
            "SalaryPolicyID": "1",
            "SalaryPolicyName": "Band-A",
            "Type": "Deduction"
        },
        {

            "HeaderID": "0",
            "HeaderName": "StatutoryDeduction",
            "ID": "3",
            "IsActive": "false",
            "SalaryFieldID": "0",
            "SalaryFieldName": "PF",
            "SalaryPolicyDescription": "Band A Salary Policy",
            "SalaryPolicyID": "1",
            "SalaryPolicyName": "Band-A",
            "Type": "Deduction"
        },
        {

            "HeaderID": "0",
            "HeaderName": "StatutoryDeduction",
            "ID": "4",
            "IsActive": "false",
            "SalaryFieldID": "0",
            "SalaryFieldName": "TDS",
            "SalaryPolicyDescription": "Band A Salary Policy",
            "SalaryPolicyID": "1",
            "SalaryPolicyName": "Band-A",
            "Type": "Deduction"
        },
        {

            "HeaderID": "0",
            "HeaderName": "Other Allwances",
            "ID": "2",
            "IsActive": "false",
            "SalaryFieldID": "0",
            "SalaryFieldName": "Conveyance",
            "SalaryPolicyDescription": "Band A Salary Policy",
            "SalaryPolicyID": "1",
            "SalaryPolicyName": "Band-A",
            "Type": "Earning"
        },
        {

            "HeaderID": "0",
            "HeaderName": "Earnings",
            "ID": "1",
            "IsActive": "false",
            "SalaryFieldID": "0",
            "SalaryFieldName": "HRA",
            "SalaryPolicyDescription": "Band A Salary Policy",
            "SalaryPolicyID": "1",
            "SalaryPolicyName": "Band-A",
            "Type": "Earning"
        }
    ],
    "_xmlns:i": "http://www.w3.org/2001/XMLSchema-instance",
    "_xmlns": "http://schemas.datacontract.org/2004/07/xxx.Common"
}}

IПри сравнении примеров, предоставленных с моим кодом во время выполнения, интересным выводом является то, что в примерах он загружает класс «k-master-row» в <tr>, но в моем случае это не так.

Код выполняетсябез каких-либо исключений, и он загружает политики.Но это не показывает сетку иерархии.Я поместил «отладчик» в dataInit, но он никогда не останавливается и не останавливается.

1 Ответ

0 голосов
/ 18 февраля 2019

Единственный способ, которым мне удалось заставить работать сетку основных деталей с использованием MVVM, - это предоставить шаблон для строки подробностей (даже если это просто «пустой» шаблон, которым вы позже манипулируете во время события detailInit).

Также обратите внимание, что во время инициализации виджета MVVM контекст является окном, поэтому при анализе вашего атрибута data-detail-init кендо будет выглядеть не в том месте.Вы должны переместить это в атрибут привязки / событий, поскольку при настройке привязок контекст является наблюдаемым, к которому вы привязываетесь.Я изменил вашу разметку, чтобы продемонстрировать это. 

<script id="grid-detail-placeholder" type="text/x-kendo-template"></script>

 <div class="box-body rm-padding">
        <div data-bind="invisible: IsRecordFound">No Policy Details found.</div>
        <div id="PayRollPolicyFieldGrid"
             data-role="grid"
             data-sortable="true"
             data-pageable="true"
             data-height="450"
             data-detail-template="grid-detail-placeholder"
             data-columns='[{"field": "SalaryPolicyID"}, {"field": "Name"}, {"field": "Description"}, {"field": "CreatedBy"}, {"field": "CreatedOn"}]'
             data-bind="source: PolicyList, events: { detailInit: detailInit, dataBound: dataBound }">
        </div>

    </div>
...