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

    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.

Children