Changing Switch Messages Inside a Grid

Environment

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

Description

Is there a way to change the Switch message OK button and Cancel button while it is bound to a Telerik UI for ASP.NET MVC 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.

Razor

    @(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"))
        ...
    )

JavaScript

    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"
                }
            });
        });
    }

More ASP.NET MVC Grid Resources

• ASP.NET MVC Grid Documentation

• ASP.NET MVC Grid Demos

• ASP.NET MVC Grid Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC
• Server-Side API Reference of the Grid for ASP.NET MVC
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base