CODEWITHSUNDEEP
extjsgridextjs4.2
Oğuz Çelikdemir
Oğuz Çelikdemir

Reputation: 4980

Hide grid column depending on row value

I have a following store :

var dnrListStore = new Ext.data.ArrayStore({
fields: [
    {name: 'SUBSYS_ART_NR', type: 'int'},
    {name: 'ART_DESC', type: 'string'},
    {name: 'SORTEN_TEXT', type: 'auto'},
    {name: 'VAR', type: 'int'},
    {name: 'GEBI', type: 'int'},
    {name: 'DNR_ID', type: 'int'},
    {name: 'STATUS', type: 'int'},
    {name: 'LEVEL0', type: 'float'},
    {name: 'VALUE0', type: 'float'},
    {name: 'LEVEL1', type: 'float'},
    {name: 'VALUE1', type: 'float'},
    {name: 'LEVEL3', type: 'float'},
    {name: 'VALUE3', type: 'float'}
],
data: dnrList
});

Some columns ( LEVELX and VALUEX ) are might be null is because of the employee entered value. So, I want to hide those columns that doesn't available value. checkValue function works well which is returning right values. I tried followings but nothing happen. 

var checkValue = function(arg) {
var v = {};
for (var i = 0; i < dnrList.length; i++) {
    v[i] = dnrList[i].data;
}

for (var key in v) {
    if (v[key].hasOwnProperty(arg)) {
        return true
    } else {
        return false
    }
}
}

// on grid columns definition
columns: [
    {text: 'LEVEL 1', dataIndex: 'LEVEL1', hidden: checkValue("LEVEL1")}
]

// or
columns: [
    {text: 'LEVEL 1', dataIndex: 'LEVEL1', hidden: (checkValue("LEVEL1") ? true : false)}
]

Do you have any idea how we do that?

ANOTHER WAY
With this way, I can accomplish the task but isn't feasible!

columns:[
   {
       text: 'LEVEL 1', dataIndex: 'LEVEL1',
       renderer: function(val, meta, rec, row, col) {
           if (val == null) {
              Ext.getCmp('summary-grid').headerCt.remove(col);
           } else {
              return rec.get('LEVEL1')
           }
       }
   }
]

Upvotes: 1

Views: 2957

Answers (1)

Nandkumar Tekale
Nandkumar Tekale

Reputation: 16158

I don't think your solution/approach is feasible, how user is supposed to know what values are null. What would you do if you get following response for your columns (say LEVEL 1) :

LEVEL 1
------
(null)                         ----> you will set LEVEL 1 column hidden
some-value                     ----> and what now?
some-other-value               ----> set again visible?

Any way, if you want to hide column when all data in column is null, then you can add such logic on store's load event as below :

store.on('load', function() {

    nullbaleColumns = new Array();

    // iterate all data,
    // get all columns whose data is null and push columns into nullbaleColumns
    // you can use store.each()


    // get grid headerCt
    // get all columns
    // hide columns whose data is null

    var columns = grid.headerCt.getGridColumns();
    // hide and show columns according to dataIndex or any other parameters by iterating
    // nullbaleColumns and columns using hide() and show() methods

    columns[4].hide(); // 4th entire column is null, so hide
});

Upvotes: 2

Related Questions