How to populate columns via ajax call (jQuery Grid)

[Nikolay]

Hi there

In this example:

$("#employeeGridDiv").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: {
                    type: 'GET',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    url: '@Url.Action("LoadEmployeeGrid", "EmployeePanel")'
                }
            },
            pageSize: 20
        },
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
       
        columns: {
                    type: 'GET',
                    contentType: "text/html",
                    url: '@Url.Action("LoadEmployeeGridColumns", "EmployeePanel")'
        }
    });

I'm trying to populate the columns from the controller method LoadEmployeeGridColumns which returns the JSON representation of the following:

 public class GridCellClass
    {
        public string field { get; set; }
        public string title { get; set; }
        public string template { get; set; }
        public int width { get; set; }
        public bool visible { get; set; }
        public string format { get; set; }
        public string attributes { get; set; }

}

It does not work. How exactly should the "columns" portion be implemented?

Thanks.

[Georgi]

Hi Nikolay,

The columns setting of the Kendo Grid accepts an array of objects, each object represents the configuration of a column. For better understanding, please refer to the documentation:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns

In case the requirement is to dynamically create the columns configuration based on the response from the server, I would recommend you to take a look at the following article which explains how to achieve that:

• https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/binding/create-with-dynamic-columns-and-data-types

Regards,
Georgi
Progress Telerik

[Nikolay]

Hey Georgi

This example

https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/binding/create-with-dynamic-columns-and-data-types

is not working for me. The part

$("#grid").kendoGrid

is defined nicely when I start debugging:

<script>
    debugger;
    var isDateField = []; ... //<-- $("#grid").kendoGrid has meaningful value here

but it is undefined in the scope of

$.ajax({
        url: "https://www.mocky.io/v2/5835e736110000020e0c003c",
        dataType: "jsonp",
        success: function (response) {
            debugger; //<-- on this step $("#grid").kendoGrid is undefined :-(
            var model = generateModel(response);
            var columns = generateColumns(response);

...

Why it is so?

Thanks.

[Georgi]

Hi Nikolay,

Please note that in the provided sample the isDateField variable is in the global scope.

Could you please make sure that the isDateField is either in the global scope or in the scope of the ajax request declaration?


Regards,
Georgi
Progress Telerik