Question

我正在尝试使用KendoUi Grid小部件完成以下操作：

显示分层网格 - 完成
添加自定义工具栏按钮，用于将详细信息项添加到特定行 - 已完成
按下自定义按钮时，展开详细信息网格并添加项目。

这一切都可以直接添加项目（即单击“添加项目”按钮可展开详细信息网格）。但是，如果我尝试在detailExpand函数中添加项目，则详细信息网格会自动折叠。我尝试了各种改变扩展\添加顺序的变化，但似乎没有任何工作正常。

<body>
    <div id="example" class="k-content">
        <div id="grid"></div>
    </div>
</body>

$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: {
            data: [
                {Name: "first", Items: []},
                {Name: "second", Items: []}
            ],
            schema: {
                model: {
                    fields: {
                        Name: { type: "string" }
                    }
                }
            },
            pageSize: 20
        },
        height: 430,
        scrollable: true,
        sortable: true,
        filterable: true,
        pageable: {
            input: true,
            numeric: false
        },
        detailInit: detailInit,
        detailExpand: detailExpand,
        columns: [

            { field: "Name", title: "Name", width: "130px" },
            { command: [
                {name: "edit"}, 
                {name: "destroy"},
                { text: "Add item", click: addItem }], 
             title: "&nbsp;", width: "172px" }
        ],
        editable: "inline",
        toolbar: ["create"]
    });
});
var addItemNow = false;
function addItem(e) {
    var row = $(e.currentTarget).closest("tr");

    addItemNow = true;  
    var grid = $("#grid").data("kendoGrid");
    grid.expandRow(row);
};

function detailInit(e) {
    $("<div id='detailGrid'/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            data: e.data.Items,
            schema: {
                model: {
                    fields: {
                        Description: { type: "string" }
                    }
                }
            }
        },
        columns: [
            { field: "Description", title: "Description", width: "70px" },
            { command: [
                {name: "edit"}, 
                {name: "destroy"}
            ]}                               
        ]});
}

function detailExpand(e) {
    var grid = e.detailRow.find("#detailGrid").data("kendoGrid");
    if(addItemNow)
    {
        addItemNow = false;
        grid.dataSource.add({Description: ""});


    }
}

这是一个显示此jfiddle

Answer 1

请查看此JSBin以了解如何添加嵌套网格子行。 “添加新行”按钮保留在子网格上，而不是主行上。

只要我知道您是在主行上进行更改或进行任何操作，所有细节都将自动折叠。

Answer 2

这可能会有所帮助

//you can expand it programatically using the expandRow like this
element.on('click','tr',function(){
    $(element).data().kendoGrid.expandRow($(this));
})

实例： http://jsfiddle.net/WKSkC/3/

在kendo ui网格中添加细节项目

2 个答案: