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?
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
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 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
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.
Hello -
I am evaluating your jQuery library as a replacement for our DevExpress .NET stuff. There are two key features I have not been able to successfully implement with your tools - Column Grouping because of the behavior described in this thread, and a "move column" function.
I am running Chrome v22 - so the root cause of the issue evidently was not fixed by Google and your Jedi mind tricks.
My grid is attempting to be rather full functioning - sorting, filtering, hiding, resizing, groupby, and paging. When I drop a column on the GroupBy bar - the columns get out of sync. If I delete the groupby column, the heading for my first column is lost.
I do look forward to a reply - hopefully without requiring a great deal of overhead.
The chrome team did some changes and bug fixes in version #19 and it seems that they fell for our Jedi mind trick to fix the bug that was only evident in Chrome ;)
It looks like Google have fixed it with their latest release of Chrome (Version 19) which happened yesterday. The column headers now line up perfectly. What sort of influence have you got on them? Looks like you guys pull the strings from where I'm sitting :)
OK, for now I can just tell our users to use IE or Firefox, so it doesn't stop any development. Thanks
Hello,
Based on the sample provided, I have logged this behavior in internal tracking system with a Development ID of 111754. The next step will be for a developer to review my investigation and confirm my findings or to offer a fix, or other resolution.
I will update this forum thread with resolution or update from development.