Hide Gridpanel Column Text based on specific Column Value and Row numbering issue

  1. #1

    Hide Gridpanel Column Text based on specific Column Value and Row numbering issue

    I am using ext.net 2.5.3 version.

    I have grid panel and there is column value "Main office" is binding from backend and It is displaying first row in the grid panel.
    But I want to hide the "Main office" column text in the grid panel. It should not hide the whole row.

    I just used in the below rowclass handler to check the record contains "Main Office" then I try to hide. But it is not working and I also
    facing row numbering issue. It is not show correct row number.

     <View>                
                        <ext:GridView ID="GridView1" runat="server"> 
                         <GetRowClass Handler="if (record.data.LocationName=='Main Office') {return 'x-item-hidden';}" />
                       </ext:GridView>
                  </View>
    Please find the test case here.

    Please help me to hide gridpanel column text based on the column value.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestRowNumber.aspx.cs" Inherits="JobsPor.TestRowNumber" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.storeAddress.DataSource = Address.GetAll();
            this.storeAddress.DataBind();
           
            
        }
    
        
        public class Address
        {
            public int ID { get; set; }
            public string Location { get; set; }
            public string Fax { get; set; }
    
            public static List<Address> GetAll()
            {
                return new List<Address>
                           {
                               new Address {ID = 0, Location = "Main Office",Fax=""}
                              
                           };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Row Numbering Issue</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
      
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
             <ext:Store ID="storeAddress" runat="server" >
                <Model>
                    <ext:Model ID="Model3" runat="server" IDProperty="ID">
                        <Fields>
                            <ext:ModelField Name="ID" Type="Int" />
                            <ext:ModelField Name="Location" />
                             <ext:ModelField Name="Fax" />
                        </Fields>
                        <IDGen>
                    <ext:SequentialIdGenerator />
                </IDGen>
                    </ext:Model>
                </Model>
            </ext:Store>
    
    
            <ext:Panel ID="Panel1" 
                runat="server" 
                Title="Parent Grid"
                Width="600" 
                Height="200"
                Layout="FitLayout">
                <Items>
              <ext:GridPanel ID="grdpnlEmployerProfile_Address" 
                Height="100"
                runat="server"
                Title="Address Grid" 
                Icon="Application" StoreID="storeAddress">
                   <TopBar>
    				 <ext:Toolbar ID="tlbrEmployerProfile_Address" runat="server">
    					<Items>
    					<ext:Button ID="btnNewEmployerProfile_Address" runat="server" Icon="Add" Text="New">
    					<Listeners>  
                        <Click Handler="var grid1 = #{grdpnlEmployerProfile_Address},
                         store1 = grid1.store;                                                              
                         store1.insert(0, {                                                                                                                                   
    					});                                                                
    					#{grdpnlEmployerProfile_Address}.getView().refresh(false);
    					#{grdpnlEmployerProfile_Address}.getSelectionModel().select(0);
    					#{grdpnlEmployerProfile_Address}.getView().focusRow(0);
    					grid1.editingPlugin.startEdit(0, 1);" />  
                         </Listeners> 
                         </ext:Button>
    										        </Items>
    									        </ext:Toolbar>  
    								        </TopBar>
                                                                   
                              <ColumnModel ID="ColumnModel2" runat="server">
                    <Columns>
                         <ext:RowNumbererColumn ID="RowNumbererColumn2" runat="server" />	
                        <ext:Column ID="Column5" runat="server" Text="Location" DataIndex="Location" >
                        <Editor>
                        <ext:TextField ID="txtLocationName" runat="server" AllowBlank="False" MaxLength="20" MinWidth="5"></ext:TextField>
                        </Editor>
                        </ext:Column>
    
                        <ext:Column ID="Column6" runat="server" Text="Fax" DataIndex="Fax" >
                        <Editor>
                        <ext:TextField ID="txtFax" runat="server" AllowBlank="False" MaxLength="20" MinWidth="5"></ext:TextField>
                        </Editor>
                        </ext:Column>
                      
                        
                    </Columns>
                </ColumnModel>
              
                   <View>                
                        <ext:GridView ID="GridView1" runat="server"> 
                         <GetRowClass Handler="if (record.data.LocationName=='Main Office') {return 'x-item-hidden';}" />
                       </ext:GridView>
                  </View> 
                   <Listeners>                                   
                     <Edit  Handler="var record = #{grdpnlEmployerProfile_Address}.getSelectionModel().getSelection();"></Edit>									      
                   </Listeners> 
                <Plugins>
                    <ext:CellEditing ID="CellEditing2" runat="server" />
                </Plugins>
            </ext:GridPanel>
                    </Items>
                </ext:Panel>
    
     
            <ext:Label runat="server" ID="lblhidden" Text=""></ext:Label>
            <ext:Hidden ID="Hidden1" runat="server"/>
             <ext:Button ID="btnSubmitNew" runat="server" Hidden="False" 
                                            StandOut="True" Text="Submit">
                                            <Listeners>
                                           
    
                                             
                                            </Listeners>
                                         <DirectEvents>
                                                <Click OnEvent="btnSubmit_Click" Timeout="1800000">
                                                    <ExtraParams>                    
                                                        <ext:Parameter Name="Save" Mode="Value" Value="NEW" />
                                                       
                                                    </ExtraParams>
                                                    <EventMask ShowMask="True" Msg="Processing..." MinDelay="500" />
                                                </Click>
                                            </DirectEvents>
                                        </ext:Button>
        </form>
    </body>
    </html>
    Last edited by yenkarthi; Oct 04, 2015 at 9:35 AM. Reason: change content
  2. #2
    < Renderer Handler="if (value=='Main Office') {return ' ';}" />


    place this function with column which column you want
    Last edited by Daniil; Oct 05, 2015 at 11:11 AM. Reason: Please use [CODE] tags
  3. #3
    Hi sateeshdasarikapil,

    Thanks for your assitance, I tried to add code in the below Location column, After that I am not able to enter any value on that Location column,If i entered then it is disappeared then when i click to add next row it is always showing Main Office text. Pls assist me

     <ext:Column ID="Column5" runat="server" Text="Location" DataIndex="Location" >   
                        <Renderer Handler="if (value=='Main Office') {return '';}" />
  4. #4
    let me know are you using editor property with in column
  5. #5
    Yes I am using editor property within the column name. Pls see in the below code.

     <ext:Column ID="Column5" runat="server" Text="Location" DataIndex="Location" >
                        <Renderer Handler="if (value=='Main Office') {return '';}" />
                        <Editor>
                        <ext:TextField ID="txtLocationName" runat="server" AllowBlank="False" MaxLength="20" MinWidth="5"></ext:TextField>
                        </Editor>
                        </ext:Column>
  6. #6
    Hi...
    In the above case, if the location value is 'Main office' it will return as empty.. else the text value will render to that column..
  7. #7
    Hi sateeshdasarikapil,

    When I loading the grid then I binding the "Main Office" Value in the Location Column, Based on your suggestion, I just hide "Main Office" Text in the grid Column, But when I entered any value on the location text box, it is disappearing . Also numbering is not sequence order. Pls show in the below screen.

    Click image for larger version. 

Name:	Entered Value.JPG 
Views:	240 
Size:	14.5 KB 
ID:	24259

    When I double click then it is showing the entered text on the grid column

    Click image for larger version. 

Name:	Dbl Click Valued.jpg 
Views:	231 
Size:	17.6 KB 
ID:	24260
  8. #8
    Hi dear,
    <ext:Column ID="Column5" runat="server" Text="Location" DataIndex="Location" >
                        <Editor>
                        <ext:TextField ID="txtLocationName" runat="server" AllowBlank="False" MaxLength="20" MinWidth="5"></ext:TextField>
                        </Editor>
    < Renderer Handler="
    if (value=='Main Office') 
    {
    return ' ';
    }
    else
    {
    return value;
    }
    " />
                        </ext:Column>


    You have to do one more thing here, i.e,
    <ext:gridPanel clickstoedit="1" runat="server"> </ext:gridPanel>
    This is for single click to edit....
    Last edited by Daniil; Oct 06, 2015 at 11:26 AM. Reason: Please use [CODE] tags
  9. #9
    Hi sateeshdasarikapil,

    Thanks for your promt reponse and help.

    I just added your piece of code, when i adding new record it is showing in the below picture, it is just showing "Main office" text in the first row and Row number is always showing two duplicate no "1" value.

    Click image for larger version. 

Name:	row number wrong.jpg 
Views:	172 
Size:	20.3 KB 
ID:	24263

    How can i fix the row number and hide the "Main office" text on the grid panle column.Pls help me.
    Last edited by yenkarthi; Oct 06, 2015 at 4:12 PM. Reason: edit content
  10. #10
    hi
    if you are providing custom row number...
    follow this...
    if you provide grid rows count at row index, you will succeed..

    Provide this value at row number-----> #{gridpanel1}.getStore().getCount()+1
    Last edited by Daniil; Oct 09, 2015 at 10:29 AM. Reason: Please use [VAR] tags

Similar Threads

  1. [CLOSED] Hide GridPanel Column based on Column Name
    By speedstepmem4 in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 02, 2014, 6:21 AM
  2. Replies: 1
    Last Post: Nov 04, 2011, 8:51 AM
  3. [CLOSED] [1.0] - GridPanel Column unable to Hide column
    By drkoh in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 01, 2010, 5:37 PM
  4. [CLOSED] Icon column in GridPanel based on column from store
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 12, 2010, 5:46 PM
  5. Show Specific Column in GridPanel
    By sachin.munot in forum 1.x Help
    Replies: 3
    Last Post: Oct 22, 2009, 4:51 AM

Tags for this Thread

Posting Permissions