Responsive Grid 100%

[AppBuilderParticipant]

Hello,

I have managed to create a jqxGrid and set width 1366px (page width) inside Joomla CMS (PHP/MySQLi).

I have tried to set width ‘100%’, but the grid won’t resize with browser window.

I guess there is more to it, but I can’t really find a good example nor a good forum topic on this.

How can I make the grid responsive, hide some columns on mobile and show the elipsis at the end of a row in order to see the full row record (mobile).

[Yavor DashevParticipant]

Hi AppBuilder,

One solution that will suit you needs is to set the adaptive property of the JqxGrid to true if you want hide some columns of the grid and to be able see the full row record.
You can set it like so : $('#grid').jqxGrid({ adaptive: true}); and also I recommend you to check out this demo :
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/grid-adaptive-layout.htm .

Also you can set it depending on browser width like this :
//Just a sample grid

   $("#grid").jqxGrid(
            {
                width:   '100%',
                source: dataAdapter,
                columnsresize: true,
                adaptive: false,
                columns: [
                  { text: 'Name', datafield: 'firstname', width: 120 },
                  { text: 'Last Name', datafield: 'lastname', width: 120 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });

  var adaptivewidth = function(){
               
                if(window.innerWidth < 1200){ 

                    $('#grid').jqxGrid({ adaptive: true}); 
                    $('#grid').jqxGrid('render')
                }
                else {

                    $('#grid').jqxGrid({ adaptive: false}); 
                    $('#grid').jqxGrid('render')

                }
            };
           $(window).on('resize', e => {
                adaptivewidth();
            });

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[AppBuilderParticipant]

amazing. it pretty much worked right out of the box.

thank you.

[Author]

Posts