Problems Understanding showColumn/hideColumn

[Chris]

I am attempting to use a toolbar to hide and show columns client side depending upon the desire of the user. However, when I use the .set_visible(true/false), only the column header is hidden/shown. When I use masterTable.showColumn(idx), nothing changes. I'm pretty sure I might be doing something wrong, but I'm not sure what.

Here's the definition of the toolbar:

<telerik:RadToolBar ID="MainToolBar" runat="server" Skin="Vista" AutoPostBack="true"
    OnClientButtonClicked="ToolbarButtonClicked">
    <ExpandAnimation Type="OutQuad" Duration="300" />
    <CollapseAnimation Type="OutQuad" Duration="300" />
    <Items>
        <telerik:RadToolBarButton runat="server" Text="Bulk Edit" PostBack="false" ToolTip="Allows you to make sweeping changes to multiple cost centers"
            OnLoad="CheckForPortalAdmin" />
        <telerik:RadToolBarButton runat="server" Text="Bulk Approve" PostBack="false" ToolTip="Allows you to approve multiple cost centers at a time."
            OnLoad="CheckForPortalAdmin" />
        <telerik:RadToolBarButton IsSeparator="true" OnLoad="CheckForPortalAdmin" />
        <telerik:RadToolBarButton Checked="false" Text="Previous Budget" CheckOnClick="true"
            AllowSelfUnCheck="true" PostBack="false" CheckedImageUrl="Images/columnremoveicon.gif"
            Group="PBDG" ImageUrl="Images/columnicon.gif" />
        <telerik:RadToolBarButton Checked="false" Text="Previous Actual" CheckOnClick="true"
            AllowSelfUnCheck="true" PostBack="false" CheckedImageUrl="Images/columnremoveicon.gif"
            Group="PACT" ImageUrl="Images/columnicon.gif" />
        <telerik:RadToolBarButton Checked="true" Text="Year To Date" CheckOnClick="true"
            AllowSelfUnCheck="true" PostBack="false" CheckedImageUrl="Images/columnremoveicon.gif"
            Group="YTD" ImageUrl="Images/columnicon.gif" />
        <telerik:RadToolBarButton IsSeparator="true" />
        <telerik:RadToolBarButton runat="server" Text="Export" ImageUrl="~/Images/export.gif"
            CommandName="Export">
        </telerik:RadToolBarButton>
    </Items>
</telerik:RadToolBar>

Here's the definition of the grid:

