Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: How to hide/unhide column of grid at runtime

  1. #1
    Sencha Premium Member
    Join Date
    Jun 2010
    Posts
    305

    Default How to hide/unhide column of grid at runtime

    I want to hide and unhide columns of grid at runtime on click of button
    How can I do this, Any help please

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Code:
    grid.getColumnModel().setHidden(index, hidden);

  3. #3
    Sencha Premium Member
    Join Date
    Jun 2010
    Posts
    305

    Default

    thanks Condor and if I have to hide row then?

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    There are two ways to hide a row.

    1. Filter the records out by using store.filter or store.filterBy.
    2. Use a getRowClass method that adds a class with display:none to rows that should be hidden.

  5. #5
    Sencha Premium Member
    Join Date
    Jun 2010
    Posts
    305

    Default

    Condor, I am trying to access grid outside class.
    Can I access my grid using prototype.
    actually I want to hide the row if there is no data in one of the column.

    I want to access grid in "MS.ImpactSisterApp.FinancialProjectionsPanel.prototype.showFund" method of the class
    Let me know how to do this

    check my code

    Code:
    MS.ImpactSisterApp.FinancialProjectionsPanel = Ext.extend(Ext.grid.GridPanel, {
    
        store:null,
        fundCData:null,
        regionCData:null,
        fundChild: null,
        regionchild : null,
    
        initComponent: function() {
           
            var FundRecord = Ext.data.Record.create([
                {name: 'Fund'},
                {name: 'level'},
                {name: 'Status'},
                {name: 'ReportingPeriod'}
            ]);
           //debugger  
            store = new Ext.data.Store({
                url: MS.ImpactSisterApp.testUrl.getInvestments,
                autoLoad: true,
                reader: new Ext.data.JsonReader({
                    root: 'data',
                    idProperty: 'Fund.Id'
                },FundRecord)
            });
    
            var config = {
                store: store,
                master_column_id : 'id',
                columns: [
                   { id: 'id', header: "Id", width: 20, sortable: true, dataIndex: 'id', hidden: true },
                   { id: 'name', header: "Funds Name", width: 250, sortable: true, renderer: this.showFund, dataIndex: 'model_name', minWidth: 100 },
                   { id: 'regionName', header: "Region", width: 250, sortable: true, renderer: this.showRegion, dataIndex: 'region_name', minWidth: 100, hidden: true },
                   { id: 'invName', header: "Investments", width: 250, sortable: true, renderer: this.showInvest, dataIndex: 'inv_name', minWidth: 100, hidden: true },
                   { id: "status", header: "Status", width: 100, sortable: true, renderer: this.showCombo, fixed: true, dataIndex: 'model_status', minWidth: 50 }
                ],
                //title: this.ReportingPeriod.Name,
                root_title: 'Investment Models',
                id: 'gridId',
                style: 'font-size:8pt;font-family:helvetica;overflow:auto;',
                autoScroll: true,
                closable: true,
                stripeRows: true
            };
            Ext.apply(this, Ext.apply(this.initialConfig, config));
            MS.ImpactSisterApp.FinancialProjectionsPanel.superclass.initComponent.apply(this, arguments);
            this.on('cellclick', this.modelSelected, this);        
            this.on('render', this.onGridRender, this);
        },
        ------
        ------
    });
    
    MS.ImpactSisterApp.FinancialProjectionsPanel.prototype.showFund = function(val, meta, rec, rowIndex) {
        debugger
       if(rec.data.Fund.ChildNo != null){
            MS.ImpactSisterApp.FinancialProjectionsPanel.prototype.fundChild = rec.data.Fund.ChildNos;
            //MS.ImpactSisterApp.FinancialProjectionsPanel.prototype.gridId;
       }
       
       //MS.ImpactSisterApp.FinancialProjectionsPanel.prototype.getGridEl('gridId')
        if(rowIndex == 0){        
            var data = rec.data.Fund.fundName;
            MS.ImpactSisterApp.FinancialProjectionsPanel.prototype.fundCData = data;
            return '<div style="font-size:11px"><input style="cursor:pointer;border:1px solid lightblue;font-size:11px;font-family:tahoma;width:230px;padding:3px 5px" name="fundCombo" type="text" value="-- Select Funds --" size="20"/></div>';
            //MS.ImpactSisterApp.SisterAppEventManager.fireEvent("loadFundCombo", data);
        }
        if(rec.data.Fund.Children == "Y"){        
            return '<img style="cursor:pointer;" src="'+MS.ImpactSisterApp.SisterWebAppBase + 'icons/elbow-end-plus-nl.gif" id="model_inv_' + rec.data.Fund.Id + '"  />&nbsp;&nbsp;' + rec.data.Fund.Name;
        } else if(rec.data.Fund.Children == "N"){
            return '<img style="cursor:pointer;" src="'+MS.ImpactSisterApp.SisterWebAppBase + 'icons/elbow-minus-nl.gif" id="model_inv_' + rec.data.Fund.Id + '"  />&nbsp;&nbsp;' + rec.data.Fund.Name;
        } else {
            if(rec.data.Fund.Name == ""){
                Ext.get('gridId');
            } else {
                return rec.data.Fund.Name;
            }    
        }     
    };

  6. #6
    Sencha Premium Member
    Join Date
    Jun 2010
    Posts
    305

    Default

    Condor, any help on this please

  7. #7
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    You can't hide a row from a renderer, you need the getRowClass method for that.

  8. #8
    Sencha Premium Member
    Join Date
    Jun 2010
    Posts
    305

    Default

    can you explain me more about this(getRowClass) method
    How can i use this in my code

  9. #9
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Code:
    viewConfig: {
      getRowClass: function(record, rowIndex, rowParams, store) {
        if (!record.data.Fund.Name) {
          return 'x-hide-display';
        }
      }
    }

  10. #10
    Sencha Premium Member
    Join Date
    Jun 2010
    Posts
    305

    Default

    Thanks Condor, it works

Page 1 of 2 12 LastLast

Similar Threads

  1. Hide/unhide row without refresh
    By N S B in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 16 Jan 2009, 2:11 AM
  2. noob: Trying to hide <TR> and unhide if necessary
    By jord1242 in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 12 Mar 2008, 5:43 AM
  3. [Solved]Filtering out column name from hide/unhide menu
    By dhwani4u0 in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 5 Oct 2007, 10:37 AM
  4. Hide/unhide columns in the grid
    By namaks in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 16 Jul 2007, 5:12 AM
  5. Ext Alpha unhide a column in grid.ColumnModel?
    By KRavEN in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 27 Mar 2007, 9:43 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •