Intersoft Community - WebGrid Enterprise - Height problems in grid

Height problems in grid

adamavis@gmail.com — Thu, 07 Apr 2011 09:49:14 GMT

Thanks

Height problems in grid

yudi — Wed, 06 Apr 2011 23:01:27 GMT

I have re-forwarded this to the WebGrid development team to be investigated further.
I’ll keep you updated with any news I heard from the team regarding this.

Height problems in grid

adamavis@gmail.com — Wed, 06 Apr 2011 09:34:23 GMT

For your information, I already tried and test the suggestion, to remove the AutoHeight property, before post the respond of this thread.
After further investigation, I was able to reproduce the issue on IE 7 browser. Previously, the problem was tested under IE 8 browser and no problem was found.
Please kindly let us know the browser version that you use when test the problem.

I did, I said ALL IE versions. IE6,IE7 and IE8 (compat mode) but lets use IE7, you say you can reproduce it, so now what? Is it a bug is there a workaround? I was reproducing on IE8.

Height problems in grid

yudi — Wed, 06 Apr 2011 00:44:36 GMT

For your information, I already tried and test the suggestion, to remove the AutoHeight property, before post the respond of this thread.

After further investigation, I was able to reproduce the issue on IE 7 browser. Previously, the problem was tested under IE 8 browser and no problem was found.

Please kindly let us know the browser version that you use when test the problem.

Height problems in grid

adamavis@gmail.com — Tue, 05 Apr 2011 11:55:07 GMT

Hi
The Auto Height is only working if you are working with floating layout.
If you have a Style ex: top 10px and left 100 the webgrid auto height will go 10px down under the screen.
A solution to this problem is to make a surounding div which you set height in % this wont fill the whole page but aproxametly.
We are still looking forward to a fix for this problem, since we are using the surounding divs on almost every page with Webgrid.

Best Regards
Rolf Arndt

Thanks for the Reply! I have tried this before, the problem is we can't always guess the height of the grid. The user can customize the height with the group by, filter and hierarchal.. The work around is to set the grid to min-height of 500px or something, but we don't want all the white space. Its a waste of real estate on the screen, I much rather Intersoft just fix the overlap problem with the horizontal scroll bar ;)

We actually use a JS function to try to resize the grid as a workaround but summing the rows and the all the options. It's not perfect.

Height problems in grid

adamavis@gmail.com — Tue, 05 Apr 2011 11:51:11 GMT

After inspect and test the snippet code in your first post of this thread, please try to remove the AutoHeight property in order to resolve the problem.
AutoHeight property specifies whether WebGrid will calculate its height automatically based on available page’s height.
Hope this helps.

Yudi, I already tried this before I sent you the snippet. I guess you didn't you try it?

I'll simplify, if you remove the autoheight snippet above and do not specify a height and the columns are larger than the width of the grid, the horizontal scroll bar covers the bottom row ALWAYS.

The grid will grow when more records are added, but the bottom row is always covered and when there is 1 or 2 records this is a major visibility problem.

Please try the example again and see my screen shots for reference.

Thanks

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="ISNet.WebUI.WebGrid" Namespace="ISNet.WebUI.WebGrid" TagPrefix="ISNet" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
<script runat="server">
  public class GridContent
  {
    public string SecurityRoleNameText { get; set; }
    public string SecurityRoleNameUrl { get; set; }
    public string OwnerCompany { get; set; }
    public int Assigned { get; set; }
  }
  
  protected void Page_Load(object sender, EventArgs e)
  {
    //Manually sets the grid columns below to 337 pixels each. 
      WebGrid3.RootTable.ColumnWidthDefault=337;
  }

  protected void Grid_InitializeDataSource(object sender, DataSourceEventArgs e)
  {
    System.Collections.Generic.List<GridContent> dummyData = new System.Collections.Generic.List<GridContent>() 
    { 
      new GridContent() { SecurityRoleNameText="Administrator 1", SecurityRoleNameUrl="", OwnerCompany="Company", Assigned=1 }

    };
   
    e.DataSource = dummyData;
    WebGrid3.DataBind();
  }
