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 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.
Now yours is a sample I'd like to receive from every asking person! :)Problem located: The "Text" column doesn't have a defined width so its filter cell isn't rendered correctly when there's at least one hidden column (hidden via the Hiding feature that is).The workaround I can give you is to set a pixel-valued width for the "Text" column - that'll normalize its appearance across the browsers.Personally I would opt in for this solution as it's very easy to do and will have immediate results.An alternative workaround would be to remove the width of all columns - then they're all treated equally by the grid and thus are rendered properly (their filter cells as well).However, if you wish we can open a new bug for you.PS: I can't help but smile at your nickname: "chin-up-son" :D
Thanks again for the swift feedback. Setting a pixel width is a fairly good option, but the text column is the one column I want to auto scale with the control. To complicate matters, I have a sidebar which sits on the right hand side of the screen, to allow users to do things on whatever row they are on. I do this by resizing the control to be the width of the screen minus the sidebar.
I've attached a more detailed example to demonstrate what I mean. The one option I have found is to set a definite width on the control itself, but I really would like this to scale.
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.
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 :)
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 ;)