Set Kendo Switch 'Checked' Property

3 posts, 0 answers
  1. Mark
    Mark avatar
    12 posts
    Member since:
    Jun 2018

    Posted 01 Jul Link to this post

    I have a Switch widget and an associated boolean property in my View Model:

    @(Html.Kendo().Switch()
     .Name("IsImmediateEvent")
     .Messages(c => c.Checked("true").Unchecked("false"))
     .Events(e => e.Change("onImmediateChange")))

     

    View Model Property:

    public bool IsImmediateEvent { get; set; }

     

    When my boolean View Model property (IsImmediateEvent) is set to true, the Switch widget is not checked.

    How can I get the Switch widget to recognize its backing property and set the Switch widget to "on" when my boolean property is "true?"

  2. Mark
    Mark avatar
    12 posts
    Member since:
    Jun 2018

    Posted 01 Jul in reply to Mark Link to this post

    Through trial and error, I believe the issue has been resolved. When I use the following configuration, my boolean value is reflected in the widget:

    @(Html.Kendo().SwitchFor(s => s.IsImmediateEvent)
                                  .Events(e => e.Change("onImmediateChange"))
                                )

    Although this works, I'm still left wondering why Switch() does not work, but SwitchFor() does. The documentation for this widget is very light to say the least.

  3. Tsvetomir
    Admin
    Tsvetomir avatar
    388 posts

    Posted 03 Jul Link to this post

    Hi Mark,

    Thank you for the provided code snippets along with the updates on the case. 

    Generally, the Name property of the Kendo UI Switch is responsible for setting the id of the associated element. So, when setting the Name, the following element would be produced:

    <input id='IsImmediateEvent' name='IsImmediateEvent' type='checkbox' data-role='switch'>

    However, this would not automatically bind the switch to the field in the model. Which leaves two options, the first one is to set the data-bind attribute via the HtmlAttributes property to correspond to the field in the model. Also known as MVVM binding.

    The second option is to use the switch as an editor and associate the field as you have already done. In this case the editor would render all of the needed attributes and would bind the value to the field automatically. 

    Let me know in case additional questions arise.


    Kind regards,
    Tsvetomir
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top