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