是否可以有多个 kendo 网格实例

Question

你好，我有一个 Kendo 网格，它工作正常，但我想知道是否可以通过单击按钮添加另一个精确的网格，这样我就可以拥有同一网格的多个实例？

我正在从 sql 数据库中获取所有数据。

我的网格代码是 ->

function DisplaySearch() {
    var textS = $('#searchBox').val();
    Textvalue = textS; 
    $.ajax({
        type: "post",
        data: JSON.stringify({
            search_string: Textvalue,
        }),
        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({
            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" },
                    },
                },
                pageSize: 20,                   
            },
            reorderable: true,
            navigatable: true,
            selectable: "multiple",              
            scrollable: true,
            sortable: true,
            filterable: false,
            columnMenu: 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 },
            ]       
        });          
    }       
};

如有任何帮助，我们将不胜感激。

Answer 1

当然可以！您只需要确保网格的 id 是唯一的。此代码将向给定容器添加 div 并创建一个网格 - 使用任何按钮单击一个新网格。希望它有效，我还没有测试过。

var gridNr = 1;
$("#btn").click(function(e){
  $("#gridContainer").append("<div id='grid_'" + gridNr + " />");
  $("#grid_" + gridNr).kendoGrid({ ... your grid code here ... });
  gridNr++;
})

是否可以有多个 kendo 网格实例

Is it possible to have multiple instances of kendo grid

.net

javascript

jquery

kendo-ui

kendo-grid