This is a migrated thread and some comments may be shown as answers.

Problems Understanding showColumn/hideColumn

2 Answers 101 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 17 Nov 2008, 07:12 PM
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!

2 Answers, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 20 Nov 2008, 01:31 PM
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.
0
Chris
Top achievements
Rank 1
answered on 02 Dec 2008, 04:51 PM
Yavor,

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

Thanks!
Tags
Grid
Asked by
Chris
Top achievements
Rank 1
Answers by
Yavor
Telerik team
Chris
Top achievements
Rank 1
Share this question
or