Edit this page

Use MobileSwitch as Editor in Grid for MVC

Environment

Product Progress Kendo UI Grid for ASP.NET MVC
Progress Kendo UI versoin 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();
        }    
    
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy