Align Columns in Master and Child Views

[Dale]

Hello,

Trying to align the master table columns with the child (DetailTable) columns.  The idea is that a user can see the master record and then expand the hierarchy to see the child view records which are audit records of the master ie same structure.  When user resizes a column, the child column also resizes to the same size (I do not display column headers in child view).

I'm using the code examples on resizing and it works well on the master, I just need to somehow translate that to the child view.

Thanks in advance,
Dale

[Vlad]

Hello Dale,

Please check this demo for more info:
http://demos.telerik.com/aspnet-ajax/Grid/Examples/Hierarchy/SelfReferencing/DefaultCS.aspx

You can use OnColumnResized event to get the column width:
function ColumnResized(sender, eventArgs)
{
    var cell = eventArgs.get_gridColumn().get_element();
    var width = cell.offsetWidth;
    var index = cell.cellIndex;

    var detailTable = sender.get_detailTables()[0];
    var detailColumn = detailTable.get_columns()[index];

    detailTable.resizeColumn(index, width);
}

Best wishes,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Dale]

Hi,

The demo http://demos.telerik.com/aspnet-ajax/Grid/Examples/Hierarchy/SelfReferencing/DefaultCS.aspx doesn't work, the example http://www.telerik.com/help/aspnet-ajax/grdselfreferencinghierarchy.html which is is the same code except for the JavaScript code for the button click does.  However the columns still are not aligned. 

The OnColumnResized event works but slowly the columns all become out of alignment, even if you fix them all to be the same at the start. Once you move one column the grid reshuffles the other columns to accommodate the left over space, unsure if the event triggers for all the other columns.  It's quite slow when you have to loop for each detail table and resize them individually.  I also could not find a way of using the master tables unique column name to return the detail table column index using that unique name.

 

Regards,

Dale

[Dale]

Hello,

I've had some luck in aligning the columns but it is not 100%.  I'm using server side binding so when the user expands the group I've placed code in the Grids PreRender and Load events to change the detail tables column widths to be the same as the master  column using the code below:

gc.HeaderStyle.Width = new WebUnit(gcMaster.HeaderStyle.Width.Value, gcMaster.HeaderStyle.Width.Type);

What happens is that the grid is rendered to the browser but the colgroup widths for the detail table is using the old widths (Note: original widths are defined in code not in aspx).  If I perform a postback and Rebind() the grids rendered html to the browser for the detail table is now correct.  How do I make this happen ? 

Also occasionly after a postback (Button that I use to refresh data) the master table loses its column widths and they are reset to what they were before the user resized them.  Is there any way of stopping this from happening ?

Thanks,

Dale

[Iana Tsolova]

Hi Dale,

Could you please send us your code (aspx, cs) so I could have a better look into your aide and implementation. Thus I could try finding a resolution for the issues your are facing.

Additionally, I suggest that you review this article on aligning columns in hierarchy.

Greetings,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Pooya]

I have the same problem and managed to make it work using JQuery, after the page is loaded.

But there is a major issue when using item templates which contain tables; spent 3 days so far and still doesn't get aligned properly.