Resize columns width of MasterTableView and DetailView

[Daniel]

Hello,

I am working on a project with a RadGrid.
In the RadGrid, each column has a filter.
The grid has a DetailView.

The requirements of my project are as follows: 

• All data in rows should not be word wrapped. 
• Each column’s width should be equal to that column’s content.

The same rules should also apply to DetailView.

Thanks,
Daniel.

[Jayesh Goyani]

Hello,

Please add below property in your column.

<ItemStyle Wrap="false" />

Let me know if any concern.

Thanks,
Jayesh Goyani

[Daniel]

Hello Jayesh Goyani,

Thank you for your response.

Since my RadGrid’s content is dynamic, I put the code:

<ItemStyle Wrap="false" />

into the appropriate event: 

Private Sub RadGrid1_ColumnCreated(sender As Object, e As GridColumnCreatedEventArgs) Handles RadGrid1.ColumnCreated
        e.Column.ItemStyle.Wrap = False
End Sub

Unfortunately it did not help; instead it "cut" the data.

Besides, it still does not fill the requirement of my project: a column’s width should be equal to the width of its content.

I have attached a video that showing the problems I have:   [Row content get “Cut”],

MasterTableView’s columns’ width and DetailView’s columns’ width are both very wide,  regardless of content.

Video link: [Columns width are very wide].

 
I’ll be glad to get a solution.

Thank you,
Daniel.

[Princy]

Hi Daniel,

You can try the resizeToFit method to resizes the column to fit the widest cell's content without wrapping.
For the DetailTables to have this effect you can set the hierarchy load mode to client and add this javascript function to your scripts:

JS:

function onHierarchyExpanded(sender, eventArgs) {
    var indexOfDetailedTable = eventArgs.get_itemIndexHierarchical();
    var numberOfColumns = sender.get_detailTables()[indexOfDetailedTable].get_columns().length;
    for (var i = 0; i < numberOfColumns-1; i++) {
        sender.get_detailTables()[indexOfDetailedTable].get_columns()[i].resizeToFit();
    }
}

Here on hierarchy expanded event we take the index of the detailed table that is being expanded (indexOfDetailedTable) and after that also take the number of columns that are in this detailed table (numberOfColumns variable). Finally, we iterate through all the columns, except the last one and apply the resizeToFitmethod. The reason to not include the last column is that it can only take all the remaining space and can't get any smaller.

NOTE: This approach works for only one level of hierarchy.

Thanks,
Princy

[Daniel]

Hi Princy,

Thank you for your answer!

Indeed I added the code as you suggested:

ASPX:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function pageLoad() {
                    var grid = $find("<%= RadGrid1.ClientID %>");
        var columns = grid.get_masterTableView().get_columns();
        for (var i = 0; i < columns.length; i++) {
            columns[i].resizeToFit();
        }
    }



    function onHierarchyExpanded(sender, eventArgs) {
        var indexOfDetailedTable = eventArgs.get_itemIndexHierarchical();
        var numberOfColumns = sender.get_detailTables()[indexOfDetailedTable].get_columns().length;
        for (var i = 0; i < numberOfColumns - 1; i++) {
            sender.get_detailTables()[indexOfDetailedTable].get_columns()[i].resizeToFit();
        }
    }
            </script>
        </telerik:RadCodeBlock>

                    <telerik:RadGrid ID="RadGrid1" runat="server" MasterTableView-EnableHeaderContextMenu="true" Height="700px" Width="1150px" Skin="Web20" MasterTableView-HierarchyLoadMode="Client">
                        <ClientSettings>
                            <Scrolling AllowScroll="True"></Scrolling>
                            <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" />
                            <ClientEvents OnHierarchyExpanded="onHierarchyExpanded" />
                        </ClientSettings>
                    </telerik:RadGrid>

However, it doesn’t work unless I add the following code to my project:

RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = True

Then, it works.

Unfortunately, there is another problem: the filters get “cut”. Please see the problem in the following video:
[video link]

