This is a migrated thread and some comments may be shown as answers.

[Solved] grouping the kendo grid with rowTemplate

2 Answers 214 Views

Grid

This is a migrated thread and some comments may be shown as answers.

2 Answers, 1 is accepted

answered on 15 Apr 2015, 06:45 PM

HTML:

<div id="grid"></div>
<script id="status-template" type="text/kendo-templ">
     # if (data.status === 1) { #
         <span style="color: red;">Status 1</span>
     # } else if (data.status === 2) { #
         <span style="color: yellow;">Status 2</span>
     # } else { #
         <span style="color: green;">Status 3</span>
     # } #
</script>

<script id="status2-template" type="text/kendo-templ">
     #: ob.comment #
</script>

JavaScript:

$("#grid").kendoGrid({
    dataSource: {
        data: [
            { proccess: "p1", status: 1, ob:{comment: "c1"} },
            { proccess: "p2", status: 2, ob:{comment: "c1"} },
            { proccess: "p3", status: 3, ob:{comment: "c1"} }
        ],
        pageSize: 20
    },
    height: 550,
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [{
        field: "proccess",
        title: "Contact Name",
        width: 200
    }, {
        field: "status",
        title: "status",
        template: $("#status-template").html()
    }, {
        field: "comment",
        title: "comment",
        template: $("#status2-template").html()
    }]
});

CSS:

#grid {
width : 490px;
}