<telerik:RadGrid ID="CurrentCostCentersGrid" runat="server" Skin="Vista" AllowMultiRowSelection="True"
    AllowMultiRowEdit="True" AllowFilteringByColumn="false" ShowGroupPanel="True"
    AllowPaging="True" DataSourceID="DataSourceUnits" GridLines="Horizontal" AutoGenerateColumns="False"
    PageSize="50" ShowFooter="true" Width="100%">
    <ClientSettings AllowDragToGroup="true" AllowGroupExpandCollapse="true" AllowColumnsReorder="false"
        AllowExpandCollapse="true" AllowColumnHide="true">
        <Selecting AllowRowSelect="true" />
        <ClientEvents OnRowSelected="CostCenterSelected" OnRowDeselected="CostCenterUnselected"
            OnRowSelecting="checkValidRowTarget" OnRowDeselecting="checkValidRowTarget" />
    </ClientSettings>
    <GroupPanel Enabled="true" Text="Groups">
    </GroupPanel>
    <PagerStyle Mode="NextPrevAndNumeric" NextPageText="Next" PrevPageText="Previous" />
    <MasterTableView ShowGroupFooter="true" ShowFooter="true" DataSourceID="DataSourceUnits"
        DataKeyNames="CostCenterItemID" CommandItemDisplay="None" ClientDataKeyNames="CostCenterItemID">
        <RowIndicatorColumn>
            <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>
        <ExpandCollapseColumn Visible="False" UniqueName="ExpandColumn">
            <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridTemplateColumn UniqueName="StatusIcon" Groupable="false" DataField="StatusName">
                <ItemTemplate>
                    <asp:Image ID="StatusIcon" runat="server" ImageUrl='<%# "./images/statusicons/" + Eval("StatusName") + ".png" %>'
                        AlternateText='<%#Eval("StatusName") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn UniqueName="Status" Groupable="false" Display="false" DataField="StatusName" />
            <telerik:GridClientSelectColumn UniqueName="ClientSideSelect">
                <ItemStyle VerticalAlign="Top" HorizontalAlign="Center" />
            </telerik:GridClientSelectColumn>
            <telerik:GridBoundColumn HeaderText="Fund" DataField="FundID" AllowFiltering="true"
                DataType="System.Int32" SortExpression="FundID" ReadOnly="True" UniqueName="FundID">
                <ItemStyle VerticalAlign="Top" HorizontalAlign="Center" Wrap="false" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Unit" DataField="UnitID" AllowFiltering="true"
                DataType="System.Int32" SortExpression="UnitID" ReadOnly="True" UniqueName="UnitID">
                <ItemStyle VerticalAlign="Top" HorizontalAlign="Center" Wrap="false" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Object" DataField="LineItemID" AllowFiltering="true"
                DataType="System.Int32" SortExpression="LineItemID" ReadOnly="True" UniqueName="LineItemID">
                <ItemStyle VerticalAlign="Top" HorizontalAlign="Center" Wrap="false" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Description" DataField="LineItemName" SortExpression="LineItemName"
                UniqueName="Description" ReadOnly="true" Groupable="false">
                <ItemStyle VerticalAlign="Top" HorizontalAlign="Left" Wrap="true" Width="150px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Prev Budget" DataField="PreviousBudget" AllowFiltering="true"
                DataType="System.Decimal" SortExpression="PreviousBudget" UniqueName="PreviousBudget"
                DataFormatString="{0:C}" ReadOnly="True" Aggregate="Sum" FooterAggregateFormatString="{0:C}"
                Groupable="false">
                <ItemStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" Width="100px" />
                <FooterStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Prev Actual" DataField="PreviousActual" DataType="System.Decimal"
                SortExpression="PreviousActual" UniqueName="PreviousActual" DataFormatString="{0:C}"
                Groupable="false" Aggregate="Sum" FooterAggregateFormatString="{0:C}">
                <ItemStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" Width="100px" />
                <FooterStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Current Budget" DataField="CurrentBudget" DataType="System.Decimal"
                SortExpression="CurrentBudget" UniqueName="CurrentBudget" DataFormatString="{0:C}"
                Groupable="false" Aggregate="Sum" FooterAggregateFormatString="{0:C}">
                <ItemStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" Width="100px" />
                <FooterStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="YTD" DataField="CurrentYTD" DataType="System.Decimal"
                SortExpression="CurrentYTD" UniqueName="CurrentYTD" DataFormatString="{0:C}"
                Groupable="false" Aggregate="Sum" FooterAggregateFormatString="{0:C}">
                <ItemStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" Width="100px" />
                <FooterStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Proposed" DataField="ProposedBudget" DataType="System.Decimal"
                SortExpression="ProposedBudget" UniqueName="ProposedBudget" Groupable="false"
                Aggregate="Sum" FooterAggregateFormatString="{0:C}" DataFormatString="{0:C}">
                <ItemStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" Width="100px" />
                <FooterStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Category" EmptyDataText="&amp;nbsp;" HeaderText="Category"
                SortExpression="Category" UniqueName="Category">
                <ItemStyle VerticalAlign="Top" HorizontalAlign="Left" Wrap="false" Width="115px"
                    Font-Size="10px" />
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn HeaderText="Modified" DataField="ModifyDate" UniqueName="Modified"
                Groupable="false">
                <ItemTemplate>
                    <strong>
                        <%#Eval("ModifyBy")%></strong><br />
                    <%#Eval("ModifyDate")%>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
        <DetailTables>
            <telerik:GridTableView DataSourceID="DataSourceHistory" AutoGenerateColumns="false"
                ShowHeader="false" GroupsDefaultExpanded="false" NoDetailRecordsText="No notes currently exist for this item"
                Width="100%" CommandItemDisplay="Top" Frame="Void" Name="RequestHistory">
                <CommandItemTemplate>
                    <telerik:RadToolBar ID="DetailsToolbar" runat="server" Skin="Vista" Width="100%"
                        AutoPostBack="true" OnClientLoad="SetNestedToolbar">
                        <ExpandAnimation Type="OutQuad" Duration="150" />
                        <CollapseAnimation Type="InQuad" Duration="150" />
                        <Items>
                            <telerik:RadToolBarButton Text="Make Request" CommandName="MakeRequest" ImageUrl="Images/request.gif">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton IsSeparator="true">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Approval" CommandArgument="Approval">
                            </telerik:RadToolBarButton>
                        </Items>
                    </telerik:RadToolBar>
                </CommandItemTemplate>
                <ParentTableRelation>
                    <telerik:GridRelationFields MasterKeyField="CostCenterItemID" DetailKeyField="ItemID" />
                </ParentTableRelation>
                <RowIndicatorColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>
                <ExpandCollapseColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridTemplateColumn>
                        <ItemTemplate>
                            <strong>
                                <%#Eval("CreateDate","{0:d}") %>&nbsp;<%#Eval("CreateDate","{0:t}") %>&nbsp;-&nbsp;<%#Eval("UserName")%>:</strong>&nbsp;<br />
                            <br />
                            <%#Eval("NoteText")%><br />
                            <br />
                            <strong style="color: Red">Amount Requested:</strong>&nbsp;
                            <%#Eval("RequestedBudget", "{0:C}")%><hr />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </telerik:GridTableView>
        </DetailTables>
        <PagerStyle Mode="NextPrevAndNumeric" />
    </MasterTableView>
