Single Row or Column Scrolling

[Rory]

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
or
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!

[Konstantin Dikov]

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">
        <Columns>
            <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">
                <ItemTemplate>
                    <div class="scrollable">
                        <%# Eval("Description") %>
                    </div>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

And the CSS:

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

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

Hope this helps.


Regards,
Konstantin Dikov
Telerik