Messages

1

Help for ParamQuery Pro / mobile column size

« 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);

2

Help for ParamQuery Pro / Re: setSelection by criteria other than rowIndx

« on: September 26, 2014, 06:39:48 pm »

I was thinking of this exact logic, just wasn't sure how to get the data from the grid (outside of the grid).
This works exactly how I need it to.
Thanks for the top-notch product / support!

3

Help for ParamQuery Pro / Re: setSelection by criteria other than rowIndx

« on: September 25, 2014, 11:34:38 pm »

does this make sense?  I thought I had I solved but I was wrong....

4

Help for ParamQuery Pro / setSelection by criteria other than rowIndx

« on: September 25, 2014, 11:31:33 pm »

hello,

when the grid gets re-sorted, how can I get a listing of the rows within that current state?

let me explain my problem.

I have an external function that links map markers to rows on the grid.
when the map marker is clicked, I call this:

                    $("#gridContainer").pqGrid("setSelection", { rowIndx: this.DisplayNumber, focus: false });
                    // set the row where rowIndx = this.DisplayNumber

it works great, until the user sorts the grid in any way - then the MapMarkers vs rowIndx becomes out of sync.

basically what I need to do is to be able to set the row selection based on the value of a cell within the desired row, so something like this maybe?
                   
                    $("#gridContainer").pqGrid("setSelection", { MapMarker: this.DisplayNumber, focus: false });
                    // set the row where the row's cell 'MapMarker' = this.DisplayNumber


thanks!!!

5

Help for ParamQuery Pro / prevent focus on row selection

« on: September 18, 2014, 09:21:21 pm »

hello,

I have a page that has a google map on top, and a pq grid on bottom.
the markers on the map all have corresponding entries in the grid.
when a google map marker is clicked, I do this to highlight the corresponding pq grid row:

     $("#gridContainer").pqGrid("setSelection", null);
     $("#gridContainer").pqGrid("setSelection", { rowIndx: (this.Assignments[0].DisplayNumber - 1) });

alternatively, when a pq grid row is clicked, I have a custom function that simulates a map marker click / highlights the corresponding google map icon.

the problem is, when I use (the above code for pq grid) to highlight the grid row, it commands focus.
this is not a good thing since the map takes up most of the page, and if the user is looking at the map and clicks an icon,
the page scrolls down / away from the map to the pq grid to honor its focus.

how can I prevent this focus on row selection from happening?

many thanks!

btw - this plugin ROCKS!!!!  NICE WORK!!!!!!!