The RadGrid and my struggle with associated scrollbars.

[SSirica]

Hopefully I can successfully describe what I would like to accomplish.  For years I have fought with the RadGrid and it's scrollbars, so let's see if the experts can finally put my struggle to rest.  

I have a RagGrid that that has it's width set to 99% and contains quite a few resizable columns set to autofit.  Fixed sizes are not an option.  When I resize a column the grid grows causing the container around the grid to produce scrollbars.  I would like the grid to remain a consistent size and have the grid produce the scrollbar when needed.  Am I crazy to think that this should be achievable?

[Doncho]

Hi Steve,

Based on the description of the required behavior it seems that the StaticHeaders functionality can prove useful in this case.

Here is a basic sample where you can test expanding the columns:

<div style="width:1000px; height:400px">
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="99%" Height="100%" OnNeedDataSource="RadGrid1_NeedDataSource">
        <ClientSettings>
            <Scrolling AllowScroll="true" UseStaticHeaders="true" />
            <Resizing AllowColumnResize="true" />
        </ClientSettings>
        <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
            <Columns>
                <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                    FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                    ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
                </telerik:GridBoundColumn>
                <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                    FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                    SortExpression="OrderDate" UniqueName="OrderDate">
                </telerik:GridDateTimeColumn>
                <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                    FilterControlAltText="Filter Freight column" HeaderText="Freight"
                    SortExpression="Freight" UniqueName="Freight">
                </telerik:GridNumericColumn>
                <telerik:GridBoundColumn DataField="ShipName"
                    FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                    SortExpression="ShipName" UniqueName="ShipName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="ShipCountry"
                    FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                    SortExpression="ShipCountry" UniqueName="ShipCountry">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
</div>

C# to populate the grid

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = OrdersTable(); 
}
private DataTable OrdersTable()
{
    DataTable dt = new DataTable();

    dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
    dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
    dt.Columns.Add(new DataColumn("Freight", typeof(double)));
    dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
    dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));

    dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };

    for (int i = 0; i < 100; i++)
    {
        int index = i + 1;

        DataRow row = dt.NewRow();

        row["OrderID"] = index;
        row["OrderDate"] = DateTime.Now.Date.AddDays(index);
        row["Freight"] = index * 0.01;
        row["ShipName"] = "Name " + index;
        row["ShipCountry"] = "Country " + index;

        dt.Rows.Add(row);
    }

    return dt;
}

Kind regards,
Doncho
Progress Telerik

[SSirica]

thanks for the response but that's not even close.  That example didn't produce a single scrollbar.  I have many grids that looks like your example. 

I guess I didn't explain properly.  I guess what I'm looking for is the grid to act kind of like excel.  no matter how big or small the spreadsheet is the container, in this example excel, doesn't change.  Instead, the spreadsheet contains the scrollbars.  It would be nice if the radGrid acts something like that instead of relying on external controls such as DIV's or Panels to accomplish the same effect.  

[Doncho]

Hi Steve,

I am afraid I don't clearly understand the desired behavior. Could you please share some screenshots or sketches on how the appearance and the behavior of the RadGrid should be different than the default one?

I would suggest you use our Scrolling demo as a reference. There the StaticHeaders can be enabled/disabled via a checkbox in the Demo Configurator:

• https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/scrolling/scrolling/defaultcs.aspx 

Keep in mind that if the grid is nested inside containers, at least one of them should have a fixed height dimension in pixels. Thus the control will calculate its dimensions in regards with this container pixel height. In case you want to occupy the complete height of the page with the RadGrid, you will need to ensure all the parent elements of the RadGrid are also completing the page height.

[SSirica]

I guess I'm disappointed that the grid has to depend on outside controls to accomplish scrollbars, and in a world where the web designer doesn't know if people are going to be viewing their stuff on a pc/notebook/iPad/iPhone the only way to get this functionality is to use fixed dimensions.  As a user there is nothing more annoying than having a scroll bar to traverse the grid and then having to use a scroll bar on the window to see the rest of the grid.  Double scrollbar = bad design.  

[Doncho]

Hi Steve,

Sorry to see your disappointment, yet I am confident that you can achieve a setup that largely meets your requirements. I believe there is still some misunderstanding here.

Here is a sample Grid behavior that can serve as a basis for discussion and clarifying the desired behavior - http://somup.com/c01UjhzQYo 

I am also attaching the sample page I used for achieving this behavior so you can give it a try too.

Please feel free to modify the sample if needed, and let me know the steps that will help me face the unexpected behavior myself.

This will help me better understand the current requirements and hopefully, I will be able to assist you to achieve the desired behavior.

 

[SSirica]

I included a screen shot.  The red areas are what I'm trying to avoid.  I would like the grid to stay within my panel and have it's own scroll bar instead of the resulting grid cause the browser to generate a scroll bar.  the code for my grid is very simple:

                        <telerik:RadGrid ID="rgMain" runat="server" AllowPaging="True">
                            <MasterTableView>
                                <AlternatingItemStyle  Wrap="False" HorizontalAlign="Left" />
                                <ItemStyle Wrap="False" HorizontalAlign="Left" />
                                <HeaderStyle HorizontalAlign="Center" />
                                <Columns>
                                </Columns>
                            </MasterTableView>
                        </telerik:RadGrid>

[Doncho]

Hi Steve,

Could you please share the entire markup declaration of the Page containing the panel wrapping the Grid and the RadGrid control itself? That way I will be able to better understand the current scenario. Once I manage to replicate the same appearance issue I will be able to assist you more accurately with this.

It would also be very helpful if you capture the current behavior with the Fiddler Jam tool and share the log with me:

• https://docs.telerik.com/devtools/aspnet-ajax/integration/telerik-products/common-capture-issues-with-fiddler-jam