具有动态列的kendoui网格

Question

我正在尝试使用动态列生成网格

为了实现这一目标，我制作了一些asp.net服务来生成：列，模型和数据（json格式）。 这些方法由ajax调用（不是以异步方式立即获取数据）

网格似乎未显示列（由“ Search.Grid.GenerateColumns”动态提供），但根据数据/模型显示了列。这种行为的进一步证明是，如果我添加format =“ {0：MM / dd / yyyy}“到日期列（在列集合中），未格式化网格中的日期

Search.Grid.Init = function ()
{
    var _rootUrl = "http://.................."

    //====================build the datasource==================
    var mainGridDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                type: "POST",
                url: _rootUrl + 'Repository.aspx/GetArchiveData',   
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            },
            parameterMap: function (data, operation) {
                if (operation === "read" ) {
                    return JSON.stringify({ archivio: Search.SelectedArchive.Value });
                }
                return data;
            }
        },
        schema: {
            data: "d.data",
            total: "d.total",
            model: Search.Grid.GenerateModel(Search.SelectedArchive.Value)  //sync call
        }
    });


    //====================configure the grid==================
    $("#mainGrid").kendoGrid({
        dataSource: mainGridDataSource,
        columns: Search.Grid.GenerateColumns(Search.SelectedArchive.Value),  //sync call
        autoGenerateColumns: false,
        filterable: {  
            mode: "row"
        }
    });

} 


//build the columns collection  server side
Search.Grid.GenerateColumns = function (archivio) {

    $.ajax({
        type: 'POST',
        url: _rootUrl + 'Repository.aspx/GetArchiveColumns',
        data: JSON.stringify({ archivio: archivio }),
        success: function(data) {
            return data.d;
        },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false
    });
}
//output (the grid columns)
{"d":[{"field":"Id","title":"Id","type":"number"},{"field":"NumeroDocumento","title":"NumeroDocumento","type":"string"},{"field":"DataDocumento","title":"DataDocumento","type":"date"},{"field":"NumeroDocumentoUsoInterno","title":"NumeroDocumentoUsoInterno","type":"string"},{"field":"NumeroOrdine","title":"NumeroOrdine","type":"string"}]}

//build the model collection server side
Search.Grid.GenerateModel = function (archivio) {

    $.ajax({
        type: 'POST',
        url: _rootUrl + 'Repository.aspx/GetArchiveModel',
        data: JSON.stringify({ archivio: archivio }),
        success: function (data) {
            return data.d;
        },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false
    });
}
//output (the datasource model)
{"d":{"id":"Id","fields":{"Id":{"type":"number"},"NumeroDocumento":{"type":"string"},"DataDocumento":{"type":"date"},"NumeroDocumentoUsoInterno":{"type":"string"},"NumeroOrdine":{"type":"string"}}}}

Answer 1

我认为您需要拨打电话以获取元数据，并且在成功接收网格之前不要尝试创建网格-遵循以下原则：

// make the ajax call for metadata - don't create 
// the grid until this call is successful
$.ajax({
    url: "http...",
    // other configurations
    success: function (e) {
        // create the grid        
        createGrid(e);                        
    },
    error: function (e) {
        console.log(e);        
    }
});

createGrid(metaData){

    // create the grid using the metadata

}