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

4 posts, 0 answers
  1. Fenil
    Fenil avatar
    3 posts
    Member since:
    Jun 2018

    Posted 07 Jun Link to this post

    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.

  2. Tsvetina
    Admin
    Tsvetina avatar
    2238 posts

    Posted 11 Jun Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Fenil
    Fenil avatar
    3 posts
    Member since:
    Jun 2018

    Posted 12 Jun in reply to Tsvetina Link to this post

    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.

  4. Tsvetina
    Admin
    Tsvetina avatar
    2238 posts

    Posted 14 Jun Link to this post

    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: {
                },
                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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top