javascript - Kendo Grid Custom Column - Stack Overflow

admin管理员组

文章数量:1304544

I have the following code:

          $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                data: scannedResult.targetList,
                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"
            }, {
                field: "ment",
                title: "ment"
            }]
        });

creating a kendo simple grid. for detail here is my plunker.

now the field status can be 1 of 3 values: passed, failed, skipped. I would like that the statuscolumn will show an icon instead of the value. While the code for that is rather simple, i do not know how to make the column a custom column.

Is there a way to make a column a custom column?

I have the following code:

          $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                data: scannedResult.targetList,
                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"
            }, {
                field: "ment",
                title: "ment"
            }]
        });

creating a kendo simple grid. for detail here is my plunker.

now the field status can be 1 of 3 values: passed, failed, skipped. I would like that the statuscolumn will show an icon instead of the value. While the code for that is rather simple, i do not know how to make the column a custom column.

Is there a way to make a column a custom column?

• javascript
• kendo-ui
• telerik
• kendo-grid

Share Improve this question Follow edited Sep 15, 2015 at 22:07 OnaBai 40.9k66 gold badges9797 silver badges125125 bronze badges asked Aug 27, 2014 at 14:41 No Idea For NameNo Idea For Name 11.6k1010 gold badges4747 silver badges7373 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You should use a template definition. Something like:

• Define the template.

<script id="status-template" type="text/kendo-templ">
     # if (data.status === 1) { #
         <span>Status1</span>
     # } else if (data.status === 2) { #
         <span>Status 2</span>
     # } else { #
         <span>Status 3</span>
     # } #
 </script>

• Reference the template from the column definition

        columns: [{
            field: "proccess",
            title: "Contact Name",
            width: 200
        }, {
            field: "status",
            title: "status",
            template: $("#status-template").html()
        }, {
            field: "ment",
            title: "ment"
        }]

See it running here: http://jsfiddle/OnaBai/5x8wt0f7/

Obviously, the template can emit any HTML code, it might be links, images...

This has already been answered, but I want to show how I'd write this if people are confused when linking to jQuery selector.

// Custom Template that takes in entire Row object
function statusTemplate(dataRow) {
  return `<span class="label label-${dataRow.status.toLowerCase()}">${dataRow.status}</span>`;
}

// Column definitions for grid
columns: [{
  field: "proccess",
  title: "Contact Name",
  width: 200
}, {
  field: "status",
  title: "status",
  template: statusTemplate
}, {
  field: "ment",
  title: "ment"
}]

http://jsfiddle/dentedio/hdokxme9/1/

本文标签： javascriptKendo Grid Custom ColumnStack Overflow