Topics

1

Help for ParamQuery Pro / Getting a list of all checked rows

« on: April 09, 2015, 07:29:06 pm »

I have a grid with a checkBoxSelection column.

What is the recommended way of returning an array of rows that have been checked?  Further, how does one return an array of rows that have been checked, and are currently visible via any applied filter? (Exclude rows that are not visible due to filtering.)

I tried using beforeCheck/beforeunCheck to add/remove classes to rows, coupled with getRowsByClass, but beforeCheck/beforeunCheck is not triggered when using the check all/uncheck all checkbox in the column header, making beforeCheck/beforeunCheck somewhat crippled.  selection({method:'getSelection', type:row}) only seems to return the last row that was checked.

2

Help for ParamQuery Pro / virtualX/overflow issue with details on pq 2.4.0

« on: February 19, 2015, 12:07:12 am »

See:
http://jsfiddle.net/p2pfqzu9/

1. Click "Open Grid With 5"
2. Expand at least two details. 
3. Notice that the vertical scroll bar does not appear when the expanded detail content forces the grid to overflow the given container.

Expected behavior:  Scroll bar should appear.

3

Help for ParamQuery Pro / Trouble with maximized grids

« on: February 10, 2015, 10:18:28 pm »

I'm trying to get maximized grids to work as I need in my UI, but I'm having issues with the way pqGrid sizes, sets its z-index, and clips the body.

When the grid maximizes I'd like to:

1. Allow other dialog/elements to be displayed by: Not setting body css to height:0; width:0; overflow:hidden; and not setting the grids z-index to 1000 (keep it auto).
2. Leave an amount of the body/page visible at the top (allows app menu to function).

The following CSS, almost gets things working the way I'd like, but a maximized grid clips the bottom 36px of its contents:

.pq-grid[style*='position:fixed'], .pq-grid[style*='position: fixed']{
    z-index:auto !important;
    margin-top: 36px !important;
}
body {
    width: auto !important;
    height: auto !important;
    overflow: auto !important;
}


Any ideas?


Edit: I should add, I've tried top: 36px instead of margin-top: 36px, with the same result: 36px clipping of grid content.

4

Help for ParamQuery Pro / Selecting elements only in a single grid when you have nested grids

« on: February 10, 2015, 06:06:16 am »

While it's not the most performant (assign a class to the elements that's unique to each grid if you need higher performance), thought I'd share the function I use to help select elements relative to a specific grid:

Code: [Select]

    function selectGridElements($grid, selector){
        // Select only the elements that are part of this grid (exclude elements that are in nested grids)
        var depth = $grid.children().first().parents(".pq-grid").length;
        return $grid.find(selector).filter(function(){
                return $(this).parents(".pq-grid").length == depth;
            });
    }

Usage:

$thisGridButtons = selectGridElements($grid,'button.my_button_class');

or:

selectGridElements($grid,'button.hello_world').click(function(){alert('Hello world')});

5

Help for ParamQuery Pro / class/style of row based on row data

« on: February 05, 2015, 08:10:05 pm »

There doesn't appear to be a rowInit event.

Id like an easy way to set the class/style of a row without having to re-iterate the grid rows after they are rendered, or without injecting data into the data array before rendering the grid.

Does something like this exist?

rowInit: function(ui){
    var $tr = ui.$tr, rowData = ui.rowData;
    if(rowData.days_past_due >= rowData.terms){
        $tr.addClass('past-due');
    }
}

Or, something like this?

rowModel: {
    init: function(ui){
    }
    cls: function(rowData,rowIndx){
        return rowData.my_index>0?'my-class':null;
    }
    style: function(rowData,rowIndx){
        return rowData.my_index>0?'background-color:red':null;
    }
}

6

Help for ParamQuery Pro / Uncaught TypeError: Cannot read property 'pq_detail' of undefined

« on: February 03, 2015, 06:51:25 am »

