Kendo Grid - Render custom HTML based on the Column cell data value

Question

I am new to kendo grid. I have a column called Status, The possible values for the columns are 1,2,3. If the value is equals to 1 or 2, I wish to display text "Good" in the cell. If the value is 3, I wish to display button "Apply" button in the cell. The User can click the button to trigger a pop up window and do something there.

I used to work with ag-grid, I know I can do this in the cellRenderer:(params)=>{...} to display different text based on the value of this cell. Then, in the onCellClicked:(params)=>{...} to trigger a pop window if the value is 3.

How can I do the same thing in kendo grid?

Sangram Nandkhile Sangram Nandkhile · Accepted Answer · 2018-06-14T01:36:40

If you are using Kendo ASP.NET, add a ClientTemplate for the Column status:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
          columns.Bound("Status").ClientTemplate("#if(Status == 1 || Status == 2 ){# Good #}else{# <input type=button value=apply onclick=CallAnyJSFunction() /> #}#");

        ...

If you are using Kendo UI JS,

<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "Status",
    template: "#if(Status == 1 || Status == 2 ){# Good #}else{# <input type=button value=apply onclick=CallAnyJSFunction() /> #}#"
  }],
  ...
});
</script>

Also, you can wrap the logic in a javascript function and call it from template like this.

function setStatus(status) {
        switch (status) {
            case 1:
                return "Good";
                break;
            case 2:
                return "Good";
                break;
            case 3:
                return "<input type=button value=apply onclick=CallAnyJSFunction() />";
                break;
        }
    }

columns.Bound("Status").ClientTemplate("#= setStatus(Status) #");

or

template: "#= setStatus(Status) #"

Kendo Grid - Render custom HTML based on the Column cell data value

1 Answers