Hi, I have some questions on what resource files (css, javascript and images) are required to use the infragistics controls during development and what files need to be deployed to test or production environment
when I drop a infragistics data control on to a form and bind data to it from code behind, nothing gets displayed until I apply some styles to it. it is not the same for Microsoft controls, for example I can just drop a Gridview and bind data to it, it works perfectly by applying its own default styles automatically.
after adding an infragistics control on to a form and go to designer, I get a prompt to import default style sheet and if I click OK, lots of javascript files, css and images are copied to my root directory. do I need so many resource files just to use one control (for example WebDataTree)? In infragistics online documentation, it says that resource files are embedded within the controls themselves, so in that case why these files need to be copied to my website? do I need to copy all these files to test server as well then?
also if I want to customise the styles to my own for a consistent look through out the website through a skin file, how can I do that? there is no documentation on how I can change the styles of for example WebDataTree nodes, child nodes, expand and collapse images etc. Please clarify.
Thanks in advance
Hi,
when you drop a control on the designer surface it should add an <infragistics.web ... /> section in the web.config which contains the styleSetPath paramter which usually points to "~/ig_res" . Then it will copy all the themes files for all controls to the created ig_res folder in your web site. This is the default behavior when you work with the designer. Usually not all of the files are required if you use only one control. Each control has one css file like webdatatree.css and it refers to some image files located in the images directory in each theme.
So you have CSS files found here:
~/ig_res/ThemeName/*.css
And images files for each theme found here:
~/ig_res/ThemeName/images/*.png | *.gif
You can safely delete the unneeded themes folders and CSS files that you do not use. But if you decide to use other controls later you will have to copy those files back. In the CSS you can change whatever classes you want, including font colors, sizes, images and etc. If you are have to use different image you can copy it to the images folder and reuse this image in the *.css file. Unfortunately when you upgrade you will most probably have to edit the new CSS files to have your custom changes.
Specifically for WebDataTree you can look at webdatatree.css and see what classes are there and to what elements they are applied, you can easily figure out which class to which DOM elements corresponds.
Hope this helps.
Thanks,
Lubomir
thanks for the reply. that will work for most of the pages for consistent look through out the site, but if I want to override the webdatatree or any other control styles for couple of the web pages, then how can I do that? for example how can I use different colors or images for few pages and have a default style in other pages (just like you can have multiple skins for Microsoft controls)?
thanks in advance.
you could easily do that by copying the styles that you want to customize to another folder like
~/ig_res_custom/*.*
And then each control has a property StyleSetPath, so that you could tell to a specific web data tree for example
<ig:WebDataTree ID="WebDataTree2" runat="server" StyleSetPath="~/ig_res_custom" ... />
to use the styles from another folder.
thanks for the prompt reply, that seems obvious, but it is just that I used the classic controls before and I used skin files to get different styles and I think for the new controls, the approach is a bit different, I will try this and let you know if I face any more issues.
basically my requirement is to build a menu in a tree format (with an accordion look) and I will need to customize the default styles applied by the infragistics to make it look better (and also some borders around each node, different expand and collapse images, store additional data per node, not just id, name and tag etc) and in the process of doing that I am coming across all these issues and taking a long time to complete it.
Hi, I am looking at this sample https://ko.infragistics.com/samples/aspnet/data-tree/property-explorer and it is using a javascript file called "SamplesNavigation.js" to navigate to the selected item. but the source code is not available. how can I get it?. I can't see the xml file used to bind the data as well. is there anyway to download all these samples?
that's great, I just looked at it, looks like that's exactly what I need, hopefully it can be expanded to at least 3 or 4 levels down and easily customizable. thank you very much for the tip. I will use it and let you know if I come across any issues. thanks once again.
We already have such control that is accordion like. You just have to use it. It is called WebExplorerBar. Look at the samples.infragistics.com to see it in action :)