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 Borislav
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.
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
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.
Oh, if you have a problem downloading the sample from my previous reply, you can also get it from my SkyDrive:
https://skydrive.live.com/redir.aspx?cid=e4cf03e23fe33afe&resid=E4CF03E23FE33AFE!126&parid=E4CF03E23FE33AFE!122
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