In Kendo Grid, how to Bind Dynamic Columns that Contain Space Comma and Special Characters

[Fenil]

Hello Folks,

I have used Parent-Child(Hierarchical) Kendo Grid in one of my project.

Grid contain Columns that are retrieved from database tables. Here retrieved values from the database are dynamic.

Means for 1st parent record there are 3 child columns(Type=A1) and for 2nd parent record there are 4 child(Type=A2) columns and so on.

Here data contain space, comma as well as special characters. Eg

Id | Type |  Value

1 | A1 | Standard Reference

2 | A1 | D"

3 | A1 | Family Number

4 | A2 | Material

5 | A2 | Hardness

6 | A2 | Rs in ($)

7|  A2 | Dim 7

When data binding occurs to the kendo grid then it is not binding to the kendo grid.And if i removed the space, comma & special characters binding works successfully.

Can you help me how to solve this type of problem?

Thank you.

[Tsvetina]

Hi Fenil,

The field​ name of Grid columns should be a valid JavaScript identifier, meaning that it should contain only alphanumeric characters (or "$", or "_") no spaces, and may not start with a digit. This is noted in the documentation here: column.field.

You should adjust the format of the data coming from the server to contain valid field names and use the column.title setting to display the column name in the format that you want the user to see.

Regards,
Tsvetina
Progress Telerik

[Fenil]

Thank you so much @Tsvetina for your valuable answer.

We can use column.title property to display the column name in the format that we want.

Here in this case all the children grid of parent row contain same columns (Column name & Number of columns). But we required each children grid of parent row contain different columns(Column name & Number of columns).

Please find attached screencast.

Can we fulfill this type of scenarios with your suggested answers or not?

If No then please let us know other approach to fulfill this type of scenarios.

Let us know if you have any doubt/questions.

[Tsvetina]

Hi Fenil,

In a regular hierarchy scenario, detail Grids are created in the detailInit event, which is fired for each expanded parent Grid row. So, if in this event, you write some logic to determine what columns you want to show and generate different Grid configurations based on this, your requirement can be fulfilled:

function detailInit(e) {
    var columnsList;
    if(e.data.Country == "USA") { // if parent row Country value is USA, show only OrderID and ShipAddress columns
    columnsList = [
            { field: "OrderID", width: "110px" },
            { field: "ShipAddress", title:"Ship Address" }
        ];
    }
    else {
        columnsList = [
            { field: "OrderID", width: "110px" },
            { field: "ShipCountry", title:"Ship Country", width: "110px" },
            { field: "ShipAddress", title:"Ship Address" },
            { field: "ShipName", title: "Ship Name", width: "300px" }
        ];
    }
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            },
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize: 10,
            filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
        },
        scrollable: false,
        sortable: true,
        pageable: true,
        columns: columnsList
    });
}

If needed, you can also create completely different Grids based on a given condition in the detailInit event.

Regards,
Tsvetina
Progress Telerik