Intersoft Community - WebGrid Enterprise - Vertical scrollbar makes grid content inaccessible

Vertical scrollbar makes grid content inaccessible

Glayaar — Wed, 26 May 2010 23:50:33 GMT

In my test, I set a static height for each row (24px) since all the row is a single line row. If you are using multi row cell or other scenario in which the height for each row could be different, the workaround would be to iterate all the row and sum all the height, as you have done using jQuery.

Vertical scrollbar makes grid content inaccessible

Gmontes — Wed, 26 May 2010 19:19:39 GMT

For some reason setHeight onAfterInitialize and setHeight OnAfterResponseProcess behave differently (they don't resize the grid to the same height). My solution for this was way overkill but worked, used jQuery selectors to get the rowcount and the height of the elements inside the grid.

Vertical scrollbar makes grid content inaccessible

Glayaar — Thu, 13 May 2010 23:41:32 GMT

Under such circumstances, you will need to use the OnAfterResponseProcess client side event handler. Based on the action name in the event handler you might need to invoke the resize height again.

Here is the modified snippet:

function GridCustomResize(controlId)
{
    var wgScroll = ISGetObject(controlId);

    if (IS.ie && IS.GetIEVersion() == 7)
    {
        var tableElem = wgScroll.RootTable.GetElement(WG40.BODY, WG40.HTMLTABLE)
        var totalRows = tableElem.getElementsByTagName('tr').length;

        //70 is the status bar height
        //22 is the height of a single row content
        wgScroll.SetHeight((70 + (24 * totalRows)));
    }
}

function wgScroll_OnAfterInitialize(controlId)
{
    GridCustomResize(controlId);
	
	return true;
}

function wgScroll_OnAfterResponseProcess(controlId, actionName, lastRequestObject, xmlResponseObject)
{
	var wgScroll = ISGetObject(controlId);

	switch (actionName)
	{
	    case "Paging":
	        GridCustomResize(controlId);
	        break;
	}
	
	return true;
}

Vertical scrollbar makes grid content inaccessible

Gmontes — Wed, 12 May 2010 11:06:04 GMT

Hi Glenn,

This solution doesn't work for grids with paging, once I go to a different page the grid will resize (incorrectly) again and I'm sure that some operations requiring a flypostback (sorting, refreshing) will resize the grid as well.

Try adding to the grid:

<LayoutSettings PagingMode="ClassicPaging" PagingSize="10">
        <ClientSideEvents OnAfterInitialize="wgScroll_OnAfterInitialize" />
    </LayoutSettings>

And on the DS:

protected void InitScroll(object sender, ISNet.WebUI.WebGrid.DataSourceEventArgs e)
        {
            e.DataSource = new List<KeyValuePair<string, string>>()
            {
                new KeyValuePair<string, string>("Test", "Test"),
                new KeyValuePair<string, string>("Test", "Test"),
                new KeyValuePair<string, string>("Test", "Test"),
                new KeyValuePair<string, string>("Test", "Test"),
                new KeyValuePair<string, string>("Test", "Test"),
                new KeyValuePair<string, string>("Test", "Test"),
                new KeyValuePair<string, string>("Test", "Test"),
                new KeyValuePair<string, string>("Test", "Test"),
                new KeyValuePair<string, string>("Test", "Test"),
                new KeyValuePair<string, string>("Test", "Test"),
                new KeyValuePair<string, string>("Test", "Test"),
                new KeyValuePair<string, string>("Test", "Test"),
                new KeyValuePair<string, string>("Test", "Test"),
                new KeyValuePair<string, string>("Test", "Test"),
                new KeyValuePair<string, string>("Test", "Test")
            };
        }

Take a look at the grid behaviour on initial load and after paging. Is the ONLY solution giving it a fixed height?

Vertical scrollbar makes grid content inaccessible

Glayaar — Mon, 10 May 2010 03:34:06 GMT

Based on my discussion with the developer regarding this issue, the issue is caused by improper standard implementation in IE 7.

A workaround in IE 7 would be to set the height manually during OnAfterInitialize event based on the WebGrid number of rows. Here is the snippet:

function wgScroll_OnAfterInitialize(controlId)
{
	var wgScroll = ISGetObject(controlId);

	if (IS.ie && IS.GetIEVersion() == 7)
	{
	    var totalRows = parseInt(wgScroll.TotalRows);

	    //70 is the status bar height
	    //24 is the height of a single row content
	    wgScroll.SetHeight((70 + (24 * totalRows)));
	}
	
	return true;
}

Vertical scrollbar makes grid content inaccessible

Gmontes — Fri, 07 May 2010 12:02:00 GMT

Hi,

I found an issue where the vertical scrollbar is showing up for no reason (the height should be calculated with the rowcount/pagingsize). This is making the grid content inaccessible. We have a grid with X width and several columns defined that go over that X... thus, requiring horizontal scrolling.

My problem is... once I start adding records to the grid, the vertical scrollbar shows up and you can't get to the grid content (see attached file).

See this definition

<ISNet:WebGrid ID="wgScroll" runat="server" OnInitializeDataSource="InitScroll" Width="500px" UseDefaultStyle="true" DefaultStyleMode="Win7">
    <RootTable>
        <Columns>
            <ISNet:WebGridColumn Name="Test1" DataMember="Value" Width="100px" />
            <ISNet:WebGridColumn Name="Test1" DataMember="Value" Width="100px" />
            <ISNet:WebGridColumn Name="Test1" DataMember="Value" Width="100px" />
            <ISNet:WebGridColumn Name="Test1" DataMember="Value" Width="100px" />
            <ISNet:WebGridColumn Name="Test1" DataMember="Value" Width="100px" />
            <ISNet:WebGridColumn Name="Test1" DataMember="Value" Width="100px" />
            <ISNet:WebGridColumn Name="Test1" DataMember="Value" Width="100px" />
        </Columns>
    </RootTable>
</ISNet:WebGrid>

And populate that grid with a single entry... something like:

protected void InitScroll(object sender, ISNet.WebUI.WebGrid.DataSourceEventArgs e)
        {
            e.DataSource = new List<KeyValuePair<string, string>>()
            {
                new KeyValuePair<string, string>("Test", "Test")                
            };
        }

I'm using IE7 with Webgrid 7.0.7200.401. How do I fix this? Can I just force it to remove the scrollbar? Will that make grid calculate the correct height?

Thanks

Guillermo