Tuesday, November 6, 2012

Hide some column in gridpanel

This is a quick tips on how you can hide a column in gridpanel control of ext.net. You ofter may require this. I was in need of this to set permission in page. I was searching for this on the net but did not get some good result that can help me. But it was accomplished very simply. Let us see code.

Here is the code snippet for my grid panel:



<ext:GridPanel ID="gpList" runat="server" StripeRows="true" Title="Branch List" Collapsible="true"
                                    AnchorHorizontal="100%" Height="250" AutoScroll="true" AutoExpandColumn="GradeName"
                                    TrackMouseOver="true">
                                    <Store>
                                        <ext:Store ID="gpListStore" runat="server">
                                            <Reader>
                                                <ext:JsonReader>
                                                    <Fields>
                                                        <ext:RecordField Name="GradeId" />
                                                        <ext:RecordField Name="GradeName" />
                                                        <ext:RecordField Name="PayScale" />
                                                        <ext:RecordField Name="IsRemoved" />
                                                        <ext:RecordField Name="IsActive" />
                                                    </Fields>
                                                </ext:JsonReader>
                                            </Reader>
                                        </ext:Store>
                                    </Store>
                                    <ColumnModel ID="ColumnModelgpList" runat="server">
                                        <Columns>
                                            <ext:RowNumbererColumn />
                                            <ext:CommandColumn ColumnID="cAction" Header="Action" Width="60">
                                                <Commands>
                                                    <ext:GridCommand Icon="ApplicationEdit" CommandName="Edit">
                                                        <ToolTip Text="Edit" />
                                                    </ext:GridCommand>
                                                </Commands>
                                            </ext:CommandColumn>
                                            <ext:Column ColumnID="cGradeName" Header="Grade" DataIndex="GradeName" />
                                            <ext:Column ColumnID="cPayScale" Header="Pay Scale" DataIndex="PayScale" />
                                            <ext:Column ColumnID="cIsActive" Header="IsActive" DataIndex="IsActive" />
                                            <ext:CommandColumn Header="Action" Width="60">
                                                <Commands>
                                                    <ext:GridCommand Icon="Delete" CommandName="Delete">
                                                        <ToolTip Text="Delete" />
                                                    </ext:GridCommand>
                                                </Commands>
                                            </ext:CommandColumn>
                                        </Columns>
                                    </ColumnModel>
                                    <SelectionModel>
                                        <ext:RowSelectionModel ID="RowSelectionModelgpList" runat="server" />
                                    </SelectionModel>
                                    <BottomBar>
                                        <ext:PagingToolbar ID="gpListPager" runat="server" PageSize="10" />
                                    </BottomBar>
                                    <Listeners>
                                        <Command Handler="Ext.net.DirectMethods.ExecuteActionCommand(command, record.data);" />
                                    </Listeners>
                                    <DirectEvents>
                                        <Render OnEvent="gpList_Render">
                                        </Render>
                                    </DirectEvents>
                                    <ToolTips>
                                        <ext:ToolTip ID="RowTip" runat="server" Target="#{gpList}.getView().mainBody" Delegate=".x-grid3-cell"
                                            ShowDelay="0" TrackMouse="true">
                                            <Listeners>
                                                <Show Fn="showTip" />
                                            </Listeners>
                                        </ext:ToolTip>
                                    </ToolTips>
                                </ext:GridPanel>



I was looking for a solution to hide Action column if you dot have update permission. It was done using Render event of grid panel.

 Server side code is:

        protected void gpList_Render(object sender, DirectEventArgs e)
        {
            if (!CanUpdate)
            {
                gpList.ColumnModel.SetHidden(1, true);
            }
        }



Here SetHidden Method of ColumnModel accepts two parameters- ColumnIndex and boolean Visibility which will allow you to set visibility of any column in grid panel.

Thanks