[CLOSED] Hide row in Grid

  1. #1

    [CLOSED] Hide row in Grid



    How do I hide rows in a grid based on a value in that row.

    I have several rows in my grid and I want to hide all the rows that have a cell value of "Delete" and if any rows are updated to "Delete" to hide these also.

    I need these rows to be hidden not removed from the store as I need to process them when the grid is posted back.


  2. #2

    RE: [CLOSED] Hide row in Grid

    Hi,

    The easiest way to use GetRowClass of the View
    <ext:GridView ID="GridView1" runat="server">
                <GetRowClass Handler="if(record.data.price<60){return 'x-hidden';}" />
    </ext:GridView>
    But it can cause unexpected results (I am not sure what kind but I believe that it is not better solution)

    Better to filter store (but don't forget to clear filter before saving)
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] {"3m Co", 71.72},
                    new object[] {"Alcoa Inc", 29.01},
                    new object[] {"Altria Group Inc", 83.81},
                    new object[] {"American Express Company", 52.55},
                    new object[] {"American International Group, Inc.", 64.13}
                };
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        
        <script type="text/javascript">
            var applyFilter = function(store){
                store.clearFilter();
                store.filterBy(function(record){
                    return record.data.price>=60;
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
         
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="company" />
                            <ext:RecordField Name="price" Type="Float" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
                
                <Listeners>
                    <Load Handler="applyFilter(this);" />
                </Listeners>
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1" 
                StripeRows="true"
                Title="Array Grid" 
                Width="600" 
                Height="350"
                AutoExpandColumn="Company">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="Company" Header="Company" Sortable="true" DataIndex="company" />
                        <ext:Column Header="Price" Sortable="true" DataIndex="price">
                            <Renderer Format="UsMoney" />
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server">
                        <%--<GetRowClass Handler="if(record.data.price<60){return 'x-hidden';}" />--%>
                        <Listeners>
                            <RowUpdated Handler="applyFilter(this.grid.store);" />
                        </Listeners>
                    </ext:GridView>
                </View>
            </ext:GridPanel>          
        </form>
    </body>
    </html>
  3. #3

    RE: [CLOSED] Hide row in Grid

    Thanks, that works perfect but how do I clear the filter before posting back? I use a button with extra params so how do I remove the filter or should I get the grid data another way?


    <ext:Button ID="btnSaveRecord" runat="server" Disabled="true" Text="Save" Icon="Disk">
              <AjaxEvents>
                <Click OnEvent="btnSaveRecord_Click" Before="return CheckAllTabsValid();">
                  <EventMask ShowMask="true" />
                      <ExtraParams>
                        <ext:Parameter Name="WitnessValues" Value="Ext.encode(getValues(#{grdWitness}))" Mode="Raw" />
                      </ExtraParams>
                </Click>
              </AjaxEvents>
            </ext:Button>
  4. #4

    RE: [CLOSED] Hide row in Grid

    Hi,

    In your 'getValues' function clear filter, get values, restore filter and return values


    1. Clear filter
    grid.store.clearFilter(true);

    - true to prevent grid refresh (we restore filter after getting values)


    2. Restore filter
    store.filterBy(function(record){return record.data.price>=60;});
  5. #5

    RE: [CLOSED] Hide row in Grid



    Thanks but my javascript isnt to strong so I'm not following where I need to put the clear and reset.

    I tried this but it didnt like it

    <ext:Parameter Name="WitnessRows" Value="Ext.encode(getValues(#{grdWitness}.store.clearFilter(true);#{grdWitness}))" Mode="Raw" />
  6. #6

    RE: [CLOSED] Hide row in Grid

    Hi,

    You should clear filter inside 'getValues' function body. Please post that function, I'll modify it (add clear filter)
  7. #7

    RE: [CLOSED] Hide row in Grid



    Ah ok, sorry, me being a little thick there.

    Hows this look? (my GetValues and the Filter function)


        var applyFilter = function(store){            
            store.clearFilter();            
            store.filterBy(function(record){                
                return record.data.StatusString!='Delete';            
            });        
       }
    
    
       function getValues(grid) {
        
           grid.store.clearFilter(true);
    
    
            return grid.getRowsValues();
    
            applyFilter(grid.store);
    
    
       }
  8. #8

    RE: [CLOSED] Hide row in Grid

    Hi,

    Try this
       var applyFilter = function(store, clear){            
            if(clear !== false){
                store.clearFilter();
            }            
            store.filterBy(function(record){                
                return record.data.StatusString!='Delete';            
            });        
       }
       
       function getValues(grid) {
            grid.store.clearFilter(true);
            var values = grid.getRowsValues();
            applyFilter(grid.store, false);
            return values;
       }

Similar Threads

  1. hide columns Grid Ext 2.0
    By sysmo in forum 2.x Help
    Replies: 3
    Last Post: Jun 15, 2012, 7:07 PM
  2. Replies: 1
    Last Post: Dec 28, 2011, 6:36 PM
  3. [CLOSED] Hide grid tooltip when there is no text
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 25, 2011, 12:16 PM
  4. [CLOSED] Show/Hide grid columns
    By GmServizi in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 28, 2010, 6:39 AM
  5. [CLOSED] Hide element in grid based on record value
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 25, 2010, 3:39 PM

Posting Permissions