Topics

1

ParamQuery Pro Evaluation Support / Checkbox selection not working properly

« on: June 10, 2014, 07:08:33 pm »

Hello everybody, I'm looking to purchase ParamQuery Pro and I'm testing the Pro trial version.
I've reached a point where I can't seem to properly implement the grid's functionality of selection with a checkbox.
Let me explain my scenario:
In our site, we have a grid with data and a checkbox column to select multiple records to perform actions to them. No editing, just checking.
Keyboard navigation is a priority (arrow keys to navigate through cells, spacebar to check the row, page up and down to move forward/backwards, start/end to go to first/last record)
I've tried to implement the Custom selection sample http://paramquery.com/demos/selection_custom, but I couldn't make it work. It seems that some objects are not available in Pro API (for example ui.dataModel.data on rowUnSelect or cellKeyDown, had to use ui.rowData)
I've managed to make spacebar selection work, but when I check a record, full row get selected, thus keyboard navigation stops working 
I've tried to implement Checkbox selection simple http://paramquery.com/pro/demos/selection_checkbox from Pro Demos, but couldn't make keyboard navigation work (no keyboard event firing on checkcolumn)
Is there something I'm missing here?? Below is the code implemented.
Data comes in this form: [{KEY:"value"},{KEY1:"Value2"}]
Looking forward for your answer!
Best regards
var result = getDataFromServer();
var dataa = getData(result);//this adds CHECKED column to data
var columns = getColumns(result);
newObj.dataModel = { data: dataa };
        //obj.colModel.splice(2, 1);
        newObj.colModel = columns;

        $.extend(newObj.colModel[0], { width: 150 });
        $.extend(newObj.colModel[1], { width: 150 });

        $.extend(newObj.colModel[2], {
            width: 120
        });
        $.extend(newObj.colModel[3], { width: 80 });
        $.extend(newObj.colModel[4], { width: 80, dataType: "string" });
        $.extend(newObj.colModel[5], { width: 80, dataType: "string" });
        //here we have to set dataIndx explicitly because it's a new column.
        newObj.colModel[6] = {
            dataIndx: "CHECKED", editable: false, sortable: false, title: "", width: 30, align: "center", resizable: false, render: function (ui) {
                try {
                    var rowData = ui.rowData, dataIndx = ui.dataIndx;
                    var val = rowData["CHECKED"];
                    str = "";
                    if (val) {
                        str = "checked='checked'";
                    }
                }
                catch (exx) {
                    var laa = exx;
                }
                return "<input type='checkbox' " + str + " />";
            }, className: "checkboxColumn"
        };

        newObj.rowSelect = function (evt, ui) {
            try {
                var rowIndx = ui.rowIndx;
                ui.rowData["CHECKED"] = true;
                $grid1.pqGrid("refreshCell", { rowIndx: rowIndx, dataIndx: "CHECKED" });
                var cell = $grid1.pqGrid("getCell", { rowIndx: rowIndx, dataIndx: "CHECKED" });
                cell.focus();//Full row select workaround??
            }
            catch (exx) {
                var laa = exx;
            }
        };
        newObj.rowUnSelect = function (evt, ui) {
            try {
                var rowIndx = ui.rowIndx,
                    evt = ui.evt;
                for (var ro = 0; ro < ui.rows; ro++) {
                    ui.rows[ro].rowData["CHECKED"] = false;
                    $grid1.pqGrid("refreshCell", { rowIndx: ui.rows[ro].rowIndx, dataIndx: "CHECKED" });
                }
            }
            catch (exx) {
                var laa = exx;
            }
        };
        newObj.cellKeyDown = function (evt, ui) {
            try {
                var rowIndx = ui.rowIndx, colIndx = ui.colIndx,
                    column = ui.column, data = ui.rowData;

                if (column && column.dataIndx == "CHECKED") {
                    var dataIndx = column.dataIndx,
                        rowIndx = ui.rowIndx;
                    //enter key or space bar.
                    if (evt.keyCode == 13 || evt.keyCode == 32) {
                        if (!data["CHECKED"]) {
                            //select the row
                            $grid1.pqGrid("selection", { type: 'row', method: 'add', rowIndx: rowIndx });
                        }
                        else {
                            //un select the row
                            $grid1.pqGrid("selection", { type: 'row', method: 'remove', rowIndx: rowIndx });
                        }
                        evt.stopPropagation();
                        evt.preventDefault();
                        return false;
                    }
                }
            }
            catch (exx) {
                var laa = exx;
            }
        };
        newObj.cellClick = function (evt, ui) {
            try {
                //debugger;
                var rowIndx = ui.rowIndx, colIndx = ui.colIndx,
                    column = ui.column, data = ui.rowData;

                if (column && column.dataIndx == "CHECKED") {
                    var dataIndx = column.dataIndx;

                    if (!data[rowIndx][dataIndx]) {
                        $grid1.pqGrid("selection", { type: 'row', method: 'add', rowIndx: rowIndx });
                    }
                    else {
                        $grid1.pqGrid("selection", { type: 'row', method: 'remove', rowIndx: rowIndx });
                    }
                    evt.stopPropagation();
                    return false;
                }
            }
            catch (exx) {
                var laa = exx;
            }
        };
        try{

            var $grid1 = $("#slickGridContainer_" + gridcount).pqGrid(newObj);
        }
        catch (ex) {
            var al = ex;
        }