I'm trying to create a ToggleSwitch from MVC and it shows up on the page but is not formatted/styled correctly (see attached image). I'm assuming I'm missing some css or js reference but can't quite seem to find what it is. Please note that other mobile IgniteUI controls (button) seem to be getting styled correctly on the same page, which makes me think I have the correct references - but the Toggle is not showing up the way I expect.
I'm referencing the following in my bundles:
bundles.Add(
new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js").Include(
"~/Scripts/jquery.mobile-{version}.js"));
new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
new ScriptBundle("~/bundles/knockout").Include(
"~/Scripts/knockout-2.2.0.js"));
new ScriptBundle("~/bundles/infragistics").Include(
"~/Scripts/IG/infragistics.core.js").Include(
"~/Scripts/IG/infragistics.lob.js").Include(
"~/Scripts/IG/mobile/infragistics.mobile.js"));
new ScriptBundle("~/bundles/manhui").Include(
"~/Scripts/manh/webclient.js",
"~/Scripts/manh/webui.js", "~/Scripts/manh/manh.ui.*"));
new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
new StyleBundle("~/Content/manh/structure").Include(
"~/Content/manh/structure/manh.css"));
new StyleBundle("~/Content/IG/themes").Include(
"~/Content/IG/themes/manh/infragistics.theme.css").Include(
"~/Content/IG/mobile/themes/windowsphone/light/infragistics.mobile.theme.css"));
new StyleBundle("~/Content/IG/structure").Include(
"~/Content/IG/structure/infragistics.css").Include(
"~/Content/IG/mobile/structure/infragistics.mobile.css"));
new StyleBundle("~/Content/jquery").Include(
"~/Content/jquery.mobile.structure-{version}.css"));
And here is what I have in MVC code:
MvcHtmlString toggleSwitchHtml = HtmlHelperExtensions.InfragisticsMobile(this.Helper)
.ToggleSwitch()
.OnText(
"Yes")
.OffText(
"No")
.SwitchedState(
true)
.Width(
"200px")
.Render();
Hello Ryan,
I would suggest you to make sure that the scripts are added in the following order:
1. modernizr 2. jquery 3. jquery.mobile 4. infragistics.mobile
And the styles like this:
1. jquery.mobile.structure 2. infragistics.mobile 3. infragistics.mobile.theme
If the issue still occurs, please attach here a small sample, replicating the issue and I will be glad to look at it.
I will try this and let you know. One other question - how can I create the toggle switch from javascript? I don't see any examples on this in the help documentation.