Kendo网格扩展行无法正常工作

时间:2016-02-08 16:05:56

标签: javascript jquery ajax kendo-ui kendo-grid

我有一个从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 },

        ]

    });

}
};

原始kendo网格的代码 - &gt;

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();
        },

        });


    }       

任何帮助都将不胜感激。

2 个答案:

答案 0 :(得分: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");;


    }     

希望这个帮助

答案 1 :(得分: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();
    }
}