How to use Infragistics CSS in new ASP.NET Web Forms app

I created a new ASP.NET Web Forms app and placed an Infragistics web control onto the Site.Master page, but do not know how to use Infragistics CSS to style the control.

How do I use Infragistics css styles in a WebForms app?  (Not MVC)

Stupid newbie questions:

1. Should I include an Infragistics css file from somewhere? Where is it located? What file name?

2. Should I copy an Infragistics folder structure to my app folders? Which Infragistics folders? Where are they located?

3. Do I need to specifically set CSS properties on Infragistics web controls, or will they “find” the css somewhere?

4. Is there a way to easily change the style of all Infragistics controls in my app with a few simple clicks?

Hello Ray, 

In order to use our CSS styles in your application all you need to do is adding an Infragistics control in your application and then opening the designer. Then you will receive message that the ig_res folder would be added to the directory of your project, which will import all of the CSS styles required for our controls. 

Inside the ig_res folder there are many different CSS files you can review them and determine what you would like to change and then those changes can be applied in the CSS file for the page or in the style tag inside the page. This is all you would need to do.

In addition to this I would like to share some additional documentation and blogs that you might find helpful in understanding the styling of our controls:

Understanding Styles

WebDataGrid CSS styling guide

Infragistics ASP.NET controls and Bootstrap styling

Please let me know if you have any questions.

Regards,
Ivan Kitanov

No, the ig_res was not added to my project. Nothing was added to my project.

So, I created a completely new ASP.NET Framework Web Forms project and tried again. Again… nothing was added to this new test project after dropping the Infragistics grid onto Site.Master in VS, even after opening the page designer.

I concluded that I must do this blindly.

I fished around and found ig_res in the Infragistics ASP.NET installation folder, and added it manually. I also found infrgistics.theme.css and infragistics.css files in the installation folder. I was confused by all these different css files, so I copied them all to my project. I don't know if they will work or not.

I also don't know about JavaScript and jQuery scripts for the Infragistics controls. Nothing was added to my project, so I don't if client-side or jQuery operations will work.

I guess I have to figure this out myself. Not happy.  [emoticon:ca08b2c27c2f40e993e89508acf29e0b]

Hello Ray,

This seems like a very odd behavior. In order to investigate your issue further, is it possible to share some additional information regarding your environment such as which version of Visual Studio and which version of .NET Framework are you using?

Regarding your question about how to import the JavaScript files to your project, you don’t need to include the JavaScript files. They're included as embedded resources in the assemblies that are being used in your project. That way, when you update the assemblies, you're automatically updating the JavaScript files as well. In term of their location, they can be found under the following directory:

C:\Program Files (x86)\Infragistics\2021.2\ASP.NET\CLR4.0\Scripts

Please note that, the directory may vary depending on where you have installed our controls, the scripts for CLR 4.5 should also be under the ASP.NET folder.

Looking forward to hearing from you.

Regards,
Ivan Kitanov

I'm using Visual Studio 2022 Community Edition (64-bit), version 17.0.5. The framework is Microsoft .NET 4.8.04084.

These are the latest versions, as of the time of this post on 2/3/2022.

Hello Ray,

What I mentioned above is correct for using VS2019, however I have tested this under VS2022 and the result is the same as yours the ig_res folder doesn’t get imported into the project. In order to fix this, all it needs to be done is copying the ig_res folder, then using the “Show All Files” option in the solution explorer and right clicking on the ig_res folder and selecting the “Include in Project” option. Thus, the folder would be included in the project and the styles would be applied. 

I’ve tested this on a few projects with several different controls and couldn’t find any issue, I also tested the CSOM under VS2022 and the JavaScript related to our controls works as expected. 

I’ve also contacted a colleague that is involved with the integration of our ASP WebForms controls with VS2022, it turned out that they are still polishing some things with the integration and the importing of the ig_res folder is one of them. We hope that the full integration would be finished soon. In the meantime the solution to this issue would be to add the folder manually and then using “Include in Project”.

Regards,
Ivan Kitanov

I had performed those steps you outlined above many days ago. I guess they worked because my grid and tabs show up correctly. ig_res is included in my project, and opens in the Solution Explorer.

Now I see another perplexing issue I cannot explain. I opened ig_webtab.css from my private ig_res folder from the Solutions Explorer and edited it and saved it, but saw no effect on the tabs in my page after re-running the app.

I then used the "Inspect" menu in Google Chrome to inspect the css styles. Sure enough, the changes from my private ig_webtab.css were not used. Changing css in the Chrome inspector worked as expected.

I cannot explain where the css is coming from. The Inspector says the file comes from "">localhost:443999/…/ig_webtab.css". But it does not contain my edited values from my private ig_res folder, which is located in my project folder.

This also does not help:

<link rel="stylesheet" href="~/ig_res/Default/ig_webtab.css">

Where is IIS Express getting the css file?

Hello Ray,

I have tried to reproduce this behavior, but on my side everything works as expected, once the ig_res folder has been included to the project, the changed CSS is applied correctly.

I am attaching a small sample that demonstrates what I have explained above. The sample consists of a WebDataGrid that has its igg_Header class changed, the changed property is the background-color. When running the sample, the column headers should have a purple background color.

Could you let me know if you are able to observe the change of the background color when running the sample?

If the CSS changes are applied in the sample and work correctly on your side, but not in your application, I recommend you copying the ig_res folder that the sample is using and replace the ig_res folder that you are currently using with it, to see if the CSS changes would be applied.

If the changes are still not getting applied, even if you have replaced the ig_res folder with the one from the sample, then what I can suggest you is creating your own css file and placing the CSS classes that you would like to override there. After that you can reference the file and the changes made there would be applied.

Looking forward to hearing from you.

Regards,
Ivan Kitanov

Your sample worked. Thank you!

I was forced to create a separate style sheet to override ig_webtab.css.

There must be some crazy caching because sometimes editing ig_webtab.css worked, but other times older css values remained in force. Only the private css file worked reliably.

I guess I have a solution for now, but remain mystified.

Hello Ray,

I’m glad that you were able to resolve your issue.

Thank you for choosing Infragistics!

Regards,
Ivan Kitanov