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

Problems Understanding showColumn/hideColumn

2 Answers 153 Views

Grid

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

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

answered on 20 Nov 2008, 01:31 PM

ASP.NET_AJAX.zip

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.