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.
Hi,As promised, I've attached the MVC sample I used to check on this and I'm glad to say that I couldn't spot a problem.Here is a screenshot of how our grid looks like with our default and Metro themes:I noticed you had 11 columns, but my table had only 5, but I don't think that's a problem seeing as how we both have at least one hidden column and 4 visible ones.Also, due to the attachment size constraints (200KB), I am referencing our IG resource (JS, CSS and images) from a virtual directory (http://localhost/ig_ui12.1_PREV/1010.RTM) - it has the exact same files which you have for 12.1 (our RTM build is #1010).Thus, my suspicion is that either the problem has come from the syteline theme you are using - I tried our own themes in Firefox, IE9 and Chrome and the rendering was consistent (and without misalignments).Can you take a look for yourself if you can reproduce the problem with our themes?Cheers,Borislav
Hi Borislav
Thank you for going to the trouble of creating a sample. It runs absolutely fine here too. However, if I add a more complex model, I get a similar issue to what I was experiencing before.
Please find attached the modified sample. Start it in a windowed instance of Chrome and you should see the same result.
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.