Question bootstrap v5 responsive show/hide columns

[periklis-periklis]

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]

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.

jqGrid/js/grid.base.js

Line 5677 in 646a44e

if(ts.p.responsive) {

jqGrid/js/grid.base.js

Line 7470 in 646a44e

resizeGrid : function (timeout, width, height, refreshfrozen) {

Regards

[periklis-periklis]

Thank You.