Switch only rendering checkbox

[Lee]

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"));

[Lee]

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

 TIA!

Lee

[Iliana Dyankova]

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

 

 

[Lee]

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" />

[Lee]

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.

[Iliana Dyankova]

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

 

 

[Lee]

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