</telerik:RadGrid>

Finally, the javascript:

    function ToolbarButtonClicked(sender, args)
    {
        // Used to handle the bulk approve button.
        var clickedButton = args.get_item();
        if(clickedButton.get_text() == "Bulk Approve") // Make sure the button is the approval button
        {
            var items = "";
            for (idx=0;idx<currentCostCenters.length;idx++) // loop through the items in the array and build a string
            {
                if (items.length > 0)
                {
                    items = items + ";"
                }
                items = items + currentCostCenters[idx];
            }
            window.radopen("BulkApproveItems.aspx?keys=" + items,"BulkApprove");
            return false;
        }
        if(clickedButton.get_text() == "Bulk Edit") // Make sure the button is the edit button
        {
            var items = "";
            for (idx=0;idx<currentCostCenters.length;idx++) // loop through the items in the array and build a string
            {
                if (items.length > 0)
                {
                    items = items + ";"
                }
                items = items + currentCostCenters[idx];
            }
            window.radopen("BulkEditItems.aspx?keys=" + items,"BulkEdit");
            return false;
        }
        if(clickedButton.get_text() == "Previous Budget")
        {
            ShowHideColumn('PreviousBudget');
        }
        if(clickedButton.get_text() == "Previous Actual")
        {
            ShowHideColumn('PreviousActual');
        }
        if(clickedButton.get_text() == "Year To Date")
        {
            ShowHideColumn('CurrentYTD');
        }
    }

    function ShowHideColumn(uniqueName)
    {
        var masterTable = $find('<%= CurrentCostCentersGrid.ClientID %>').get_masterTableView();
        var columns = masterTable.get_columns();
        for(idx=0;idx<columns.length;idx++)
        {
            var column = columns[idx];
            if(column.get_uniqueName() == uniqueName)
            {
                if (column.get_visible() == true)
                {
                    masterTable.showColumn(idx);
                    break;
                }
                else
                {
                    masterTable.hideColumn(idx);
                    break;
                }
            }
        }

    }

Thanks for any insight or better ways of handling this!

[Yavor]

Hello Chris,

Attached to this message, is a small application, which handles a functionality close to the one that you mentioned.
I hope it helps.

Kind regards,
Yavor
the Telerik team

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

[Chris]

Yavor,

Thanks for the sample application. I decided to handle this server side through ajax. It works wonderfully.

Thanks!