ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: ckrosnowski on October 08, 2014, 12:07:08 am

Title: mobile column size
Post by: ckrosnowski on October 08, 2014, 12:07:08 am

hello,

I am using a fluid layout which works great on my desktop browser, scales to fit nicely when browser is collapsed.  however, on a mobile device (iPhone), the grid does not compress to fit.  not only that, any explicit size I set the column to is not honored either.  any ideas?  here's my code:

note - I've tried to publish the site with either the width set as px in the colM OR the width set as a percentage in the columnTemplate, not both at the same time (as shown below), but neither has any effect.  on a mobile device, the column end up spanning about the entire width of the screen.  also note that I reduced the colM for brevity here, I actually have 10 cols.

var colM = [
           {
               title: "Marker#",
               width: "30px",  // not working on mobile
               dataType: "string",
               dataIndx: "MarkerNumber"
           },
           {
               title: "Project",
               width: "30px",  // not working on mobile
               dataType: "string",
               dataIndx: "ProjectName"
           },
        ];

        var gridM = {
            width: "auto",
            flexHeight: true,
            colModel: colM,
            columnTemplate: { width: '10%' },  // not working on mobile
            dataModel: dataM,
            create: function (ui) {
                var $grid = $(this),
                    $pager = $grid.find(".pq-grid-bottom").find(".pq-pager");
                if ($pager && $pager.length) {
                    $pager = $pager.detach();
                    $grid.find(".pq-grid-top").append($pager);
                }
            },
            pageModel: { type: tmpJSON.length <= 20 ? null : "local", rPP: 20, strRpp: "{0}", strDisplay: "{0} to {1} of {2}" },
            scrollModel: { autoFit: true, lastColumn: "auto" },
            numberCell: { show: false },
            title: null,
            showBottom: false,
            showTop: tmpJSON.length <= 10 ? false : true,
            editable: false,
            resizable: true,
            collapsible: false,
            rowSelect: function (evt, obj) {
                evt.preventDefault();
                DoMarkerClick(obj.rowData.MarkerNumber);
            }
        };

        $("#gridContainer").pqGrid(gridM);

Title: Re: mobile column size
Post by: paramvir on October 08, 2014, 05:05:58 pm

Please refer to these demos which work fine on the iPhone and iPad

http://paramquery.com/pro/demos/fluid_window

http://paramquery.com/pro/demos/fluid_window2

Few points to note:

1) Any width set in column definition overrides the width in columnTemplate.

2) Every column has minWidth property. If column width < minWidth then minWidth is considered. minWidth can also be set in px or %

http://paramquery.com/pro/api#option-column-minWidth

If you still face issue, please share a complete example or a jsfiddle.