Tips to overcome distorted Header in Infragistics webgrid when UseFixedHeader set to true

In couple of my projects I used infragistics UltrawebGrid extensively. It helps to deliver greater functionality with minimal code by leveraging its CSOM model. At times I had bitter experience to overcome small things that could have been done in a very simpler way with out using ultragrid. One such experience was Grid Header Misalignment i.e. Webgrid overflowing from frame as like the below figure when UseFixedHeader=true

Full Size Image

I used the same code what I had in my previous project where it rendered perfectly which puzzled me a lot but after little search in their discussion forum post I found the workaround as below.

1. Hookup up InitializeLayoutHandler

2. Include the following code in the InitializeLayoutHandler event handler

function InitializeLayoutHandler(gridName)
 {
var grid = igtbl_getGridById(gridName);
var div = grid.getDivElement();
div.style.position="relative";
}

After the above code inclusion, the modified grid will look like thise

Full Size Image

6 thoughts on “Tips to overcome distorted Header in Infragistics webgrid when UseFixedHeader set to true

  1. Recently i am working at .NET Application. I had a big problem related infragistic grid positioning. But now the problem is solved due to your Tips.

    Thanks Buddy.

    Like

  2. I am using UltraWebGrid with setting width of UltraGrid Columns/Templated Columns in percentage. Grid workis fine till the time there is no scroll bar. As soon as data overflows and scrollbar comes, grid columns shrinks to accomodate scrollers leaving headers as it is. Because of this headers and grid columns mismatches. Any solution to this problem?

    Thanks in advance..

    Like

  3. I have similar problem like U : My grid header last column is cut off but the rows are displayed correctly. Only problem is with Header Display.

    i have given ur grid initialize cliensideevent codings, and this is my serverside gridlayout codings :
    With grdTimeSheet.DisplayLayout
    .AllowAddNewDefault = AllowAddNew.Yes
    ‘.AllowUpdateDefault = AllowUpdate.Yes
    .RowSelectorsDefault = RowSelectors.Yes
    .CellClickActionDefault = CellClickAction.Edit
    .AllowColSizingDefault = AllowSizing.Free
    .AllowColumnMovingDefault = AllowColumnMoving.NotSet
    .BorderCollapseDefault = BorderCollapse.Separate
    .RowHeightDefault = 20
    .AddNewBox.Hidden = True
    .AddNewRowDefault.Visible = AddNewRowVisible.Yes
    .TableLayout = TableLayout.Fixed
    .SelectTypeRowDefault = SelectType.Single
    .StationaryMarginsOutlookGroupBy = True
    .StationaryMargins = StationaryMargins.Header
    .ViewType = ViewType.Hierarchical
    .AddNewRowDefault.RowStyle.BackColor = Drawing.Color.FromName(“window”)
    .ScrollBar = WebUI.UltraWebGrid.ScrollBar.Auto
    .ScrollBarView = ScrollBarView.Both
    .AllowSortingDefault = AllowSorting.No
    End With

    But still i didnt get solution to solve my problem

    ScreenView ::
    Header is :
    From To Status(emptyspace instead of full display)
    cell cell cell……………

    Pls reply me asap with any other solution

    Like

  4. I had problems with Fixed Headers also and had given up using them.
    Then I developed a problem where the grid would overflow its boundary – both vertically and horizontally and almost gave up on using the WebGrid altogether.

    Your solution fixed both problems.

    Thanks

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s