I keep getting "Uncaught TypeError: Cannot read property 'pq_detail' of undefined" when trying to use "deleteRow" on a grid that uses detailModel. (The detailModel is yet another grid, but the error happens even if the detail hasn't been expanded.)  Seems to be failing in pqGrid's detachInitView method.

Is there something different I must do to delete rows in a grid using detailModel?

7

ParamQuery Pro Evaluation Support / Uncaught dataIndx NA

« on: December 09, 2014, 09:35:03 am »

I notice that I intermittently get an "Uncaught dataIndx NA" error reported in the console when clicking to collapse a detailModel, and the detail does not collapse correctly.  (The parent row disappears and the "detail" stays visible.)   Is this a known issue?

8

ParamQuery Pro Evaluation Support / Working with unix/epoch timestamps

« on: December 05, 2014, 03:18:01 am »

I'm working with date columns that are in unix time stamps (ms since epoch).

Getting them to display as string/formatted dates is easy enough with a render function, but I'm having trouble creating a local header filter using a datePicker.

Other than using a string/formatted date, what options do I have?

9

ParamQuery Pro Evaluation Support / Automatic column width

« on: November 29, 2014, 10:29:53 pm »

Is there an automatic column width option?

It seems I can only set it by percentage, px, and then a min or max.   The last column, if no max is set, seems to expand to fill any remaining space.  Is there any way to allow columns other than the last column to fill any remaining width?

The problem comes in when I want to have one or more columns with a static width, and then the rest with percentage.  If the window is re-sized slightly, or you're off a little on the percentages, you end up scrolling.  I'm hoping there's an easy way to have empty space distributed evenly over  % sized columns that have not reached max width, or removed from % sized columns that have not yet hit minimum width.  As it is now, it seems that only the last column does this, and that's less than desirable in many use cases.

10

ParamQuery Pro Evaluation Support / Custom editor for array data

« on: November 29, 2014, 12:25:24 am »

Not sure how to handle cell data that is an array in pqGrid.

I have the following colModel that displays the array data just fine using a custom render, but the custom editor/getData doesn't seem to agree with pqGrid.   Not sure if I'm just misunderstanding how the custom editor should work, or if I just can't use arrays in the column data.

colModel object for array column:

Code: [Select]

                      {
                            title:"Tax Rates in Group",
                            width:'50%',
                            sortable:false,
                            dataIndx: "tax_rates",
                            render: function(ui){
                                return _itemListHtml(ui.rowData.tax_rates);
                            },
                            editable: true,
                            editor: {
                                type: function(ui){
                                    var data = $.extend(true,[],ui.rowData.tax_rates);
                                    var $cell = ui.$cell;
                                    ui.rowData.tax_rates.forEach(function(d){
                                        $cell.append(_itemRemoveButton(d.name, data));
                                    });
                                    $cell.append(_itemAddButton("Add Tax Rate", data));;
                                    $cell.data("pq-itemData",data);
                                },
                                getData: function(ui){
                                    return ui.$cell.data("pq-itemData");
                                }
                            }
                        },

Supporting functions:

Code: [Select]

    function _itemListHtml(itemData){
        var items = [];
        itemData.forEach(function(r){
            items.push('<span style="white-space:nowrap;">'+r.name+'</span>');
        });
        return items.join(', ');
    }
    function _itemRemoveButton(name, data){
        return $('<button class="delete_item_btn">'+name+'</button>').button({
            icons:{
                primary:'ui-icon-close'
            }
        }).bind("click",function(e){
            var $this = $(this);
            data.splice($this.parent().index(),1);
            $this.remove();
        });
    }
    function _itemAddButton(name, data, itemSelection){
        return $('<button class="add_item_btn">'+name+'</button>').button({
            icons:{
                primary:'ui-icon-plus'
            }
        }).bind("click",function(e){
            var $this = $(this);
            var selectedItem = _selectModal(itemSelection,data);
            if(selectedItem){
                data.push(selectedItem);
                $this.before(removeItemButton(selectedItem.name));
            }
        });
    }

getData returns the modified array just fine, but pqGrid just seems to ignore the changes.

11

ParamQuery Pro Evaluation Support / Issue with add buttons when returning default data

« on: November 27, 2014, 09:27:23 am »

Running into a little issue:

I have an "Add row" button item in the toolbar with a listener like the following:

Code: [Select]

                                listener:{
                                    click:function(evt,ui){
                                        var $grid = $(this).closest('.pq-grid');
                                        addRow($grid,{
                                            id:null,
                                            name:null, 
                                            group_rate:0,
                                            disabled:false,
                                            tax_rates:[]
                                        });
                                    }
                                }

(The "addRow" function, incase you need to see it:)

Code: [Select]

    function addRow($grid,rowData){
        if(isEditing($grid)){
            return;
        }
        // append empty row in first row.
        var rowOptions = {
            rowIndxPage:0,
            rowData:rowData
        }
        if(typeof rowData == 'function'){
            rowOptions.rowData = rowData();
        }
        $grid.pqGrid('addRow',rowOptions);

        var $tr = $grid.pqGrid('getRow',{
            rowIndxPage:0
        });
        if($tr){
            $tr.find('button.edit_btn').first().click();
        }
    }

The problem is with the "group_rate" entry.  It never seems to show up in the rowData for the new row, although it does show for rows that were pulled from a JSON API.   If I rename it to "fgroup_rate", then it will show -- but I'd like to use the name the server side API is returning, "group_rate".

Is "group_*" a reserved name in pqGrid?

12

ParamQuery Pro Evaluation Support / rollback/isDirty issues

« on: November 25, 2014, 08:44:19 am »

I am mostly following the example here and using an evaluation copy of pqgrid downloaded yesterday.

I'm having trouble getting my code to rollback on cancel or for grid.isDirty() to return true after edits.  Adding new seems to work (the new row disappears when selecting cancel, and isDirty returns true on update), and uses much same code path as edits, so I'm confused as to why edits alone would fail.

I'm setting trackModel: {on: true} and track: true, for good measure. (And have tried them independently.)

Any common mistakes I should look for?

EDIT:
Nevermind.  I finally figured it out.  I typo'd dataModel.recIndx as recIndex.  Gotta remember to drop that "e".