CODEWITHSUNDEEP
javascriptjquerykendo-uiparent-childkendo-grid
linepisode
linepisode

Reputation: 65

Child items in kendo grid

How can i bind my child data in one column? I want to write "Technology,Economy,Life" in same column and same row. But i think i need to loop in "Category". How can i do this, any idea?

My Data:

{
    "ParentId": "00000000-0000-0000-0000-000000000000",
    "Title": null,
    "UserGroupModel": null,
    "EntityAccessData": [
        {
            "EntityTitle": "User",
            "Access": {
                "Id": "59d0c6f7-8f93-497a-854d-bdd4a42ade94",
                "Title": "Can Delete"
            },
            "Category": [
                {
                    "Id": "00000000-0000-0000-0000-000000000000",
                    "Title": "Technology"
                },
                {
                    "Id": "00000000-0000-0000-0000-000000000000",
                    "Title": "Economy"
                },
                {
                    "Id": "00000000-0000-0000-0000-000000000000",
                    "Title": "Life"
                }
            ],
            "HasAccess": true
        },
        {
            "EntityTitle": "UserGroup",
            "Access": {
                "Id": "7c65be44-11b0-4cf4-9104-0ad999e7e280",
                "Title": "Can Edit"
            },
            "Category": [
                {
                    "Id": "00000000-0000-0000-0000-000000000000",
                    "Title": "Technology"
                },
                {
                    "Id": "00000000-0000-0000-0000-000000000000",
                    "Title": "Economy"
                },
                {
                    "Id": "00000000-0000-0000-0000-000000000000",
                    "Title": "Life"
                }
            ],
            "HasAccess": true
        }
    ]
}

My Script:

 $("#grid").kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read: "/getData" },

            schema: {
                data: "EntityAccessData"

            },

                group: [{
                field: "EntityTitle"
            }],

        },
        columns: [
        {
            field: "Access.Id",
            title: "ID"
        },
        {
            field: "Access.Title",
            title: "Access title"
        },
        {
            field: "HasAccess",
            title: "has access"
        },
        {
            field: "Category.Title", // ***wrong***
            title: "Category"
        },
        ]

    });

Upvotes: 0

Views: 1128

Answers (1)

OnaBai
OnaBai

Reputation: 40887

Define the schema as follow:

schema: {
    data : "EntityAccessData",
    model: {
        CategoryTitle: function () {
            var category = [];
            $.each(this.Category, function(idx, elem) {
                category.push(elem.Title);
            });
            return category.join(",");
        }
    }

},

Where I add an additional field CategoryTitle that is the result of joining the Title of the Category array and then define the column as:

{
    field: "CategoryTitle()",
    title: "Category"
}

Upvotes: 1

Related Questions