I'd love to get a solution for the filters too. That will really be a perfect solution!!

 Thank you very much,
Daniel.

[Princy]

Hi Daniel,

Please try setting the following CSS for your Grid:

CSS:

<style type="text/css">
  div.RadGrid .rgFilterRow td
  {
   <%-- Adjust the padding according to how you need--%>
   padding-right: 30px;
  }
</style>

Thanks,
Princy

[Daniel]

Hi Princy,

Thanks for your response.

I used the CSS code you gave me, but it does not affect the filter fields - see video.

I would like to have something like this pseudo cod:

CONST MININUM = 70px;
CONST MAXINUM = 500px;
CONST FILTER_BUTTON_SIZE = 20px;

For each column in columns
Column.resizeToFit();
if (Column_Width < MININUM)
    {
    Column_Width = MININUM;
    }
    else if (FilterButtonSize>MAXINUM)
    {
    Column_Width = MAXINUM;
    }
    Filter_TextBox.Width = Column_Width - Filter_Button_Size;
Next

I’ll be glad to get a solution for this problem.

Thank you,
Daniel.

[Princy]

Hi Daniel,

Please take a look at the following code library which will shows how to make the filtering controls (textboxes, RadNumericTextBoxes, RadDatePickers) resize in real time together with the RadGrid columns.
How to make RadGrid Filtering Controls Resize Together with the Columns

Thanks,
Princy

[Daniel]

Hi Princy,

Thanks for your response!

The link you gave me is a partial solution. When the column’s width is particularly small, it’s very hard to insert data, and certainly not possible to see what the user enters – see video.

So I have tried to limit the minimum column’s width by the following JS code: 

function pageLoad() {
   var grid = $find("<%= RadGrid1.ClientID %>");
   var columns = grid.get_masterTableView().get_columns();
   var MAX_WIDTH = 500;
   var MIN_WIDTH = 70;

   for (var i = 0; i < columns.length; i++) {
       var element = columns[i].get_element();
       columns[i].resizeToFit();
       if (element.clientWidth < MIN_WIDTH) {
           grid.get_masterTableView().resizeColumn(i, MIN_WIDTH);
       }
       else if (element.clientWidth > MAX_WIDTH)
           grid.get_masterTableView().resizeColumn(i, MAX_WIDTH);
   }

This solution works!!! The only question I still have is how to write the following code in JS? This code is similar to the code in your code-library project.

e.Column.FilterControlWidth = Unit.Percentage(60)

Thank you,
Daniel.

[Princy]

Hi Daniel,

You can access the filter textbox in clientside and set its width as follows:

JS:

<script type="text/javascript">
    function pageLoad() {
        var grid = $find("<%= _RadGrid1.ClientID %>");
        var tableView = grid.get_masterTableView();
        var columns = grid.get_masterTableView().get_columns();
        //access the filter row
        var filterRow = $telerik.$(grid.get_element()).find(".rgFilterRow");
        var MAX_WIDTH = 500;
        var MIN_WIDTH = 70;
        for (var i = 0; i < columns.length; i++) {
            var element = columns[i].get_element();
            columns[i].resizeToFit();
            if (element.clientWidth < MIN_WIDTH) {
              grid.get_masterTableView().resizeColumn(i, MIN_WIDTH);
              //access the filter textbox for the columns
              var txtfilter = $telerik.findElement(filterRow[0], columns[i]._data.UniqueName)
              if (txtfilter != null) {
                  //set width
                  txtfilter.style.width = MIN_WIDTH;
                }
            }
            else if (element.clientWidth > MAX_WIDTH) {
                grid.get_masterTableView().resizeColumn(i, MAX_WIDTH);
                var txtfilter = $telerik.findElement(filterRow[0], columns[i]._data.UniqueName)
                if (txtfilter != null) {
                    txtfilter.style.width = MAX_WIDTH;
                }
            }
        }
    }
</script>

Thanks,
Princy