This is a migrated thread and some comments may be shown as answers.

Switch only rendering checkbox

6 Answers 246 Views
Switch (Mobile)
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Lee asked on 27 May 2015, 04:23 PM

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

6 Answers, 1 is accepted

Sort by
0
Lee
Top achievements
Rank 1
answered on 27 May 2015, 04:36 PM

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

 TIA!

Lee

0
Iliana Nikolova
Telerik team
answered on 29 May 2015, 07:50 AM

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!
 
0
Lee
Top achievements
Rank 1
answered on 29 May 2015, 01:51 PM

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

0
Lee
Top achievements
Rank 1
answered on 29 May 2015, 02:19 PM
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.
0
Iliana Nikolova
Telerik team
answered on 02 Jun 2015, 11:36 AM
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!
 
0
Lee
Top achievements
Rank 1
answered on 02 Jun 2015, 01:33 PM

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

Tags
Switch (Mobile)
Asked by
Lee
Top achievements
Rank 1
Answers by
Lee
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Share this question
or