This is a migrated thread and some comments may be shown as answers.

Single Row or Column Scrolling

1 Answer 31 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Rory asked on 28 Jul 2014, 07:52 PM
Hello everyone,

I am wondering if there is a way to configure the grid so that a single column or row is scrollable (not the entire grid).  So for instance, say we have a grid filled with customer sales history data.  The columns are: Name, Address, Phone, Sales_Number and Description.  The fields other than Description are mostly fixed size, but the description field could be anywhere from 20 characters to 1000 depending on the particular sale.  Is there a way to set it so that either:

1) the column "Description" is set to be scrollable above a certain height or value
2) the rows are set to be scrollable above a certain height

For clarity:  I'm not asking about the number of records visible in the grid or per page.  I'm talking about a single row or column.  I realize you can either set a value for height or autosize, but in the oddball cases where a particular cell is large it really ruins the readability of the information in the grid and I'm trying to find a solution besides just cutting of the data and forcing them to open the record in another window to view the full description. 

Thanks for the help!

1 Answer, 1 is accepted

Sort by
Konstantin Dikov
Telerik team
answered on 30 Jul 2014, 11:42 AM
Hello Rory,

For achieving the result that you need, you will have to use GridTemplateColumn and wrap the long text in a DIV element, where you are setting overflow property of that element to scroll

Following is a simple demonstration on how to achieve scrollable cell:
<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" Width="500px">
    <MasterTableView AutoGenerateColumns="false">
            <telerik:GridBoundColumn DataField="ID"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="FirstName"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="LastName"></telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="Description" HeaderStyle-Width="300px">
                    <div class="scrollable">
                        <%# Eval("Description") %>

And the CSS:
<style type="text/css">
    .scrollable {
        overflow: scroll;
        overflow-x: hidden;
        max-height: 70px;

For your convenience I am attaching a sample page as well.

Hope this helps.

Konstantin Dikov

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Asked by
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question