Telerik RadGrid

[Fakhrul]

I’m working with Telerik RadGrid and need an example where filtering is enabled on the columns and vertical scrolling is also active. Could someone direct me to a demo or sample that demonstrates this setup?

[Rumen]

Hi again,

Based on your requirement to keep the vertical scrollbar visible while avoiding header misalignment in RadGrid, here are some important details and possible alternatives:

• Technical Limitation:
  The empty header space above the vertical scrollbar is intentionally rendered by RadGrid to maintain alignment between the column headers and the data rows when scrolling is enabled. Removing or hiding this space with CSS usually causes the headers and data columns to become misaligned, as you observed.

• Extending the Header:
  Extending the header to cover the scrollbar area is not natively supported by RadGrid’s rendering logic. Any attempt to do so (for example, by adjusting .rgHeaderDiv margins or widths) will likely result in misalignment when scrolling, especially if you use features like static headers or frozen columns.

• Workarounds:

  • The safest approach is to style the scrollbar itself using custom CSS, so its appearance matches your grid design, but leave the header structure unchanged. This preserves alignment and avoids layout issues.
  • If you need the header to look more integrated, you can experiment with background colors or gradients for the scrollbar area to visually blend it with the header row. For example:

    .RadGrid .rgHeaderDiv {
        background: linear-gradient(to right, #f0f0f0, #e0e0e0);
    }
    

    This does not remove the space but can help the appearance match your header styling.

• No Supported Way to Remove the Header Space:
  Currently, there is no supported or documented method to completely remove the scrollbar header area without risking misalignment. This is a known limitation of the grid’s layout system.

Regards,
Rumen
Progress Telerik

[Fakhrul]

Thank you Rumen for your help.

[Rumen]

Hi Fakhrul,

Here is the requested example:

ASPX

     <h2>RadGrid with Column Filtering and Vertical Scrolling</h2>
     
     <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
         <telerik:RadGrid 
             ID="RadGrid1" 
             runat="server" 
             AutoGenerateColumns="False"
             AllowPaging="True" 
             PageSize="20"
             AllowSorting="True"
             AllowFilteringByColumn="True"
             OnNeedDataSource="RadGrid1_NeedDataSource"
             Skin="Default"
             RenderMode="Lightweight">
             
             <MasterTableView 
                 DataKeyNames="OrderID" 
                 CommandItemDisplay="Top"
                 FilterItemStyle-Font-Size="Small">
                 
                 <Columns>
                     <telerik:GridBoundColumn 
                         DataField="OrderID" 
                         HeaderText="Order ID" 
                         UniqueName="OrderID"
                         DataType="System.Int32"
                         FilterControlWidth="50px"
                         CurrentFilterFunction="EqualTo">
                     </telerik:GridBoundColumn>
                     
                     <telerik:GridBoundColumn 
                         DataField="CustomerName" 
                         HeaderText="Customer Name" 
                         UniqueName="CustomerName"
                         FilterControlWidth="100px"
                         CurrentFilterFunction="Contains">
                     </telerik:GridBoundColumn>
                     
                     <telerik:GridBoundColumn 
                         DataField="OrderDate" 
                         HeaderText="Order Date" 
                         UniqueName="OrderDate"
                         DataType="System.DateTime"
                         DataFormatString="{0:MM/dd/yyyy}"
                         FilterControlWidth="100px">
                     </telerik:GridBoundColumn>
                     
                     <telerik:GridBoundColumn 
                         DataField="ShipCountry" 
                         HeaderText="Ship Country" 
                         UniqueName="ShipCountry"
                         FilterControlWidth="100px"
                         CurrentFilterFunction="Contains">
                     </telerik:GridBoundColumn>
                     
                     <telerik:GridBoundColumn 
                         DataField="ShipCity" 
                         HeaderText="Ship City" 
                         UniqueName="ShipCity"
                         FilterControlWidth="100px"
                         CurrentFilterFunction="Contains">
                     </telerik:GridBoundColumn>
                     
                     <telerik:GridNumericColumn 
                         DataField="Freight" 
                         HeaderText="Freight" 
                         UniqueName="Freight"
                         DataType="System.Decimal"
                         DataFormatString="{0:C2}"
                         FilterControlWidth="70px"
                         CurrentFilterFunction="EqualTo">
                     </telerik:GridNumericColumn>
                     
                     <telerik:GridBoundColumn 
                         DataField="ShipName" 
                         HeaderText="Ship Name" 
                         UniqueName="ShipName"
                         FilterControlWidth="100px"
                         CurrentFilterFunction="Contains">
                     </telerik:GridBoundColumn>
                 </Columns>
             </MasterTableView>
             
             <ClientSettings>
                 <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="400px" />
                 <Selecting AllowRowSelect="True" />
             </ClientSettings>
             
             <FilterMenu EnableImageSprites="False" />
         </telerik:RadGrid>
     </telerik:RadAjaxPanel>
     
     <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" />

ASPX.CS

    protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        // Bind the grid to data source
        // IMPORTANT: Always use NeedDataSource for RadGrid data binding
        RadGrid1.DataSource = GetOrdersData();
    }

    /// <summary>
    /// Creates sample data for the grid demonstration
    /// In a real application, this would typically query a database
    /// </summary>
    private DataTable GetOrdersData()
    {
        DataTable dt = new DataTable();

        // Define columns
        dt.Columns.Add("OrderID", typeof(int));
        dt.Columns.Add("CustomerName", typeof(string));
        dt.Columns.Add("OrderDate", typeof(DateTime));
        dt.Columns.Add("ShipCountry", typeof(string));
        dt.Columns.Add("ShipCity", typeof(string));
        dt.Columns.Add("Freight", typeof(decimal));
        dt.Columns.Add("ShipName", typeof(string));

        // Add sample data (50 rows for scrolling demonstration)
        string[] countries = { "USA", "UK", "Germany", "France", "Italy", "Spain", "Canada", "Australia" };
        string[] cities = { "New York", "London", "Berlin", "Paris", "Rome", "Madrid", "Toronto", "Sydney" };
        string[] customers = { "Alfreds", "Ana Trujillo", "Antonio Moreno", "Around the Horn", "Berglunds",
                                   "Blauer", "Blondel", "Bólido", "Bon app", "Bottom-Dollar" };

        Random random = new Random();

        for (int i = 1; i <= 50; i++)
        {
            DataRow row = dt.NewRow();
            row["OrderID"] = 10000 + i;
            row["CustomerName"] = customers[random.Next(customers.Length)] + " Company " + i;
            row["OrderDate"] = DateTime.Now.AddDays(-random.Next(1, 365));
            row["ShipCountry"] = countries[random.Next(countries.Length)];
            row["ShipCity"] = cities[random.Next(cities.Length)];
            row["Freight"] = Math.Round((decimal)(random.NextDouble() * 500), 2);
            row["ShipName"] = "Ship Name " + i;
            dt.Rows.Add(row);
        }

        return dt;
    }

