Client-Side Column Hiding & Data-binding

[Valery]

Hi there,

I am showing and hiding some RadGrid columns from Java script (using columns' set_visible() method) and that works perfectly as long as no client-side data binding is involved. Say I have called the set_visible(false) method for a column once (before or after data-binding). When I call set_visible(true) it shows up... but gets hidden as soon as the table view's dataBind() method is called.

See the markup below:

1. Click the "Hide A" button and the column gets hidden;
2. Then click the "Show A" button and the column... stays hidden;

If you remove the rebindGrid() call from the setColumnVisibility() function everything works fine.

    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false">
        <MasterTableView>
            <Columns>
                <telerik:GridBoundColumn UniqueName="ID" DataField="ID" HeaderText="ID" />
                <telerik:GridBoundColumn UniqueName="A" DataField="A" HeaderText="A" />
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    <asp:LinkButton ID="BtnShowA" runat="server" Text="Show A" OnClientClick="return setColumnVisibility('A', true)" />
    &nbsp;/&nbsp;
    <asp:LinkButton ID="BtnHideA" runat="server" Text="Hide A" OnClientClick="return setColumnVisibility('A', false)" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script language="javascript" type="text/javascript">
            function rebindGrid() {
                var dataItems = [];
                for (var i = 0; i < 10; i++)
                    Array.add(dataItems, { ID: i, A: 'A ' + i });
                var masterTableView = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
                masterTableView.set_dataSource(dataItems);
                masterTableView.dataBind();
            }
            function setColumnVisibility(uniqueName, state) {
                var masterTableView = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
                var column = masterTableView.getColumnByUniqueName(uniqueName);
                column.set_visible(state);
                rebindGrid();
                return false;
            }
            Sys.Application.add_load(function () { rebindGrid(); });
        </script>
    </telerik:RadCodeBlock>

Best regards,
V.

[Tsvetoslav]

Hello Valery,

Do you get the same results if you use the hideColumn() method of the MasterTableView client object? This is the correct approach to hide columns on the client. Attached is a sample project demonstrating this.

Hope it helps.

Regards,
Tsvetoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Valery]

Hi Tsvetoslav,

Yep, it worked! Thanks! However I think this feature should be mentioned in the documentation.

Best regards,
V.