Move row selection along with focus

[hirehop]

1 - can navigate the row using keyboard like up/down arrow key or home/end button in the grid with selection  ?
2- In the format, it would be nice to have an extra option of nested with "lft" & "rgt" fields
3- tree grid filter issue - blow code ref. error in attach image

Code: [Select]

$("#tree").pqGrid({
            dataModel: {data: []},
            colModel : [
                {dataIndx:"TITLE", title:lang.itemTxt, halign:"center", sortable:false,
                    filter:{crules:[{condition: 'contain'}], style:"text-align:left;"},
                    render:function(ui){
                        return that.render_node_txt(ui);
                    }
                },
                ....
            ],
           
            numberCell: {show: false}, // The left number cell index column off
            animModel: {on: true, duration: 290}, // Turn on animation
            stripeRows: true, // Show stripes
            menuIcon: false,
            scrollModel:{autoFit:true}, // show scroll
            flex: {on:true}, // Width of headers auto fit
            width: "100%",
            dragColumns: {enabled:false},
            // DISPLAY
            hoverMode: "row", // on hover change color effect
            showTitle: false, // Hide table title
            wrap: false, // Cell content on one line
            hwrap: false, // header content on one line
            showTop: false, // Hide top  (including col move icons)
            selectionModel: {type:"row", mode:"single", column:false, all:false}, // Select rows
            editable: false, // not able to edit
            sortable: false,
            //virtualWin: true,    // Faster rendering - Causes a crash in TreeGrid
            rowInit: function(ui){
                var cls = "";
                // Is there anything left to assign
                if(
                    intval(ui.rowData["TYPE"])!==0 && intval(ui.rowData["TYPE"])!==5 &&
                    typeof(that.data.assigned)==="object" && !empty(ui.rowData["item_index"]) && typeof(that.data.assigned[ ui.rowData["item_index"] ])!=="undefined"
                )
                {
                    // Have all items been assigned
                    if(floatval(that.data.assigned[ ui.rowData["item_index"] ]) >= floatval(ui.rowData["QUANTITY"]))   
                        cls = "silvertext";
                    // Has every ordered item been checked out (none assigned, but all out)
                    else if(
                        typeof(that.data.quantities)==="object" && !empty(ui.rowData["index"]) && typeof(that.data.quantities[ ui.rowData["index"] ])!=="undefined" &&
                        floatval(that.data.quantities[ ui.rowData["index"] ]["remain"]) <= 0
                    )
                        cls = "silvertext";
                }
                // Return a class
                return {
                    cls: cls
                };
            },
            // filter colums
            filterModel: {
                on: true,
                header: true,
                menuIcon: false
            },
            // Tree
            treeModel: {
                dataIndx: "TITLE",           
                id: "item_index",
                filterShowChildren: true,
                icons: true,
                render: function(ui){
                    // If the item is an autopull, the icon is grey
                    var autopull = empty(ui.rowData["AUTOPULL"]) ? "" : " silvertext";
                    switch(intval(ui.rowData["TYPE"])) { // 4 = labour & 6=calculated (both not used here)
                        case 1: // Consumable
                            return {iconCls: "ui-icon-cart-b"+autopull};
                            break;
                        case 2: // Stock
                            return {iconCls: "ui-icon-gear"+autopull};
                            break;
                        case 3: // Custom
                            return {iconCls: "ui-icon-radio-off"+autopull};
                            break;
                        case 4: // Labour (not used)
                            return {iconCls: "ui-icon-person"+autopull};
                            break;
                        case 5: // Comment
                            return {iconCls: "ui-icon-comment"+autopull};
                            break;
                        case 6: // Calculated (not used)
                            return {iconCls: "ui-icon-calculator-b"+autopull};
                            break;
                    }
                }
            }
        });
    },



[paramvir]

Key navigation works with row selection.

https://paramquery.com/pro/demos/selection_row

If you want to move the row selection along with focus, then use focus event listener:

Code: [Select]

focus: function(evt, ui){
debugger;
var SR = grid.SelectRow(), obj = {
rowIndx: ui.rowIndxPage
};
if( !SR.isSelected( obj ) ){
SR.replace(obj );
}
},

Note: above code is for grid without paging.

3. Error in treegrid doesn't seem related to virtualWin. Do you get the error without virtualWin option.

PS: It would be greatly appreciated if you kindly post different questions in separate posts.

[hirehop]

yes row selectiion is work but i wanted to select multiple row if poosible select with shift or ctrl key like
with shift key select bunch of row and ctrl key select multiple rows from grid

[paramvir]

Multiple contiguous rows can be selected with Shift - click as in this example: https://paramquery.com/pro/demos/selection_row

For selecting multiple non-contiguous rows, you have to use:

Code: [Select]

selectionModel: { type: 'row', toggle: true },

BTW there are other ways also to select rows:

1) use checkbox.

https://paramquery.com/pro/demos/selection_checkbox

2) set selectionModel.type to cell and click, ctrl-click, shift-click on number cells to select multiple rows as in this example.

https://paramquery.com/pro/demos/selection_multiple