styles added via addClass get removed when sorting, changing column order, etc...

  1. #1

    styles added via addClass get removed when sorting, changing column order, etc...

    I have added a header row to a grid which can be shown / hidden via a context menu using add & removeClass('x-hide-display'). Problem is whenever I change the sort or column order, the header row visibility gets reset to its original state. Any way to work around it?

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
    	protected void Page_Load(object sender, EventArgs e)
    	{
    		if (!X.IsAjaxRequest)
    		{
    			var data = this.GetData();
    			var store1 = this.GridPanel1.GetStore();
    
    			store1.DataSource = data;
    			store1.DataBind();
    		}
    	}
    
    	public object[] GetData()
    	{
    		return new object[] {
                new object[] { "3m Co", 0 },
                new object[] { "Alcoa Inc", 1 },
                new object[] { "Altria Group Inc", 2 },
                new object[] { "American Express Company", 3 },
                new object[] { "American International Group, Inc.", 4 },
                new object[] { "AT&T Inc.", 5 }
            };
    	}
    </script>
    <ext:XScript runat="server">
    <script type="text/javascript">
    
    var showHideHeader = function(item, checked){
    	if (checked)
    		#{GridPanel1}.getView().mainHd.select('.cls_FilterRow').removeClass('x-hide-display');
    	 else
    		#{GridPanel1}.getView().mainHd.select('.cls_FilterRow').addClass('x-hide-display');
    	#{GridPanel1}.getView().refresh();
    }
    
    </script>
    </ext:XScript>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <body>
    	<form id="Form1" runat="server">
    	<ext:ResourceManager ID="ResourceManager1" runat="server" />
    	<ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Array Grid"
    		TrackMouseOver="true" Width="600" Height="350" AutoExpandColumn="Company" ContextMenuID="mnuMain">
    		<Store>
    			<ext:Store ID="Store1" runat="server">
    				<Reader>
    					<ext:ArrayReader>
    						<Fields>
    							<ext:RecordField Name="company" />
    						</Fields>
    						<Fields>
    							<ext:RecordField Name="sortorder" />
    						</Fields>
    					</ext:ArrayReader>
    				</Reader>
    			</ext:Store>
    		</Store>
    		<ColumnModel ID="ColumnModel1" runat="server">
    			<Columns>
    				<ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />
    				<ext:Column ColumnID="SortOrder" Header="Sort" Width="160" DataIndex="sortorder" />
    			</Columns>
    		</ColumnModel>
    		<SelectionModel>
    			<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
    		</SelectionModel>
    		<View>
    			<ext:GridView ID="GridView1" runat="server">
    				<HeaderRows>
    					<ext:HeaderRow Cls="cls_FilterRow">
    						<Columns>
    							<ext:HeaderColumn Cls="x-small-editor">
    								<Component>
    									<ext:TextField ID="CompanyFilter" runat="server" EnableKeyEvents="true">
    									</ext:TextField>
    								</Component>
    							</ext:HeaderColumn>
    							<ext:HeaderColumn Cls="x-small-editor">
    								<Component>
    									<ext:TextField ID="SortOrderFilter" runat="server" EnableKeyEvents="true">
    									</ext:TextField>
    								</Component>
    							</ext:HeaderColumn>
    						</Columns>
    					</ext:HeaderRow>
    				</HeaderRows>
    			</ext:GridView>
    		</View>
    	</ext:GridPanel>
    	<ext:Menu ID="mnuMain" runat="server">
    		<Items>
    			<ext:CheckMenuItem ID="chkMenu" runat="server" Checked="true" Text="Filter Row">
    				<Listeners>
    					<CheckChange Fn="showHideHeader" />
    				</Listeners>
    			</ext:CheckMenuItem>
    		</Items>
    	</ext:Menu>
    	</form>
    </body>
    </html>
  2. #2
    Hi,

    The actions you mentioned, i.e. sort, re-order, cause grid refreshing -> it causes rerendering of HeaderRows.

    I would suggest you to handle the GridView's Refresh event to achieve your requirement.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var data = this.GetData();
                var store1 = this.GridPanel1.GetStore();
    
                store1.DataSource = data;
                store1.DataBind();
            }
        }
    
        public object[] GetData()
        {
            return new object[] {
                new object[] { "3m Co", 0 },
                new object[] { "Alcoa Inc", 1 },
                new object[] { "Altria Group Inc", 2 },
                new object[] { "American Express Company", 3 },
                new object[] { "American International Group, Inc.", 4 },
                new object[] { "AT&T Inc.", 5 }
            };
        }
    </script>
        <script type="text/javascript">
            var showHideHeader = function (view, checked) {
                var filterRow = view.mainHd.select('.cls_FilterRow');
                filterRow[checked ? "removeClass" : "addClass"]("x-hide-display");
            };
        </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                Width="340" 
                AutoHeight="true"
                ContextMenuID="Menu1">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="company" />
                                    <ext:RecordField Name="sortorder" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Company" Width="160" DataIndex="company" />
                        <ext:Column Header="Sort" Width="160" DataIndex="sortorder" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView runat="server">
                        <HeaderRows>
                            <ext:HeaderRow Cls="cls_FilterRow">
                                <Columns>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField runat="server"/>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField runat="server"/>
                                        </Component>
                                    </ext:HeaderColumn>
                                </Columns>
                            </ext:HeaderRow>
                        </HeaderRows>
                        <Listeners>
                            <Refresh Handler="showHideHeader(this, Menu1.get(0).checked);" />
                        </Listeners>
                    </ext:GridView>
                </View>
            </ext:GridPanel>
            <ext:Menu ID="Menu1" runat="server">
                <Items>
                    <ext:CheckMenuItem runat="server" Checked="true" Text="Filter Row">
                        <Listeners>
                            <CheckChange Handler="showHideHeader(GridPanel1.getView(), checked);" />
                        </Listeners>
                    </ext:CheckMenuItem>
                </Items>
            </ext:Menu>
        </form>
    </body>
    </html>
  3. #3
    Worked like a charm. Thanks.

Similar Threads

  1. GridPanel sorting null values - bad order
    By gercas in forum 1.x Help
    Replies: 4
    Last Post: Apr 03, 2018, 10:17 AM
  2. Replies: 1
    Last Post: Nov 24, 2011, 6:48 AM
  3. Replies: 1
    Last Post: Jul 27, 2011, 10:19 AM
  4. [1.0] Column layout doesn't render styles
    By Dominik in forum 1.x Help
    Replies: 8
    Last Post: Dec 23, 2010, 9:02 AM

Posting Permissions