We are using ASP.NET MVC bundles with Ignite UI controls. Our bundle loads the Infragistics scripts in the order below. We also have a JavaScript bundle that loads the Infragistics.load.js file. What we are seeing is when the site is applying the optimized bundles the Infragistics.theme.css class is being loaded due to the dependency found in the Infragistics.load.js file. This is causing our styles to be applied out of order so the screen looks different when optimization is turned on than when it is turned off. What we expected is for the "common" bundle to be referenced for the theme css rather than having the Infragistics.theme.css file load into the browser. Do you have recommendations on how to use bundling optimization with the way you have written Infragistics.loader.js and its dependencies on the theme file?
bundle = new StyleBundle("~/CSSBundles/common")
.Include("~/Content/IG/structure/jquery-ui.css", new RewriteUrlTransform())
.Include("~/Content/IG/structure/jquery.ui.css", new RewriteUrlTransform())
.Include("~/Content/IG/structure/jquery.ui.datepicker.css", new RewriteUrlTransform())
.Include("~/Content/IG/structure/jquery.ui.slider.css", new RewriteUrlTransform())
.Include("~/Content/IG/structure/jquery.ui.theme.css", new RewriteUrlTransform())
.Include("~/Content/bootstrap/css/bootstrap.min.css", new RewriteUrlTransform())
.Include("~/Content/bootstrap/css/bootstrap-flat.min.css", new RewriteUrlTransform())
.Include("~/Content/font-awesome/css/font-awesome.min.css", new RewriteUrlTransform())
.Include("~/Content/IG/themes/manh/infragistics.theme.css", new RewriteUrlTransform())
bundle = new ScriptBundle("~/JSBundles/infragistics/loader").Include(
"~/Scripts/IG/infragistics.loader.js");
Hello Tammy!
Glad to hear you again.
My suggestion is to bundle the Ignite UI scripts withould the loader. The are loaded async so this may cause issues.
Here a post how to use bundling with Ignite UI scripts and MVC - http://www.infragistics.com/community/blogs/mihail_mateev/archive/2012/06/11/creating-dashboards-with-netadvantage-for-jquery-and-asp-net-mvc-4.aspx
This application is using this approach - https://github.com/IgniteUI/autosales-dashboard-sample/blob/master/AutosalesDashboard/AutosalesDashboard/App_Start/BundleConfig.cs
Regards,
The app sample you pointed at doesn't have any style bundles its just script bundles...
I see your problem.
You have to extend the loader to support your new theme manh which is pointed here .Include("~/Content/IG/themes/manh/infragistics.theme.css", newRewriteUrlTransform()) and set it
// Initialize
$.ig.loader({
theme:
"manh"
});
And the theme should NOT be included in the bundle.
I am referring the this post as good example - http://www.infragistics.com/community/blogs/mihail_mateev/archive/2012/06/11/creating-dashboards-with-netadvantage-for-jquery-and-asp-net-mvc-4.aspx. See the section for CSS.
Ok this causes a new issue though. If I remove the Infragistics theme classes from the bundle all together then they are loaded after our "custom" css class so our styles are not applied in the right order. Do you guys have any recommendations on how to have custom styles with Themes? I know I've asked this before. How do I guarantee the loader loads the Infragistics theme before my custom style bundle? Even if I add that bundle after the loader call with the theme it doesn't load the Infragistics themes until way later during the screen loading which in turn makes my custom style sheet be applied out of order.
Best way to create a custom theme is to copy Infragistics one and make there any customizations.
This approach we are using for our showcase applications. Keep in mind, if you update to new version you have to update manually the css files.
Best Regards,