Switch only rendering checkbox

7 posts, 0 answers
  1. Lee
    Lee avatar
    9 posts
    Member since:
    Nov 2013

    Posted 27 May 2015 Link to this post

    Hi, I'm trying to add the Mobile Switch to a MVC 5 Web App but it is not rendering the switch widget, just a checkbox.  Using the MVC Html wrapper, the HTML rendered is:

    <input checked="checked" data-off-label="No" data-on-label="Yes" data-role="switch" id="scoring-switch" name="scoring-switch" type="checkbox">

    The css files that are included in my layout page are:

    <link href="@Url.Content("~/Content/kendo/2015.1.429/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2015.1.429/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2015.1.429/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" />

     

    And the js files from my bundleconfig are:

    bundles.Add(new ScriptBundle("~/bundles/kendo/2015.1.429/kendoscripts").Include(
                           "~/Scripts/kendo/2015.1.429/kendo.all.min.js",
                           "~/Scripts/kendo/2015.1.429/kendo.aspnetmvc.min.js"));

  2. Lee
    Lee avatar
    9 posts
    Member since:
    Nov 2013

    Posted 27 May 2015 in reply to Lee Link to this post

    One more thing.  I tried this in a new Telerik MVC project created using the wizard and still get just a checkbox.

     TIA!

    Lee

  3. Kendo UI is VS 2017 Ready
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 29 May 2015 Link to this post

    Hi Lee,

    In order to get Kendo UI Mobile widgets correctly rendered you need to add the kendo.mobile.all.min.css file (documentation link).

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Lee
    Lee avatar
    9 posts
    Member since:
    Nov 2013

    Posted 29 May 2015 in reply to Iliana Nikolova Link to this post

    Thanks for the reply Iliana, however adding that stylesheet had no affect.  I still on get a checkbox in both my main app, as well as the test Telerik MVC app that I created.

     Here are all of the stylesheets loaded in the test app.  Does the order make any difference?

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2015.1.429/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2015.1.429/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2015.1.429/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2015.1.429/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2015.1.429/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2015.1.429/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />

  6. Lee
    Lee avatar
    9 posts
    Member since:
    Nov 2013

    Posted 29 May 2015 in reply to Lee Link to this post

    I just created another test Telerik MVC app on a different machine with fresh installs of Kendo and VS2015RC.  The thought was that the problem might be an environmental issue.  Unfortunately I'm seeing the same behavior on the new machine.
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 02 Jun 2015 Link to this post

    Hi Lee,

    Thank you for the details. Could you please make sure that the MobileSwitch is initialized within MobileView content and a mobile Layout is specified (documentation link)?
    <div id="example" class="k-content" style="height: 400px">
    @{ Html.Kendo().MobileLayout()
        .Name("examples");
    }
     
    @(Html.Kendo().MobileView()
        .Name("switch-view")
        .Title("Inbox")
        .Content(
          @<text>
            @(Html.Kendo().MobileSwitch()
               .Name("subscription-switch")
               .Checked(true)
               .OnLabel("YES")
               .OffLabel("NO")
            )
          </text>)
    )
    </div>
     
    @(Html.Kendo().MobileApplication()
       .ServerNavigation(true)
       .Layout("examples")
       .Name("example")
    )


    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Lee
    Lee avatar
    9 posts
    Member since:
    Nov 2013

    Posted 02 Jun 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    That was my problem.  I thought that the mobile widgets no longer needed to be contained in a MobileView for normal web apps.  When I initialize via JQuery, it renders as expected without the MobileView, but using the MVC wrapper it doesn't.  I'll just use the adaptive rendering and initialize via JQuery.

     

    Thanks for you help!

    Lee

Back to Top
Kendo UI is VS 2017 Ready