I'm using the Ignite UI's igGrid. I am able to see the grid and the data. However, all of the icons for the grid are not showing (see the attached screenshot). My web page contains the following references:
infragistics.core.js v 15.2
infragistics.dv.js v 15.2
infragistics.lob.js v 15.2
infragistics.css v 15.2
infragistics.theme.css v 15.2
jquery v2.1.4
jquery-ui v1.10.3
Any ideas on what I am doing wrong? Maybe I'm missing a reference to a required library? I'm not sure where these images are supposed to come from...
Many thanks. Tory.
Hello Troy,
Thank you for posting in our community.
Your assumption is correct, the reason for this images not being displayed correctly are missing css files. The references that you are listed are correct, these are the files that you need. In this case you will have to ensure that the file paths for mentioned scripts are correct and whether the css files are actually located where you reference them. Alternatively, you could use the IgniteUi scripts form Infragistics (Content Delivery Network)CDN.
I created a small sample where I am referencing scripts locally and also in the comments they are refeenced from teh Infragistics CDN.
<link href="Scripts/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="Scripts/css/structure/infragistics.css" rel="stylesheet" /> <!-- following are references from Infragistics CDN--> <!-- Ignite UI Required Combined CSS Files --> <!-- <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/structure/infragistics.css" rel="stylesheet" />--> <script src="http://modernizr.com/downloads/modernizr-latest.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script src="Scripts/js/infragistics.core.js"></script> <script src="Scripts/js/infragistics.lob.js"></script> <!-- following are references from Infragistics CDN--> <!-- Ignite UI Required Combined JavaScript Files --> <!-- <script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.lob.js"></script>-->
<link href="Scripts/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="Scripts/css/structure/infragistics.css" rel="stylesheet" /> <!-- following are references from Infragistics CDN--> <!-- Ignite UI Required Combined CSS Files --> <!-- <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/structure/infragistics.css" rel="stylesheet" />-->
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script src="Scripts/js/infragistics.core.js"></script> <script src="Scripts/js/infragistics.lob.js"></script> <!-- following are references from Infragistics CDN--> <!-- Ignite UI Required Combined JavaScript Files --> <!-- <script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.lob.js"></script>-->
Please have a look at my sample and if you have any additional questions afterwards please feel free to contact me.
I believe that you might find teh following article from our documentation useful:
http://www.igniteui.com/help/deployment-guide-javascript-files
Hi Vasya,
Thanks so much for your help. Including the images from these CSS directories into my solution fixed the issue:
css\themes\infragistics\images css\structure\images\igGrid
You can consider this thread closed. Tory.
I am glad that you find my suggestion helpful.
Thank you for choosing Infragistics components.