CODEWITHSUNDEEP
kendo-uikendo-grid
pethaamsetty pavan venkat kuma
pethaamsetty pavan venkat kuma

Reputation: 31

Applying style based on Condition in Kendo Grid

Can i use if condition to display commands in the column

datasource :

[
    {
        "ProductID":1,
        "ProductName":"Chai",
        "UnitPrice":18,
        "UnitsInStock":39,
        "Discontinued":false
    },{
        "ProductID":2,
        "ProductName":"Chang",
        "UnitPrice":19,
        "UnitsInStock":17,
        "Discontinued":false
    }
]

i want to add condition in the columns declaration 

$("#my_workspaces_grid").kendoGrid({
    dataSource: dataSource,
        pageable: true,
        height: 550,
        toolbar: ["create"],
        columns: [
        {
            field: "ProductName", 
            title: "Project"
        },
        { 
            field: "UnitsInStock", 
            title: "WorkspacePath", 
            width: 400
        },
        {
            command: ["edit", "destroy"],
            title: " ", width: 180
        }
});

help me out Thanks in advance

Upvotes: 0

Views: 134

Answers (1)

Sangram Nandkhile
Sangram Nandkhile

Reputation: 18182

You can use template. Check the following demo.

$("#grid").kendoGrid({
    dataSource: {
        data:[
                {
                 "ProductID":1,
                 "ProductName":"Chai",
                  "UnitPrice":18,
                  "UnitsInStock":39,
                  "Discontinued":true
                },{
                "ProductID":2,
                "ProductName":"Chang",
                "UnitPrice":19,
                "UnitsInStock":17,
                "Discontinued":false
               }
              ]
    },
     pageable: true,
        height: 550,
        toolbar: ["create"],
        columns: [
            { field: "ProductID", title: "Id"  },
            { field: "ProductName", title: "Name"  },
            { field: "UnitsInStock", title: "WorkspacePath", width: 400},
            { field: "Discontinued", title:"DSP",
              template: "# if (Discontinued) {# <button onClick=function1()>Edit</button> # } else {  # <button onClick=function2()>Destroy</button> # } #"
           }]
 });
<head>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>
   </body>

Upvotes: 1

Related Questions