search

tonytomov / jqGrid

jQuery grid plugin
www.trirand.com
2.84k stars 1.2k forks source link

Question bootstrap v5 responsive show/hide columns #1012

Open periklis-periklis opened 2 years ago

periklis-periklis commented 2 years ago

Question,

jqgrid 5.6/7, jquery 3.6, bootstrap v5.

Do we need to listen for a resize event and add bootstrap v5 hide/show classes to columns or can we define bootstrap 5 hide classes as in the column definition using classes and labelClasses?.

e.g. column definition with bootstrap v5 would like to hide column when screen is smaller than 'lg'

{name:'col1', index:'col1', search:true, classes: "d-none d-lg-block", labelClasses: "d-none d-lg-block", searchoptions: {clearSearch:false}, editable:false, width:80, sortable:true, align:'left'},

If anyone can assist in answering question it is appreciated.

tonytomov commented 2 years ago

Hello,

The exact answer is: You will need to listen on resize and do showCol and hideCol methods to show hide columns. Adding bootstrap classes will not help.

I recommend you too if you got with this solution to use resizeGrid method. https://github.com/tonytomov/jqGrid/blob/646a44ea947e792b7970eb407f3b37163d53e4d1/js/grid.base.js#L5677 https://github.com/tonytomov/jqGrid/blob/646a44ea947e792b7970eb407f3b37163d53e4d1/js/grid.base.js#L7470

Regards

periklis-periklis commented 2 years ago

Thank You.