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.
Hello,
There is currently javascript API only for the controls listed here: http://help.infragistics.com/jQuery/2013.2/
I've noticed that it starts to do this when I reference jqueryui on the page. Is this not a valid scenario or am I doing something wrong?
Hi Ryan,
This is to let you know that I am looking into this matter. I will follow-up with you on Friday with what I have found.
Thanks!
I got pulled off to something else - I'm hoping to get back to this within the next week - I'll get in touch with you then.
I have not heard back from you since my previous update. Let me know if you still need assistance with this. If so, I will await you to update my sample and send back to me. I will then proceed to look into this for you.
Can you take me example from my previous update and modify for how you are doing so here in this image. And, send back the modified project. I will take a look and follow-up with you with what I find.
When I try to run the project you sent, I get the attached error.
I am putting jqueryui in a bundle as follows:
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}.js"));
and then referencing that bundle from the _Layout.cshtml file:
@Scripts.Render("~/bundles/jqueryui")
With your earlier update you mention this begins to happen when you reference jqueryui on the page. Are you referring to where you call in the Infragistcs javascript and css as follows:?
@(Html.InfragisticsMobile().
Loader().
ScriptPath("~/js").
CssPath("~/css").
Render())
If so, are you using the mobile js and css files?
Or do you mean something different?
I have pulled together a small sample for your reference. Let me know if this helps to resolve this issue for you or if you need any additional assistance.
** please note that to add this sample to the forums the following files/folders were eliminated to reduce file size: Packages; obj; Bin