Author Topic: Checkbox selection not working properly  (Read 8031 times)

michaellaborde

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 4
    • View Profile
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;
        }

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5784
    • View Profile
Re: Checkbox selection not working properly
« Reply #1 on: June 10, 2014, 11:27:02 pm »
Selections work the way they are supposed to be. Keyboard navigation is bound to the selections i.e current selection moves along with the key. This behavior is similar to MS Excel.

Solution:

May be you don't need the selections, but just need to merely highlight the rows when you click on the checkbox. You can use this API to do this:

addClass (when ckeckbox is checked ) , removeClass (when checkbox is unchecked ), getRowsByClass ( to get all highlighted rows )

http://paramquery.com/pro/api#method-addClass
http://paramquery.com/pro/api#method-removeClass
http://paramquery.com/pro/api#method-getRowsByClass
« Last Edit: June 10, 2014, 11:29:23 pm by paramquery »

michaellaborde

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 4
    • View Profile
Re: Checkbox selection not working properly
« Reply #2 on: June 11, 2014, 01:00:26 am »
Hello paramquery!
Thanks a lot for the response!
What happens if I have virtualization on?? The classes remains and all the selected rows will be returned??
This is the example of code that loses the keyboard navigation http://jsfiddle.net/4VNyB/
After selecting first checkbox, if I press tab, it duplicates the check column :(
I just need the navigation and functionality of the Custom selection sample of non pro grid, but in Pro version it doesn't seem to work :(
Looking forward for your answer!
Best regards

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5784
    • View Profile
Re: Checkbox selection not working properly
« Reply #3 on: June 11, 2014, 10:41:49 am »
Classes added by paramquery API are not lost even in virtual mode.

Please refer this demo:

http://paramquery.com/pro/demos/row_styles
« Last Edit: June 11, 2014, 10:43:58 am by paramquery »

michaellaborde

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 4
    • View Profile
Re: Checkbox selection not working properly
« Reply #4 on: June 16, 2014, 07:35:08 pm »
Thanks a lot! It worked
Best regards