Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
850
Wrong header positions in Chrome
posted

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?

Parents Reply
  • 850
    posted in reply to [Infragistics] Borislav Traykov

    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.

Children