You can enable the Column Filtering by setting AllowFilteringByColumn="True" and AllowScroll="True" to enable the scrolling. The UseStaticHeaders="True" keeps headers fixed while scrolling. The ScrollHeight="400px" sets the scrollable area height.

Regards,
Rumen
Progress Telerik

[Fakhrul]

Thank you very much, Rumen.

I was getting a slight error: ---> No property or field 'FilterExpression' exists in type 'DataRowView' (at index 0) but managed to fix.

[Rumen]

You are welcome, Fakhrul! Glad that you've managed to solve it!

[Fakhrul]

Hi Rumen, 

I have a question. In the right side the header, there is a space reserved for scrollbar after the last column.. Can this space match the styling of the header and filter row or can the header be extended all the way up-to the right (without any side affects e.g. misalignment)?

Thanks.

[Fakhrul]

Added a comment in the above thread

[Rumen]

You can either customize the scrollbar appearance with CSS:

 

        <style>
            /* Custom scrollbar styling for RadGrid */

            /* Firefox scrollbar styling */
            .RadGrid .rgDataDiv {
                scrollbar-width: thin;
                scrollbar-color: red #e0e0e0;
            }

                /* WebKit browsers (Chrome, Safari, Edge) - Scrollbar width */
                .RadGrid .rgDataDiv::-webkit-scrollbar {
                    width: 12px;
                }

                /* Scrollbar track with gradient */
                .RadGrid .rgDataDiv::-webkit-scrollbar-track {
                    background: linear-gradient(to right, #f0f0f0, #e0e0e0);
                    border-left: 1px solid #d0d0d0;
                }

                /* Scrollbar thumb (the draggable part) with gradient */
                .RadGrid .rgDataDiv::-webkit-scrollbar-thumb {
                    background: linear-gradient(to right, #c0c0c0, #a0a0a0);
                    border-radius: 6px;
                    border: 1px solid #909090;
                }

                    /* Scrollbar thumb on hover */
                    .RadGrid .rgDataDiv::-webkit-scrollbar-thumb:hover {
                        background: linear-gradient(to right, #a0a0a0, #808080);
                    }

                    /* Scrollbar thumb when active/clicked */
                    .RadGrid .rgDataDiv::-webkit-scrollbar-thumb:active {
                        background: linear-gradient(to right, #909090, #707070);
                    }

                /* Scrollbar buttons (up/down arrows) */
                .RadGrid .rgDataDiv::-webkit-scrollbar-button {
                    background: linear-gradient(to right, #d0d0d0, #b0b0b0);
                    border: 1px solid #a0a0a0;
                    height: 12px;
                }

                    /* Scrollbar buttons on hover */
                    .RadGrid .rgDataDiv::-webkit-scrollbar-button:hover {
                        background: linear-gradient(to right, #b0b0b0, #909090);
                    }

            /* Alternative: Match Default skin column header gradient more closely */
            .RadGrid_Default .rgDataDiv::-webkit-scrollbar-track {
                background: linear-gradient(to right, #e8e8e8, #d8d8d8);
                border-left: 1px solid #c8c8c8;
            }

            .RadGrid_Default .rgDataDiv::-webkit-scrollbar-thumb {
                background: linear-gradient(to right, #b8b8b8, #989898);
                border-radius: 6px;
                border: 1px solid #808080;
            }

                .RadGrid_Default .rgDataDiv::-webkit-scrollbar-thumb:hover {
                    background: linear-gradient(to right, #989898, #787878);
                }
        </style>

 

or completely hide the vertical scrollbar:

<style>
    .RadGrid .rgDataDiv {
        overflow-y: hidden !important;
    }
</style>

 

 

[Fakhrul]

Hi Rumen, 

Sorry, if I was not clear and caused you misunderstanding. 

We are after scrollbar header not the scrollbar itself.
It seems scrollbar has an empty header itself (space above the scrollbar in the header).
Please see attached pic.

Can scrollbar header match the styling of the header and filter row or can the scrollbar header be removed without any side affects e.g. misalignment?

Thank you.

[Rumen]

Thank you for the additional information! 

You can remove the little header space above the vertical scrollbar using the following CSS class:

<style>
    .rgHeaderDiv {
        margin-right: 0px !important;
    }
</style>

[Fakhrul]

Hi Rumen, 

I think we tried it and it causes header to move to the right and causes misalignment with data.
I was looking for an alternative solution without causing misalignment (but still show the scrollbar). 
Thanks.