劍道網格擴展行無法正常工作

Question

我有一個從SQL數據庫填充的Kendo網格。 程序首次啟動時，kendo擴展程序可以正常工作，並在擴展程序中返回另一個kendo網格，但是如果我進行新的搜索並返回不同的結果，則擴展行將無法正常工作。

我的擴展代碼->

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

我認為這是重復的實例。 當您進行搜索並調用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");;


    }     

希望這個幫助

Answer 2

有一些示例代碼可以檢查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(); } }