CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-grid
Maka
Maka

Reputation: 53

Kendo Grid Change dynamic columns title on databound

I have a kendo Grid with no columns definition because grid's fields are dynamics and I don't have any chance to know the fields before databound event. Example: 

 var dataSource = new kendo.data.DataSource({
    type: "aspnetmvc-ajax",
    transport: {
        read: {
            url: appPath + "Controller/GetGridData",
            dataType: "json",
            type: "POST",
            data: {
                dataSourceID: dataSourceId
            }
        },
    },
    schema: { data: "data", total: "total"},   
    pageSize: 10,
    serverSorting: true,
    serverPaging: true,
    serverFiltering: true,
});

 $("#grid").kendoGrid({
        dataSource: dataSource,
        filterable: {
            extra: false
        },
        dataBound: function (data) {

        },
        pageable: {
            pageSizes: true,
            pageSizes: [10, 20, 50, 100]
        }
)}

Is there a way to modify columns headers dynamically on databound event or after data are loaded but before showing it to users?

Upvotes: 0

Views: 5551

Answers (2)

Sandman
Sandman

Reputation: 2307

I achieved "dynamic" column headers (after many infuriating troubleshooting messages back and forth by Telerik) by requesting the data prior to initialising the grid via an AJAX call then determining the column names based on the data.

$.ajax({
    type: "POST",
    url: "/Controller/GetGridData",
        // *Important* stringify the server-bound object
        data: JSON.stringify(dataSourceId),
        dataType: "json",
        contentType: "application/json",
        async: true,
        success: function(response) {
            // response contains data required for grid datasource
            ConstructGrid(response);
        }
    });

function ConstructGrid(gridData) {
    var dataSource = new kendo.data.DataSource({
       ... attributes
       data: gridData,
       ... more attributes
    });
    var columnsArray = [];
    if(gridData.attributeToCheck = "someValue") {
       columnsArray.push({field: attributeEqualToSomeValue, title="attributeMatchingSomeValue"});
    }
    else {
        columnsArray.push({field: attributeNotEqualToSomeValue, title="attributeNotMatchingSomeValue"});
    }
    .. continue to add more columns based on data then initialise grid
    $("#grid").kendoGrid({
        dataSource: dataSource,
        filterable: {
            extra: false
        },
        columns: columnsArray,
        pageable: {
            pageSizes: true,
            pageSizes: [10, 20, 50, 100]
        }
    )};
}

Not exactly 100% dynamic but it will change the column names based on the values retrieved from the AJAX call and AFAIK (after chatting back and forth with Telerik), truly dynamic columns are not supported by the grid control.

Upvotes: 1

Punit
Punit

Reputation: 460

Check this Jsbin

`https://output.jsbin.com/lesoxes/`

In this example i have used kendo's datasource.

you will get all column details in console.

Might Help You

Upvotes: 0

Related Questions