Use MobileSwitch as Editor in Grid for MVC

Environment

Product	Progress® Telerik® UI Grid for ASP.NET MVC
Product Version	2017.2 504
Preferred Language	C Sharp
MVC Version	MVC 5
View Engine	Razor

Description

Howe can I display a MobileSwitch when the Grid is in an edit mode?

Suggested Workarounds

The Kendo UI Grid does not provide a built-in solution for achieving this behavior. However, you can still work around this issue.

By default, the MobileView does not support the usage of a MobileSwitch but you can use it as an editor within the Grid by applying the following approach:

1. Create a new partial view for the MobileSwitch editor in the Views/Shared/EditorTemplates folder. For the example, name it MobileSwitchTemplate.cshtml.

   @model bool
   
   <input type="checkbox" data-bind="value: @Html.ViewData["FieldName"].ToString()" class="mySwitch"/>
   

2. Specify the template and pass the field name in ViewData for the column you want to use that editor. Copy the following code:

   columns.Bound(p => p.Discontinued).Width(120).EditorTemplateName("MobileSwitchTemplate").EditorViewData(new { FieldName = "Discontinued" });
   

3. Initialize the MobileSwitch within the edit event of the Grid.

   .Events(ev=>ev.Edit("onEdit"))
   
   ...
   <script type="text/javascript">
       function onEdit(e) {
           $(".mySwitch").kendoMobileSwitch();
       }