I've built a grid to display a list of notes. Everything looks fine when running in IE or Firexfox, but when using Chrome, the headers are in the wrong position. It looks like they are incorrectly aligned.
IE and Firefox
Chrome
Code:
@( Html.Infragistics().Grid(Model) .ID("grdNotes") .AutoGenerateColumns(false) .UpdateUrl(Url.Action("EditListNotes")) .PrimaryKey("Id") .AutoCommit(false) .Columns(column => { column.For(x => x.Id).DataType("string").HeaderText("Id").Width("50px"); column.For(x => x.CustomerId).DataType("string").HeaderText("Customer Number").Width("60px"); column.For(x => x.InvoiceId).DataType("string").HeaderText("Invoice Number").Width("60px"); column.For(x => x.OrderId).DataType("string").HeaderText("Order/Project Number").Width("60px"); column.For(x => x.AttachmentCount).DataType("int").HeaderText("Attachment Count").Width("50"); column.For(x => x.DateLastEdit).DataType("date").HeaderText("Date Modified").Width("80px").Format(ViewBag.Culture.DateTimeFormat.ShortDatePattern); column.For(x => x.DateCreated).DataType("date").HeaderText("Date Created").Width("80px").Format(ViewBag.Culture.DateTimeFormat.ShortDatePattern); column.For(x => x.CreatedBy).DataType("string").HeaderText("Created By").Width("60px"); column.For(x => x.Category).DataType("string").HeaderText("Category").Width("60px"); column.For(x => x.Type).DataType("string").HeaderText("Type").Width("60px"); column.For(x => x.Text).DataType("string").HeaderText("Text"); }) .Features(features => { features.Selection().Mode(SelectionMode.Row).MultipleSelection(false); features.Sorting(); features.Resizing(); features.Filtering().Mode(FilterMode.Simple); features.Hiding().ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("Id").Hidden(true); settings.ColumnSetting().ColumnKey("CustomerId").Hidden(true); settings.ColumnSetting().ColumnKey("InvoiceId").Hidden(true); settings.ColumnSetting().ColumnKey("OrderId").Hidden(true); settings.ColumnSetting().ColumnKey("AttachmentCount").Hidden(true); settings.ColumnSetting().ColumnKey("DateLastEdit").Hidden(true); settings.ColumnSetting().ColumnKey("DateCreated").Hidden(true); }); //features.GroupBy(); features.Updating().EnableAddRow(false).EnableDeleteRow(true).EditMode(GridEditMode.Row).StartEditTriggers(GridStartEditTriggers.DblClick).AddRowLabel("Add Note") .ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("Id").ReadOnly(true); settings.ColumnSetting().ColumnKey("CustomerId").ReadOnly(true); settings.ColumnSetting().ColumnKey("InvoiceId").ReadOnly(true); settings.ColumnSetting().ColumnKey("OrderId").ReadOnly(true); settings.ColumnSetting().ColumnKey("AttachmentCount").ReadOnly(true); settings.ColumnSetting().ColumnKey("CreatedBy").ReadOnly(true); settings.ColumnSetting().ColumnKey("DateLastEdit").ReadOnly(true); settings.ColumnSetting().ColumnKey("DateCreated").ReadOnly(true); settings.ColumnSetting().ColumnKey("Category").ReadOnly(true); settings.ColumnSetting().ColumnKey("Type").ReadOnly(true); settings.ColumnSetting().ColumnKey("Text").ReadOnly(false); }); }) .Width("100%") .DataBind() .Render())
Im using jquery 12.1 with the igLoader framework.
Any ideas on how I can get this to play nicely with Chrome?
Thanks for your reply. It looks like your hunch about so many features being enabled was right. I've been systematically enabling and disabling features to test how well it displays in Chrome. The one feature that seems to be causing the problem is Filtering. When removed it displays as expected.
Hi chinupson,I'll compose a disposable sample based on your scenario later on today.I'll post it as an attachment to by next reply and I'll let you know if I'm able to reproduce the bug.I saw that you had several features enabled, as well as some hidden columns, making the scenario (look) a tad complex, but the grid should render under Chrome in such a case.Cheers,Borislav
The css and script folder stucture is heavily based on the structure within "C:\Program Files (x86)\Infragistics\NetAdvantage 2012.1\jQuery". I've added my own theme "syteline", but it doesn't appear to be this, because I've switched over to the metro style and still get the same issue. I've also tried to remove the site css (Syteline.css), again no difference.
Layout View
<link href="@Url.Content("~/Content/Syteline.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery-ui-1.8.18.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.tmpl.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/json2min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/IG/infragistics.loader.js")" type="text/javascript"></script>
View
@(Html.Infragistics().Loader() .ScriptPath(Url.Content("~/Scripts/IG/")) .CssPath(Url.Content("~/Content/IG/")) .Theme("syteline") .Resources("igShared") .Render() )
CSS Folder
Script Folder
hi,
could you show the code you have for loading the script references? To me it looks like missing CSS resources, or having them in a different order.
Thank you,
Angel