Change Kendo UI Switch Messages Inside a Grid

Environment

Product Version 2019.3.1023
Product Progress® Telerik® UI for ASP.NET MVC

Description

Is there is a way to change the Kendo UI Switch message Ok button and Cancel button while it is bound to a Kendo UI Grid row?

Solution

The Kendo UI Switch can be set as a ClientTemplate inside a Kendo UI Grid. The switch's messages can be configured within the razor or changed during the DataBound event using the setOptions method.

    @(Html.Kendo().Grid<SwitchInGridMessageChange.Models.OrderViewModel>()
        .Name("ProjectGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.OrderID).Filterable(false);
            columns.Template(@<text></text>).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
                Html.Kendo().Switch()
                    .Name("switch_#=OrderID#")
                    .HtmlAttributes(new { @class = "ProjectStatusStartedClass" })
                    .Enabled(true)
                    .Width(140)
                    //.Messages(e => e.Checked("Approve").Unchecked("Reject"))  //Approach 1: Can include here in switch
                    .ToClientTemplate().ToHtmlString()
                );
        })
        .Events(e => e.DataBound("onDataBound"))
        ...
    )
    function onDataBound(e) {

        //scripts must be evaluated manually 
        $(".templateCell").each(function(){
            eval($(this).children("script").last().html());  
        });

        //Approach 2: setOptions()    

        //reference all switch elements
        var switchElements = this.tbody.find("input.ProjectStatusStartedClass");  

        //for each element, set the messages
        $(switchElements).each(function (e, switchElement) {  
            var myswitch = $(switchElement).data("kendoSwitch");
            myswitch.setOptions({
                messages: {
                    checked: "approve",
                    unchecked: "reject"
                }
            });
        });
    }

See Also

In this article
Not finding the help you need? Improve this article