Radgird Scrolling not working when i keep Radgrid inside Fieldset.

[shahid Aleem]

Hello I am trying to keep radgrid inside fieldset but when i keep radgrid inside fieldset, i am getting the grid's scroll bar but the horizontal width i am getting is what exactly with out scrollbars. i want the grid to be fit on the Browser with scroll bars. But it is long grid.

please reply.
Thanks.

[Pavlina]

Hello Shahid,

I am not completely sure that I understand what is the exact problem. It will be best if you open a formal support ticket, and provide more details on the issue, a sample code, or screenshots of the problem. I will review them and get back to you with more details.

Best wishes,
Pavlina
the Telerik team

[Bilal Ali]

I know its an old post, but still if you put Rad Grid inside <fieldset> tag using Batch Edit mode, scroll doesn't show.

<fieldset>
        <legend i>RadGrid</legend>

  <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" GridLines="None"
                AllowSorting="True" AllowPaging="True" PageSize="50" Width="800px" OnColumnCreated="RadGrid1_ColumnCreated">
                <ClientSettings>
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" ></Scrolling>
                </ClientSettings>
                <HeaderStyle Width="225px"></HeaderStyle>

            </telerik:RadGrid>
        </fieldset>

 

[Attila Antal]

Hi Bilal Ali,

Could you elaborate on the issue? What is happening exactly when trying to scroll? Perhaps there is a JavaScript error on the page that breaks the scrolling functionality.

I would advise turning AJAX off temporarily if enabled: Get more descriptive errors by disabling AJAX.

Once done, open the developer tools of the browser and monitor the console tab for JavaScript errors. Check out the Pro Tips section in the Debug JavaScript blog post. All JavaScript errors must be before trying the application.

I have tested the RadGrid with Scrolling inside a fieldset and it works as expected. See the following short video demo: http://somup.com/cqXXFRfIa8

Here are the code snippets for the sample I have tested:

Grid Markup:

<fieldset>
    <legend>RadGrid</legend>
    <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" GridLines="None"
        AllowSorting="True" AllowPaging="True" PageSize="50" Width="800px" OnColumnCreated="RadGrid1_ColumnCreated" OnNeedDataSource="RadGrid1_NeedDataSource">
        <ClientSettings>
            <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true"></Scrolling>
        </ClientSettings>
        <HeaderStyle Width="225px"></HeaderStyle>
    </telerik:RadGrid>
</fieldset>

 

C# - Code behind for binding data

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    RadGrid1.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(decimal)));
    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 < 70; i++)
    {
        int index = i + 1;

        DataRow row = dt.NewRow();

        row["OrderID"] = index;
        row["OrderDate"] = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0).AddHours(index);
        row["Freight"] = index * 0.1 + index * 0.01;
        row["ShipName"] = "Name " + index;
        row["ShipCountry"] = "Country " + index;

        dt.Rows.Add(row);
    }

    return dt;
}


protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
{

}

I hope this will prove helpful.

Kind regards,
Attila Antal
Progress Telerik

[Bilal Ali]

Dear Attila Antal,

Thanks for the quick response,  RadGrid scroll working as expected in other modes placed in fieldset tag. But i am using Batch Edit Mode with related RadComboBox using this :

Batch Editing Extensions - Related RadComboBoxes and Batch Validation

when I put my RadGrid with Batch Edit inside fieldset, scroll bars don't show in RadGrid.

[Attila Antal]

Hi Bilal Ali,

I have made a quick test using Batch Edit mode, and this is also working well. See the following short video I have created while testing the app: http://somup.com/cqX2YIfDXd. 

Here is the complete page code I have used.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadGrid_Scrolling_Inside_Fieldset.aspx.cs" Inherits="RadGrid_Scrolling_Inside_Fieldset" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <fieldset>
            <legend>RadGrid</legend>
            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" GridLines="None"
                AllowSorting="True" AllowPaging="True" PageSize="50" Width="800px"
                OnNeedDataSource="RadGrid1_NeedDataSource">
                <ClientSettings>
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true"></Scrolling>
                </ClientSettings>
                <HeaderStyle Width="225px"></HeaderStyle>
                <MasterTableView EditMode="Batch" CommandItemDisplay="Top">
                </MasterTableView>
            </telerik:RadGrid>
        </fieldset>
    </form>
</body>
</html>

 

C# - Code behind

using System;
using System.Data;
using Telerik.Web.UI;

public partial class RadGrid_Scrolling_Inside_Fieldset : System.Web.UI.Page
{
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        RadGrid1.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(decimal)));
        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 < 70; i++)
        {
            int index = i + 1;

            DataRow row = dt.NewRow();

            row["OrderID"] = index;
            row["OrderDate"] = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0).AddHours(index);
            row["Freight"] = index * 0.1 + index * 0.01;
            row["ShipName"] = "Name " + index;
            row["ShipCountry"] = "Country " + index;

            dt.Rows.Add(row);
        }

        return dt;
    }
}

 

I would like to help you out in this, but I will need more information that can help me replicate the problem or at least the current code you are using so that I can double check the settings. Unfortunately, without knowing what causes the issue, I am unable to tell you the solution.

Kind regards,
Attila Antal
Progress Telerik