I am having a problem applying jqueryui themes to the iggrid. The problem occurs when I add the Paging feature. The paging header and footer do not display correctly. I need this to work since my site is based on jquery-ui themes that can be changed at anytime by a user. I have tried with lower versions of jquery and jquery-ui with no success as well. The infragistics themes work great but I cant use them all the time.
I am using:
set in page like this:
<div id="gridContainer" style="width:100%;"><table id="grid"></table></div>
set from ajax call:
$(function () {
$("#grid").igGrid({
dataSource: results["gridData"],
responseDataKey: "",
autoGenerateColumns: false,
dataSourceType: "json",
renderCheckboxes: true,
enableHoverStyles: true,
height: "100%",
width: "100%",
fixedHeaders: false,
primaryKey: "AreaID",
caption: "Area List",
columns: [
{ headerText: "AreaID", key: "AreaID", hidden: true },
{ headerText: "Name", key: "Name", dataType: "string" },
{ headerText: "Short Name", key: "ShortName", dataType: "string" },
{ headerText: "Active?", key: "IsActive", dataType: "bool" }
],
features: [
{ name: "Paging", type: "local", pageSize: 10, page: 1 },
{ name: 'Sorting', type: "local" },
{ name: 'Selection', mode: 'row', multipleSelection: false, activation: true, rowSelectionChanging: gridSelectionChange }
]
});
The Sample.Zip file contains sample image of 2 themes applied for clarity.
If I try any jquery releases above this there will be errors from infragistics pertaining to other misc items.
I am running the most current service releases for the Infragistics controls. I can't ever find a release note on service changes before or after I install them. Maybe you could let me know how to find that as well.
Thanks in advance,
Michael
Hello mhead1 ,
Thank you for posting in our forum.
Since you aren’t using the igLoader I presume you manually load the css classes on the page.
Before the jquery ui css class you need to have the following classes in this order:
infragistics.theme.css for one of the grid themes
infragistics.css or the specific for the grid ones- infragistics.ui.shared.css and infragistics.ui.grid.css
After those you can load the jquery one.
I’ve tested this on my side with a grid with a pager and it seemed to work as expected. Please refer to the attached sample where you can choose some jquery ui themes for the igGrid similar to the following sample from the samples browser: http://es.infragistics.com/products/jquery/sample/hierarchical-grid/theme-switcher
The pager seems to be styled as expected.
Let me know if you have any questions or concerns.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://es.infragistics.com/support
Maya,
Thank you for your reply. However, according to documentation what you are explaining and what you have sent me is incorrect. The sample you sent me is not themed correctly. Look at how it stacks the paging links at the bottom of the grid for paging. Everything is also on the left side.
I switched the code to use the loader. The results are the same as my original screen shots.
When using the Jquery themes you Do Not load the infragistics theme. The infragistics theme has final overrides that the jquery theme does not replace. Yes it will work this way but the theme is not correct. Please refer to my screen shots. Screenshot Capture1 is the way you suggested which displays the format correct but will not allow the jquery ui theme to keep some of the theme items in the grid. Screenshot Capture2 is the by the documentation. It is almost correct but the header and footer of the grid are slightly incorrect.
The documentation for this can be found here:
http://help.infragistics.com/NetAdvantage/jQuery/Current/CLR4.0?page=Deployment_Guide_JavaScript_Resouces.html
Then click Styling and theming at the bottom.
Here is some code from my site in MVC 4:
MVC 4, VS2012, IE10 or Chrome
Shared Layout Page Head
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link type="image/x-icon" href="~/favicon.ico" rel="shortcut icon" />
<script type="text/javascript" src="@Url.Content("~/Scripts/modernizr-2.6.2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.9.2.min.js")"></script>
// Get the Jquery theme to use
@{
HttpCookie myCookie = new HttpCookie("theme");
myCookie = Request.Cookies["theme"];
// Read the cookie information
if (myCookie != null)
{
var path = "~/Content/themes/" + myCookie.Value.ToString() + "/jquery.ui.theme.css";
<link type="text/css" href="@Url.Content(path)" rel="stylesheet"/>
}
else
<link type="text/css" href="@Url.Content("~/Content/themes/mint-choc/jquery.ui.theme.css")" rel="stylesheet"/>
<link type="text/css" href="@Url.Content("~/Content/IG/css/structure/infragistics.css")" rel="stylesheet"/>
<link type="text/css" href="@Url.Content("~/Content/Site.css")" rel="stylesheet"/>
<link type="text/css" href="@Url.Content("~/Content/menu_assets/styles.css")" rel="stylesheet"/>
<script type="text/javascript" src="@Url.Content("~/Scripts/errorlogger.js")"></script>
<script type="text/javascript">
var logErrorUrl = '@Url.Action("LogJavaScriptError", "Error")';
if (!window.JSON) {
$.ajax({ type: "GET", url: "Scripts/json.min.js", dataType: "script" });
</script>
@RenderSection("headScripts", required: false)
</head>
View Page
@using Infragistics.Web.Mvc;
@section headScripts{
<script src="~/Scripts/IG/js/infragistics.loader.js"></script>
<!--<script src="~/Scripts/IG/js/infragistics.js"></script>-->
$.ig.loader({
scriptPath: '@Url.Content("~/Scripts/IG/js/")',
cssPath: '@Url.Content("~/Scripts/IG/css/")',
resources: 'igGrid.Paging,igGrid.Sorting, igGrid.Selection',
theme: ''
var LoadGrid_Success = function (results) {
if (results["error"] != null) {
$("#dialog-message").html('<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span>There was an error loading the grid:<br \> ' + results["error"].Message + '<br \>Refresh to try again.</p>');
$("#dialog-message").dialog('open');
else {
//$(function () {
$.ig.loader(function () {
Please advise to get the themes applied correctly. Thanks.
Please pass this along to someone that can help me with the jquery theme not applying correctly to the igGrid. It is only when you add features like paging and filtering.
Thanks,
Hello mhead1,
It seems that there’s a issue in the sample’s browser as it also uses the Infragistics theme. I’ll bring that to the development team’s attention.
I’ve tested the sample I previously attached without including the infragistics theme and it seems to be applied correctly. I’ve attached the sample together with a screenshot of what I see on my side when I run the sample on Ie10. The pager seems to be aligned properly and styled with the selected theme. Let me know if I’m missing anything from your scenario.
Thank you for your time. The problem was I was loading the ui.theme.css instead of ui.css for the theme. I changed that and it all worked. I did notice in the Chrome console that the infragistics.loader.js is throwing an error when you don't specify an infragistics theme. But it all works now.
The correct order is the following when using jquery theme:
jquery.js
jquery-ui.js
infragistics/structure css
jquery theme css
Thank you very much again.