RadGrid Column Resizing - Min & Max width

[suneetha]

Hi,

1. Is it Possible to specify Min & Max Columnwidth for column resizing in RadGrid?If possible please me how to do this?
2.In the ViewMode of the grid how to display full numbers as tooltip upon mouseover,Truncated numbers will be identified by three dots at the end(to indicate that there are more digits)?


Regards,
Suneetha

[Dimo]

Hi Suneetha,

You cannot set min/max column widths, but you can use the ColumnResizing client event to check what the new column width would be and cancel/modify it:

http://www.telerik.com/community/forums/aspnet-ajax/grid/allowcolumnresize---can-a-minimum-column-size-be-enforced.aspx

After cancelling the event, you can resize the column to a preferred min/max width with the control's API -

http://demos.telerik.com/aspnet-ajax/grid/examples/client/clientsideapi/defaultcs.aspx

http://www.telerik.com/help/aspnet-ajax/grid-resizing-columns.html

Greetings,
Dimo
the Telerik team

[Dave Wolf]

I know this thread is old, but it is often referenced on this matter.  If someone is looking for a good starting spot for this, the following onColumnResizing function works well for setting a min/max width.

function onColumnResizing(s, e) {

    var column = e.get_gridColumn();

    var min = 50;

    var max = 400;

    if (column._columnResizer && column._columnResizer._currentWidth) {

        if (column._columnResizer._currentWidth > max) {

            e.set_cancel(true);

            column._columnResizer._resizerToolTip.innerHTML = column._columnResizer._applyToolTipText(max);

            column._columnResizer._currentWidth = max;

            s.get_masterTableView().resizeColumn(column.get_element().cellIndex, max);

 

        }

        else if (column._columnResizer._currentWidth < min) {

            e.set_cancel(true);

            column._columnResizer._resizerToolTip.innerHTML = column._columnResizer._applyToolTipText(min);

            column._columnResizer._currentWidth = min;

            s.get_masterTableView().resizeColumn(column.get_element().cellIndex, min);

        }

    }

}

[Deepak]

Hi Dave,

  This is Deepak, I have one issue with  this below code. It is working properly when there is a single radgrid (i.e while re sizing the columns,
minimum width is applied). But in case of nested radgrid, when we are re sizing any column in child table and if it goes below the minimum width then that minimum width is not getting applied to its columns whereas in case of parent table this minimum width is getting applied correctly to the columns.

 function ColumnResizing(s, e) {
        var column = e.get_gridColumn();
        var min = 85;

        if (column._columnResizer && column._columnResizer._currentWidth) {
            if (column._columnResizer._currentWidth < min) {
                e.set_cancel(true);
                column._columnResizer._currentWidth = min;
                s.get_masterTableView().resizeColumn(column.get_element().cellIndex, min);
            }
        }
    }




<telerik:RadGrid ID="rgClientCards" runat="server" Visible="False" AllowPaging="True" AllowSorting="True" Width="1490px" PageSize="15" 
                OnDetailTableDataBind="rgClientCards_DetailTableDataBind" CellSpacing="0" GridLines="None" SkinID="RadGridOffice" Skin="Office2007" 
                AllowAutomaticInserts="false" EnableViewState="true" ShowStatusBar="true" OnNeedDataSource="rgClientCards_NeedDataSource" OnItemCommand="rgClientCards_ItemCommand">
                
                <PagerStyle Mode="NumericPages"></PagerStyle>
                <ClientSettings>
                <ClientEvents OnFilterMenuShowing="gridFilterMenuShowing"/>
                    <Resizing AllowColumnResize="True" ResizeGridOnColumnResize="False"></Resizing>
                    <ClientEvents OnColumnResizing="ColumnResizing" />
                    
                    
                </ClientSettings>

                <MasterTableView AutoGenerateColumns="False" AllowFilteringByColumn="true" DataKeyNames="ClientCardID" Width="1490px" GroupLoadMode="Server">
                  
                    <DetailTables>
                        <telerik:GridTableView DataKeyNames="ProgramID" Name="Client_Programs" 
                            AllowFilteringByColumn="false" AutoGenerateColumns="False">
                            <Columns>
                                <telerik:GridBoundColumn HeaderText="Program ID" DataField="ProgramID" HeaderButtonType="TextButton" Visible="false" UniqueName="ProgramID"/>
                                <telerik:GridBoundColumn HeaderText="Fattail ID" DataField="FattailID" HeaderButtonType="TextButton"/>
                                <telerik:GridBoundColumn HeaderText="Description" DataField="Description" HeaderButtonType="TextButton"/>


                            </Columns>
                           
                            <NoRecordsTemplate>
                                No programms attached
                            </NoRecordsTemplate>
                        </telerik:GridTableView>
                    </DetailTables>

                    <HeaderStyle Wrap="false"/>
                                      
                    <Columns>
                        <telerik:GridBoundColumn HeaderText="Client Card ID" DataField="ClientCardID" UniqueName="ClientCardID" AutoPostBackOnFilter="true" Visible="false" />
                        <telerik:GridBoundColumn HeaderText="Client ID" DataField="ClientID" UniqueName="ClientID" AutoPostBackOnFilter="true" Visible="false" />
                        <telerik:GridBoundColumn HeaderText="Client Name" DataField="Name" UniqueName="Name" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains">
                            <HeaderStyle Width="350px"></HeaderStyle>
                        </telerik:GridBoundColumn>
                    </Columns>

                <NoRecordsTemplate>
                    Client cards repository is empty
                </NoRecordsTemplate>

                <PagerStyle Mode="NextPrevAndNumeric" />
                       
                </MasterTableView>

                <ClientSettings EnablePostBackOnRowClick="false">
                    <Selecting AllowRowSelect="true" />
                    
                </ClientSettings>
                <GroupingSettings CaseSensitive="false" />
            </telerik:RadGrid>



Thanks

[Eyup]

Hello Deepak,

Please try to replace s.get_masterTableView() with e.get_gridColumn().get_owner() and let us know about the result.

Regards,
Eyup
Telerik