What is the relation between StyleSet and Preset? Thanks!
I'm glad you ask, because I don't think the differentiation is very clear for many. In a nutshell, a preset is applied to a single instance of a grid, and actually changes the ASPX markup for that grid. A StyleSet is a set of CSS StyleSheets that are associated with one or many controls. Key takeaways:
Presets = 1:1 mapping
StyleSets= 1:Many mapping
Why does this matter? Think of an instance where you've used the same preset and applied it to 30 grids on 20 different pages in your application. Your manager walks in and says - we need to change the colors on this grid... that's 30 places you must go back and revisit. So you might be thinking, ok.. I'll dynamically load my presets and avoid the 1:1 mapping that's created when I load a preset at design-time. This is a step in the right direction, but Application Styling takes this one step further.
Application Styling isn't just a bunch of random CSS classes. It's all completely UI Role based, and has an inheritence scheme built in. So if tomorrow your boss (or visual design team) comes in and says, "I want all of the fonts in this applicatoin to be Calibri, 12pt, with a color of #3d3d3d", you can make that change in seconds by setting the font properties on the "Control" ui role, which sits at the top of the UI Role Hierarchy. The change will be applied to EVERY Infragistics control on EVERY form of your application (unless you overrode it at deeper level).
As one last key benefit - building Application Styles does not require a developer or Visual Studio. It can be done through AppStylist which is an Infragistics tool that allows designers and developers to build styles for Infragistics control, in a very quick and easy way. If you're hardcore, you can also build the styles by hand with CSS (just grab an existing styleset and fill out the css classes in your favorite text editor).
I hope that helps explain it. The whole concept is extremely powerful, and I want to be sure that you understand just how powerful it is so that you can be as productive as possible with NetAdvantage.
-Tony
Thanks. And more questions:
1. Can I mix StyleSet and Preset? If yes, which one will take control?
2. Does StyleSet apply to non-Infragistics controls/elements?
3. It seems that StyleSet ia an application wide setting. Does it support page-wide or control-wide over-written?
chrisnet said: Thanks. And more questions: 1. Can I mix StyleSet and Preset? If yes, which one will take control? 2. Does StyleSet apply to non-Infragistics controls/elements? 3. It seems that StyleSet ia an application wide setting. Does it support page-wide or control-wide over-written?
1. You can mix StyleSets and Presets. The Preset will end up being dominant as it's actually setting control level properties (the control properties will always override the CSS based stylesets)
2. The StyleSet does not automatically apply to non-Infragistics based controls, but since it is nothing more than a CSS StyleSheet, there is no reason you can't add rules for other HTML Elements into the StyleSet stylesheets. You can either add them directly inline, or as I've done in the samples browser, use @import (url) to import rules from a separate stylesheet.
3. Stylesets can be applied application wide through the web.config, at the page-level through the WebPageStyler, or at the control level by using the StyleSetName and StyleSetPath properties. Settings will override as you get closer to the control, so Control overrides page, which overrides application.
A big advantage of the Infragistics styling framework is that you can change the look of an entire application by changing one line in the web.config file. It defines the styleset to be used for the entire application. But if I want to add a style for myTable (as you suggest above), I have to add the style to EVERY styleset, right? If I add it to just one styleset (e.g. Electric Blue), then it will only work when I select the Electric Blue styleset. If I change my web.config to use RedPlanet, I will lose the myTable style definition.
"So if tomorrow your boss (or visual design team) comes in and says, "I want all of the fonts in this applicatoin to be Calibri, 12pt, with a color of #3d3d3d", you can make that change in seconds by setting the font properties on the "Control" ui role, which sits at the top of the UI Role Hierarchy."
Wrong. This will affect only the fonts of the Infragistics controls -- not the vast majority of text in the app, which sits inside Div or Table or <p> tags, etc.
Open up the ig_shared.css file from the styleset of your choice. Add a new rule in there like
.myTable{background-color:red;}
Now, you can set the css class of the table to "myTable" and when the styleset is loaded, the table will be shown with a red background.
Can you please give an example on number 2?