CODEWITHSUNDEEP
angularjsui-grid
LazioTibijczyk
LazioTibijczyk

Reputation: 1937

Hide ui-grid columns when windows becomes smaller

Is it possible to hide certain ui-grid columns if window as well as ui-grid becomes smaller? I want to set some priority which columns should remain visible when window becomes smaller and which are not as important. These should be hidden so other columns could have the required space to display data.

So for instance I want to keep column 1, 4 and 5 if window becomes smaller...

enter image description here

...but display all 5 if it's big enough.

enter image description here

I can't see anything such as columns.minScreenWidth in Kendo UI... I know there's visible property I can define, however I have no idea how to set it based on the size of the grid.

My current columnDefs:

vm.grid.columnDefs = [
        {
            name: 'one',
            displayName: 'Column of highest priority',
            enableHiding: false,
            minWidth: 400
        }, {
            name: 'two',
            displayName: 'Less Important',
            enableHiding: false,
            type: 'date'
        }, {
            name: 'three',
            displayName: 'Even Less Important',
            enableHiding: false
        }, {
            name: 'four',
            displayName: 'Should be visible',
            cellFilter: 'date:"dd/MM/yyyy"',
            enableHiding: true,
            type: 'date'
        }, {
            name: 'five',
            displayName: 'Should also be visible',
            visible: vm.showFithColumn,
            enableHiding: false
        }
    ];

Upvotes: 1

Views: 192

Answers (1)

David Tatis
David Tatis

Reputation: 86

to know the Windows width you can use $window.innerWidth.

So, an example could be:

var windowsWidth=$window.innerWidth;

vm.grid.columnDefs = [
        {
            name: 'one',
            displayName: 'Column of highest priority',
            enableHiding: false,
            minWidth: 400
        }, {
            name: 'two',
            displayName: 'Less Important',
            visible: function(value){
                 return (windowsWidth>300)
             }
            type: 'date'
        }, {
            name: 'three',
            displayName: 'Even Less Important',
            visible: function(value){
                 return (windowsWidth>400)
             }
        }, {
            name: 'four',
            displayName: 'Should be visible',
            cellFilter: 'date:"dd/MM/yyyy"',
            visible: function(value){
                 return (windowsWidth>500)
             }
            type: 'date'
        }, {
            name: 'five',
            displayName: 'Should also be visible',
            visible: function(value){
                 return (windowsWidth>600)
             }
        }
    ];

Upvotes: 1

Related Questions