This is a migrated thread and some comments may be shown as answers.

How to populate columns via ajax call (jQuery Grid)

3 Answers 740 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nikolay
Top achievements
Rank 2
Nikolay asked on 29 Mar 2019, 08:12 PM

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.

3 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 02 Apr 2019, 12:25 PM
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:


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:



Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nikolay
Top achievements
Rank 2
answered on 02 Apr 2019, 06:38 PM

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.

0
Georgi
Telerik team
answered on 04 Apr 2019, 10:15 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Nikolay
Top achievements
Rank 2
Answers by
Georgi
Telerik team
Nikolay
Top achievements
Rank 2
Share this question
or