</script>

    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <IsNet:WebGrid ID="WebGrid3"  runat="server" Width="100%" OnInitializeDataSource="Grid_InitializeDataSource" UseDefaultStyle="True" DefaultStyleMode="Elegant">
    <RootTable Caption="New Title" >
        <Columns>
            <IsNet:WebGridColumn Name="Name" DataMember="SecurityRoleNameText" Caption="Name"  />
            <IsNet:WebGridColumn  Name="SecurityRoleNameUrl" DataMember="SecurityRoleNameUrl" Caption="SecurityRoleNameUrl"  />
            <IsNet:WebGridColumn  Name="OwnerCompany" DataMember="OwnerCompany" Caption="OwnerCompany"  />
            <IsNet:WebGridColumn  Name="Assigned" DataMember="Assigned" Caption="Assigned"  />
        </Columns>
    </RootTable>
    <LayoutSettings AllowFilter="Yes" AllowGrouping="Yes" AllowEdit="Yes" AllowSorting="Yes" AllowColumnSizing="Yes" PagingMode="ClassicPaging">
    </LayoutSettings>
    
</IsNet:WebGrid>


    </div>
    </form>
</body>
</html>

Height problems in grid

RolfArndt — Tue, 05 Apr 2011 07:55:49 GMT

The Auto Height is only working if you are working with floating layout.

If you have a Style ex: top 10px and left 100 the webgrid auto height will go 10px down under the screen.

A solution to this problem is to make a surounding div which you set height in % this wont fill the whole page but aproxametly.

We are still looking forward to a fix for this problem, since we are using the surounding divs on almost every page with Webgrid.

Best Regards

Rolf Arndt

Height problems in grid

yudi — Mon, 04 Apr 2011 22:38:57 GMT

After inspect and test the snippet code in your first post of this thread, please try to remove the AutoHeight property in order to resolve the problem.

AutoHeight property specifies whether WebGrid will calculate its height automatically based on available page’s height.

Hope this helps.

Height problems in grid

adamavis@gmail.com — Mon, 04 Apr 2011 12:41:02 GMT

We have grids in our system that cut the row with the horizontal and vertical scrollbars if there is 1-2 rows in the grid. All IE versions. It works fine in Google Chrome.

We can't set an explicit height for the grid because we don't want a lot of white space at the bottom of the grid, so we rely on the grid to resize appropriately.

I've attached a sample and a screen shot.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="ISNet.WebUI.WebGrid" Namespace="ISNet.WebUI.WebGrid" TagPrefix="ISNet" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script runat="server"> public class GridContent

{

public string SecurityRoleNameText { get; set; } public string SecurityRoleNameUrl { get; set; } public string OwnerCompany { get; set; } public int Assigned { get; set; }

}

protected void Page_Load(object sender, EventArgs e)

{

//Manually sets the grid columns below to 337 pixels each.

WebGrid3.RootTable.ColumnWidthDefault=337;

}

protected void Grid_InitializeDataSource(object sender, DataSourceEventArgs e)

{

System.Collections.Generic.List<GridContent> dummyData = new System.Collections.Generic.List<GridContent>()

{

new GridContent() { SecurityRoleNameText="Administrator 1", SecurityRoleNameUrl="", OwnerCompany="Company", Assigned=1 }

};

e.DataSource = dummyData;

WebGrid3.DataBind();

}

</script>

</head><

body> <form id="form1" runat="server"> <div> <IsNet:WebGrid ID="WebGrid3" runat="server" Width="100%" OnInitializeDataSource="Grid_InitializeDataSource" UseDefaultStyle="True" DefaultStyleMode="Elegant"> <RootTable Caption="New Title" > <Columns> <IsNet:WebGridColumn Name="Name" DataMember="SecurityRoleNameText" Caption="Name" /> <IsNet:WebGridColumn Name="SecurityRoleNameUrl" DataMember="SecurityRoleNameUrl" Caption="SecurityRoleNameUrl" /> <IsNet:WebGridColumn Name="OwnerCompany" DataMember="OwnerCompany" Caption="OwnerCompany" /> <IsNet:WebGridColumn Name="Assigned" DataMember="Assigned" Caption="Assigned" /> </Columns> </RootTable> <LayoutSettings AllowFilter="Yes" AutoHeight="true" AllowGrouping="Yes" AllowEdit="Yes" AllowSorting="Yes" AllowColumnSizing="Yes" PagingMode="ClassicPaging"> </LayoutSettings>

</IsNet:WebGrid>

</div> </form>

</body>

</html>