Column Width relative to its content "dynamically"

[TravisTr]

Hi, I have a simple RadGrid control that displays student records, no sorting or anything. However it is a hiararchial rid where the students' grades and other Ids will be displayed in a detail table and visible to only a specific administrative roles. 

This Radgrid was created programmacally (partly due to role specifics) using this guidlines found at http://www.telerik.com/help/aspnet-ajax/grid-programmatic-creation.html (Create hierarchical structure programmatically after RadGrid control is declared in the ASPX file) where the function DefineGridStructure()  is called in Page_Init() event handler.

My lates requirement concern about how the grid displays its content. The requirement is that the column width must be set relative to the column's content in the Detail Table.  I'm trying to achieve the look of this nested detail table seen here (where the "Company Name" column-width varies relatively to the string length inside it) However this example is done in declarative mode as you can see >> http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/nestedviewtemplate/defaultcs.aspx where the result detail table seems to resize and best fits the cell content.

Do I have options to make my detail table achieve that look programmatically? I only need to deal with 1st level detail table.

I've tried to extract data in the myUserRig_ItemDataBound event but what's happening is that the Id's column (whose width needs to be set relative to the lengthy Id) will be reset to whatever assigned to HeaderStyle.Width in DefineGridStructure() (which makes the content appear to be cut off)  as soon as I expand other record from the parent rid. Please help.

[TravisTr]

Found this workaround but my RadGrid is only visible as a result of a search-button click. If I attach this client best-fit function to the 'search' button, would it resize every column in the grid to 'best fit' its content? resizeToFit() will do the job, doesn't it?
http://www.telerik.com/help/aspnet-ajax/grid-gridcolumn-resizetofit.html

How/where do I get Detail-Table behave the same way, didn't get anything out of ItemCommand event handler, client side javascripts for detail tables?
Any help?

[Venelin]

Hello Travis,

You are on the right direction. This functionality can be achieved using the client-side method resizeToFit() as you mentioned. Here is the approach in few simple steps:

1. Add these lines in your code-behind where you define the grid:

C#:

RadGrid1.MasterTableView.HierarchyLoadMode = GridChildLoadMode.Client;
RadGrid1.ClientSettings.Resizing.AllowColumnResize = true;
RadGrid1.ClientSettings.Resizing.AllowResizeToFit = true;
RadGrid1.ClientSettings.ClientEvents.OnHierarchyExpanded = "onHierarchyExpanded";

The first line switches the hierarchy load mode to client, the second and the third are needed in order to make the javascript function onHierarchyExpanded to take effect.

2. Add this javascript function to your scripts:

JavaScript:

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 resizeToFit method. 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 as you said in your requirement.

You can find attached a sample project that demonstrates the approach.

Regards,
Venelin
Telerik