剑道网格扩展行无法正常工作

Question

我有一个从 SQL 数据库填充的剑道网格。剑道扩展工作正常，并在程序首次启动时在扩展中返回不同的剑道网格，但如果我进行新搜索并返回不同的结果，则扩展行不起作用。

我的展开代码 ->

function detailInitd(e) {   

TextvalueFile  = "manno test";   

$.ajax({
    type: "post",
    data: JSON.stringify({
        search_string: TextvalueFile,
    }),
    url: "/Search.aspx/File_Search",
    dataType: "json",
    contentType: 'application/json',

    success: function (object) {
        response(object);
    },
    complete: function (object) {

    },
    error: function (object) {
    }
});
function response(object) {
    var grid = this;

    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            data: object.d,
            schema: {
                model: {

                    path: { type: "string" },
                    st_size: { type: "number" },

                },
            },
            pageSize: 20,
        },
        reorderable: true,
        resizable: true,
        navigatable: true,
        selectable: "multiple",
        scrollable: true,
        sortable: true,
        filterable: true,
        columnMenu: true,
        pageable: {
            input: true,
            numeric: true
        },

        columns: [

           { field: "path", title: "Path", width: 200 },
                { field: "st_size", title: "Size", width: 60 },
                 { field: "st_blks", title: "BLKS", width: 60 },
                  { field: "st_acctime", title: "acc Time", width: 70 },
                   { field: "st_modtime", title: "mod Time", width: 75 },

        ]

    });

}
};

我的原始剑道网格代码 ->

function DisplaySearch() {




}
textS.value = value;
    valsearch = textS;
    $.ajax({
        type: "post",
        data: JSON.stringify({
            search_string: valsearch,
        }),
        url: "/Search.aspx/display_search",
        dataType: "json",
        contentType: 'application/json',

        success: function (object) {
            response(object);
        },
        complete: function (object) {

        },
        error: function (object) {
        }
    });
    function response(object) {
        $("#searchGrid").kendoGrid({
            theme:"Default",
            dataSource: {
                data: object.d,
                schema: {
                    model: {
                        archive_header_key: { type: "number" },
                        group_Name: { type: "string" },
                        Server: { type: "string" },
                        archive: { type: "string" },
                        display_name: { type: "string" },
                        file_written: { type: "number" },
                        session_ID: { type: "string" },
                        create_browse: {type:"number"},
                    },
                },
                pageSize: 20,                   

            },
            detailInit: detailInit,
            dataBound: function () {
                this.expandRow(this.tbody.find("tr"));
            },
            reorderable: true,
            navigatable: true,
            selectable: "single",              
            scrollable: true,
            sortable: true,
            filterable: false,
            columnMenu: true,
            reordable: true,
            resizable: true,


            pageable: {
                input: true,
                numeric: true,


            },
        columns: [
            { field: "archive_header_key", title: "Key", width: 50 },
            { field: "Server", title: "Server", width: 75 },
            { field: "group_Name", title: "Group", width: 75 },
            { field: "archive", title: "Archive", width: 50 },
             { field: "display_name", title: "Display name", width: 300 },
            { field: "file_written", title: "Files", width: 50 },
             { field: "session_ID", title: "Session", width: 200 },
             {field: "create_browse", title:"Browse", Width: 50},
        ],
        change: function(){

            var grid = this;

            grid.select().each(function(){
                var dataItem = grid.dataItem($(this));
                testdata = dataItem.archive_header_key;
                grid.expandRow(grid.element.closest("tr"));              
            })
        },
        dataBound: function () {
            this.expandRow();
        },

        });


    }       

任何帮助将不胜感激。

Answer 1

有一些示例代码可以检查 kendoGrid 是否已经初始化： https://www.telerik.com/forums/grid-creation-best-practices

它对我有用并修复了 expandRow 问题。

function searchButtonClick() {
    var gridElement = $("#grid"),
        grid = gridElement.data("kendoGrid");
    if (!grid) {
        gridElement.kendoGrid({
            ...
        });
    } else {
        grid.dataSource.read();
    }
}

Answer 2

我认为这是重复的实例。当您搜索并调用您的 response() 时，您可能总是实例化 kendoGrid，您必须执行以下操作：

从response() 中声明一个变量，例如：

var $searchGrid = null;

并更改您的response()：

function response(object) {

     if($searchGrid){
        $searchGrid .destroy();
        $("#searchGrid").empty();
        $("#searchGrid").remove(); 
       }

        $("#searchGrid").kendoGrid({
            theme:"Default",
            dataSource: {
                data: object.d,
                schema: {
                    model: {
                        archive_header_key: { type: "number" },
                        group_Name: { type: "string" },
                        Server: { type: "string" },
                        archive: { type: "string" },
                        display_name: { type: "string" },
                        file_written: { type: "number" },
                        session_ID: { type: "string" },
                        create_browse: {type:"number"},
                    },
                },
                pageSize: 20,                   

            },
            detailInit: detailInit,
            dataBound: function () {
                this.expandRow(this.tbody.find("tr"));
            },
            reorderable: true,
            navigatable: true,
            selectable: "single",              
            scrollable: true,
            sortable: true,
            filterable: false,
            columnMenu: true,
            reordable: true,
            resizable: true,


            pageable: {
                input: true,
                numeric: true,


            },
        columns: [
            { field: "archive_header_key", title: "Key", width: 50 },
            { field: "Server", title: "Server", width: 75 },
            { field: "group_Name", title: "Group", width: 75 },
            { field: "archive", title: "Archive", width: 50 },
             { field: "display_name", title: "Display name", width: 300 },
            { field: "file_written", title: "Files", width: 50 },
             { field: "session_ID", title: "Session", width: 200 },
             {field: "create_browse", title:"Browse", Width: 50},
        ],
        change: function(){

            var grid = this;

            grid.select().each(function(){
                var dataItem = grid.dataItem($(this));
                testdata = dataItem.archive_header_key;
                grid.expandRow(grid.element.closest("tr"));              
            })
        },
        dataBound: function () {
            this.expandRow();
        },

        }).data("kendoGrid");;


    }     

希望有帮助