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");
Thanks!
I am looking forward it.
I will try to create an example of what we're seeing. We did copy your styles. It may take me a few days to get this ready.
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,
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.
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://ko.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.