具有动态列的kendoui网格

时间:2016-10-18 13:42:46

标签: javascript kendo-ui kendo-grid dynamic-columns

我正在尝试使用动态列格式化网格

为了实现这一点,我已经制作了一些生成的asp.net服务:列,模型和数据(以json格式)。 这些方法由ajax调用(不是以异步方式,以立即获取数据)

网格似乎没有显示列(从“Search.Grid.GenerateColumns”动态提供),但根据数据/模型显示列 这种行为的进一步证明是,如果我将一个格式=“{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"}}}}

1 个答案:

答案 0 :(得分:0)

我认为你需要打电话来获取元数据,而不是在你成功收到网格之前尝试创建网格 - 这些内容如下:

// 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

}