CODEWITHSUNDEEP
kendo-grid
Junglefish
Junglefish

Reputation: 273

Kendo grid, change text on edit button

I have a kendo grid that looks a bit like this (code edited for clarity):

    var gridList = $('##listBo').kendoGrid({

        ...

        columns: [
            ...
            {
                command: "edit"
                , title: 'Edit' // Need to make this text conditional
                , width: 91
            }
        ]

        ...

        , editable: {
                mode: "popup"
                , template: $("##addEditPopup").html()
                , window: {
                open: loadJSOnWindowLaunch 
                , title: "Reservation request"
            }
            }
        , dataBound: function(e) {
            dataBoundFunction();
        }

    }).data("kendoGrid");

I need to make the button say 'Edit' in some circumstances and 'View' in others, based on values in the datasource.

How do I best do this?

Upvotes: 3

Views: 3323

Answers (2)

Punit
Punit

Reputation: 460

You just need to add custom column in columns like this

{ 
   template: "# if (property == true) { # <a class="k-button k-grid-edit" 
   href="#"><span class="k-icon k-edit"></span>Edit</a> # } else { #
   <a class="k-button"><span onClick="callFunction()"
   </span>View</a> # } #", width: "150px"
}
  • where "property" is a field which will be use as condition field to display different buttons.

Hope, This will work for you. (ThumbsUp)

Upvotes: 0

R.K.Saini
R.K.Saini

Reputation: 2708

One simple approach to deal with this situation is to make a custom command column and then using template option you can render the column button according to your condition.

Try like this :

$("#grid").kendoGrid({
                    dataSource: dataSource,
                    pageable: true,
                    height: 550,
                    toolbar: ["create"],
                    columns: [
                        { field:"ProductName", title: "Product Name" },
                        { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
                        { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
                        { field: "Discontinued", width: "120px" },
                        { template: comandTemplate }],
                    editable: "popup"
                });
            });
            // render command column button based on condition
            function comandTemplate(model){
                // here i use Discontinued attribute to data model to show
                // view detail button or edit button
                if(model.Discontinued==0)
                {
                    return '<a class="k-button k-button-icontext k-grid-edit" href="#"><span class="k-icon k-edit"></span>Edit</a>';
                }
                else
                {
                    return '<a class="k-button k-button-icontext" href="javascript:void(0)" onclick="viewDetailsAction()">View Details</a>';
                }
            }
            // Custom action if view detail button click
            function viewDetailsAction()
            {
                alert("Your custom action for view detail");
            }

Here is a working sample http://dojo.telerik.com/AdAKO

I hope it will help you.

Upvotes: 3

Related Questions