jQuery UI Widgets Forums Grid Responsive Grid 100%

This topic contains 2 replies, has 2 voices, and was last updated by  AppBuilder 3 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Responsive Grid 100% #114697

    AppBuilder
    Participant

    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).

    Responsive Grid 100% #114703

    Yavor Dashev
    Participant

    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

    Responsive Grid 100% #114705

    AppBuilder
    Participant

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

    thank you.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.