Client side column show/hide and column widths

[Ryan]

Hi,

I have a radgrid with several columns without a width setting, and others with a width set (e.g. HeaderStyle-Width="108px").
The table itself has no specific width set (so it just fills the page).

<telerik:RadGrid ID="rgOFR" runat="server" AllowMultiRowSelection="true" AutoGenerateColumns="false"
        AllowPaging="true" PageSize="20" AllowFilteringByColumn="true"
        onneeddatasource="rgOFR_NeedDataSource" onitemcreated="rgOFR_ItemCreated"
        onitemdatabound="rgOFR_ItemDataBound" >

    <MasterTableView AllowSorting="true" TableLayout="Fixed" CommandItemDisplay="Bottom">

I need to hide columns on the client side, however this seems to then shuffle the columns along and leave the width in the original position. (Sorry, hard to explain in text!)

e.g.

|           Column 1          ||           Column 2          ||  Column 3  ||                      Column 4                    | 

Hide column 2 and you get this:

|           Column 1          ||           Column 3          ||  Column 4  |

Where I would expect (and require!):

|           Column 1          ||  Column 3  ||                      Column 4                    |  



Any advice would be appreciated.

Regards,

Ryan

[Richard]

Ryan:

If you've not already done so, I'd suggest taking a close look at the Grid/Client-Side API online demo. If you hide a column, the columns to the right of it move over and preserve their original width.

I'd suggest taking a close look at the client settings and comparing them against your own.

<telerik:RadGrid id="RadGrid1" DataSourceID="SqlDataSource1" runat="server"
 AllowPaging="True" AllowSorting="True" GridLines="None" PageSize="10" Width="97%">
    <PagerStyle Mode="NumericPages"></PagerStyle>
    <ClientSettings AllowColumnHide="True" AllowRowHide="True" AllowColumnsReorder="True" ReorderColumnsOnClient="True">
        <Resizing EnableRealTimeResize="True" ResizeGridOnColumnResize="True" AllowColumnResize="true" ClipCellContentOnResize="false"></Resizing>
        <ClientEvents OnGridCreated="GetGridObject"></ClientEvents>
    </ClientSettings>
</telerik:RadGrid>

Hope this helps!

[Ryan]

Thank you for your suggestion - however its still doing the same. 
(I've got the clients settings for resizing as your message, and tried matching all the other settings)

One variable from the example is that I'm setting the column widths in my code, rather than just letting the grid choose the sizes for columns. Removing any settings for header width on all the columns just makes them all the same size (which makes it hard to judge the effect of hiding a column...). I need to set specific widths on certain columns though.
Interestingly - when I remove a column, my content doesn't then expand to fill the space left by the missing row as does the example (note that most of my columns haven't been given a width, just a few that I need a specific width). 

[Ryan]

[Obviously the first thing I try after posting this worked...]

Resolution: I had TableLayout="Fixed" set on master table view

<MasterTableView AllowSorting="true" TableLayout="Fixed" CommandItemDisplay="Bottom">

This needs removing for the column resizing to work. (Hopefully I didn't add that for any specific reason.)

I'd note that this still wouldn't be the behavior I'd expect and would suggest it could be considered a bug(?) - as I think the expected result of hiding a column would leave other columns at their set size and just shuffle the table around.

Edit: Ok, the reason I had TableLayout = fixed was to stop the table from expanding off the page to the right. Now I seem to have the choice between keeping the table on one page (absolutely required in this case), and being able to hide columns (really need this though). I've tried wrapping the grid in another div, but can't seem to keep it on the same page. Will try see what I can do...
I'm more convinced this should be classed as a bug now, as the most likely time to require hiding columns would be when you have lots of them in a small space.

[Tsvetina]

Hello Ryan,

This is expected behavior because when you have TableLayout="Fixed" the column widths cannot auto-size to fill the newly available space.
A work around would be to handle the client OnColumnHidden event and switch the layout to auto and then back, so that the columns manage to auto-size:

<ClientSettings>
    <ClientEvents OnColumnHidden="onColumnHidden" />
</ClientSettings>

<script type="text/javascript">
    function onColumnHidden(sender) {
        var masterTableView = sender.get_masterTableView().get_element();
        masterTableView.style.tableLayout = "auto";
        window.setTimeout(function () { masterTableView.style.tableLayout = "fixed"; },0);
    }
</script>

I hope this helps.

Greetings,
Tsvetina
the Telerik team

[Ryan]

Thank you for your reply.

This unfortunately still doesn't work - changing the layout to auto will resize the columns initially*, but changing back to fixed will resize the columns incorrectly (they resize wrongly as before).
For illustration, i changed the javascript to:
window.setTimeout(function() { masterTableView.style.tableLayout = "fixed"; }, 2000);
i.e. Wait 2 seconds before changing back to fixed, and can see that although the table does resize initially, when it changes back it resizes again to be incorrect.

I'm beginning to wonder if the only way to get this working would be to sweep the table in javascript and resize the columns each time I show/hide a column. I'm still not sure this will force an auto-resize on the other columns, but I can live with the table being shorter than the page (just not with it expanding off the page).


(*note: The columns all resize, but resize wrongly, i.e. they all just share the width of the table out evenly between them, and the page expands to the right.)

[Ryan]

Just as a note for anyone finding this thread in the future, I gave up on client side row hiding, and used server side:

rgOFR.MasterTableView.Columns.FindAllByDataField("Buffer")[0].Display = false;

Note that I used .Display, rather than .Visible: .Visible also doesn't give my desired table behaviour, while .Display does. 

[Ryan]

Just as a note for anyone finding this thread in the future, I gave up on client side row hiding, and used server side:

rgOFR.MasterTableView.Columns.FindAllByDataField("Buffer")[0].Display = false;

Note that I used .Display, rather than .Visible: .Visible also doesn't give my desired table behaviour, while .Display does. 

Edit: Double post - please remove. (Sorry - got a repeated page error before while trying to post)

[Mike]

I have a similar issue.  I have a four level hierarchical grid, TableLayout is "Fixed" to allign columns between levels, template column with either a Label or RadNumericTextBox, widths defined in pixels.  As I hide columns on the client using java script, the grid appears to change the TableLayout to "Auto" because the columns widths adjust smaller.  After hiding several columns, the template column with the RadNumericTextBox does not fully display in the table cell (i.e. is truncated). Did anyone ever see this issue or resolve the issue?

[Tsvetina]

Hi Mike,

There is no such scenario where RadGrid changes the table-layout to auto on its own. The scenario is not exactly the same, so I would ask you to either provide us with a live url and the grid declaration or send us a runnable sample that reproduces the problem through our ticketing system and we will inspect the problem.

All the best,
Tsvetina
the Telerik team