Kendo Hierarchy Grid

Introduction

 

Hierarchy Grid is nothing but a grid inside a grid. Like a Parent grid and child grid based on fields in them where we can filter explicitly. This article demonstrates how to bind the Hierarchy Grid dynamically using Kendo.

 

Kendo Installation

 

Kendo is the licensed one. Please look at this link for the installation.

 

jQuery Kendo Grid

 

Kendo Grid which allows us to view data in table structure. It has various features regarding the grid where we can implement easily by supplying the properties wherever you need. 

<div id="exampleGrid"></div>
<script>
    $(document).ready(function () {
        var columns = [{
            field: "studentid",
            title: "Student Id",
            fieldtype: "Number"
        },{
            field: "studentname",
            title: "Student Name",
            fieldtype: "String"
        }];
        var data = [
            {studentid: 1, studentname: 'Paulraj' },
            {studentid: 2, studentname: 'Arivumani' },
            {studentid: 3, studentname: 'Viswanathan' },
            {studentid: 4, studentname: 'Bharath' },
            {studentid: 5, studentname: 'Harish' }
        ];
        var schemaModel = fnGenerateSchemaModel(columns);
        $("#exampleGrid").kendoGrid({
            selectable: "cell",
            columns: columns,
            scrollable: true,
            dataSource: {
                data: data,
                schema:{
                    model : schemaModel
                }
            },
            noRecords: true,
        })

    });

    function fnGenerateSchemaModel(columns) {
        var model = {};
        var fields = {};
        $(columns).each(function () {
            var propType = this['fieldtype'].toLowerCase()
            fields[this['field']] = {
                type: propType
            }
        })
        model.fields = fields;
        return model;
    }

</script>

Here, I have created a parent grid which has Student Id and Student Name. I am generating the schema model based on my property (fieldType) from the column object. But still, we can generate schema by grid data also.

 

 

Now the parent grid is ready. We will see how to bind the hierarchy grid dynamically.

 

Step 1

 

Add a text kendo template below the example grid div in HTML, like shown below.

<div id="exampleGrid"></div>
<script type="text/x-kendo-template" id="hierarchyGridTemplate">
    <div class="hierarchy-grid"></div>
</script>

Step 2

 

Create the child grid similar to parent grid using the hierarchyGridTemplate.

function detailInit(e) {
    var detailRow = e.detailRow;
    var columns = [{
        field: "studentid",
        title: "Student Id",
        fieldtype: "Number"
    },{
        field: "tamil",
        title: "Tamil",
        fieldtype: "Number"
    },{
        field: "english",
        title: "English",
        fieldtype: "Number"
    },{
        field: "maths",
        title: "MAths",
        fieldtype: "Number"
    },{
        field: "history",
        title: "History",
        fieldtype: "Number"
    }];

    var data = [
        {
            "studentid": 1,
            "tamil": 40,
            "english": 50,
            "maths": 65,
            "science": 56,
            "hstory": 78
        },
        {
            "studentid": 2,
            "tamil": 45,
            "english": 65,
            "maths": 67,
            "science": 78,
            "hstory": 64
        },
        {
            "studentid": 3,
            "tamil": 23,
            "english": 45,
            "maths": 78,
            "science": 99,
            "hstory": 66
        },
        {
            "studentid": 4,
            "tamil": 67,
            "english": 89,
            "maths": 53,
            "science": 97,
            "hstory": 90
        },
        {
            "studentid": 5,
            "tamil": 43,
            "english": 56,
            "maths": 78,
            "science": 97,
            "hstory": 34
        }
    ];
    var schemaModel = fnGenerateSchemaModel(columns);
    detailRow.find(".hierarchy-grid").kendoGrid({
        selectable: "cell",
        dataSource: {
            scrollable: true,
            data: data,
            schema:{
                model : schemaModel
            },
            filter: { field: 'studentid' , operator: "eq", value: e.data['studentid'] }
        },
        columns: columns,
        noRecords: true
    });
}

Now we have created the child grid. The highlighted part is the noticeable code here. The other is similar to creating a grid.

 

 

filter: { field: 'studentid' , operator: "eq", value: e.data['studentid'] }

 

Field is the child field name and value is the parent field data. So this is mapping to filter the hierarchy grid records.

 

In this filter, we can map whatever fields we need to filter in the child grid with the parent grid field.

 

Step 3

 

Now include the detailInit method to the parent grid dynamically by any button click or based on any condition.

if(mycondition == true){
    var grid = $("#exampleGrid").data("kendoGrid");
    grid.setOptions({
        detailTemplate: kendo.template($("#hierarchyGridTemplate").html()),
        detailInit: detailInit
    });
}

Output

 

Student Id and Student Name is the parent grid.

 

We mapped the Student Id in both grids to display the mark list of each student. Based on the data source of both grids, the result will be generated.

 

 

Summary

 

In this article, we have seen how to create a dynamic hierarchy grid in kendo.