Insert news row at the selected rows

[STEVE]

Dear paramvir,

I want to know how to add new rows where I select rows.

Below code only add new row at the end of rows of the grid.  I need to change it.

Please help me.

Code: [Select]

{
                        type: 'button', icon: 'ui-icon-plus', label: 'New', listener: function () {
                            //append empty row at the end.                           
                            // ------------------------------------------------------
                            var rowData = { };    //empty row
                            // ------------------------------------------------------
                            var rowIndx = this.addRow({ rowData: rowData, checkEditable: true });
                            this.goToPage({ rowIndx: rowIndx });
                            this.editFirstCellInRow({ rowIndx: rowIndx });
                        }
                    },

Best regards,
Steve.

[paramvir]

It's mentioned in the API along with an example how to insert a row at a certain rowIndx.

https://paramquery.com/pro/api#method-addRow

Assuming that you are using selectionModel.type = 'row'

It's mentioned in the API how to get rowIndx of selected row/rows ( when selectionModel.type = 'row' )

https://paramquery.com/pro/api#method-SelectRow

[STEVE]

My problem is I don't know how to code with jQuery and PHP and PostgreSQL. 

I just reuse your demo files without changing at all. From the batch editing example file, I just changed the datamodel.

So there is no such a thing :

Code: [Select]

Initialize the pqGrid with selectionModel option specified.

pq.grid( selector, {selectionModel: { type: 'cell', mode: 'block'} } );

Get or set the selectionModel option, after initialization:
//getter
var selectionModel=grid.option( "selectionModel" );
 
//setter
grid.option( "selectionModel", {type: 'row', mode: 'single'} );


I am confused with two differents type to code.  I feel I have to follow below style. because the most of the domos file are this style.

Code: [Select]

        var obj = {
            hwrap: false,
            //autoRow: false,
            rowHt: 32,
            rowBorders: false,
            trackModel: { on: true }, //to turn on the track changes.
            scrollModel: {
                horizontal: true
            },
            swipeModel: { on: false },
            editor: {
                select: true
            },

I need exactly perfect sample code. Honestly, I don't know yet.

Code: [Select]

var obj = {
     selectionModel : {type: 'row', mode: 'block'},

 

All of these codes make me sick.   I don't know how to handle these things.
I can't find these things in the PHP book I brought, youtube, the internet, etc.

Code: [Select]


var sel = grid.SelectRow();  --> rowIndx = rid.SelectRow()  ???


//Insert an empty row at rowIndx : 3  --> How to get 3. Where ???
grid.addRow(
    { newRow: {}, rowIndx: 3 }
);
 
//Insert multiple rows at once.
grid.addRow( {
    rowList:[
        { newRow: {}, rowIndx: 3 },
        { newRow: { product: 'Apple' }, rowIndx: 5 }
    ]
});


Best regards,
Steve 

[paramvir]

Code: [Select]

var ri = grid.Selection().address()[0].r1; //get selection rowIndx
grid.addRow({
          rowIndx: ri + 1, //pass to addRow
          newRow: rowData 
})


[STEVE]

I am sorry to say that it doesn't work at all.

There is nothing change at all.

[paramvir]

grid variable points to js instance of the grid.

https://paramquery.com/pro/tutorial#topic-special-vars

If you are using this code in the toolbar listener function and you don't have grid variable in the scope, then you can replace grid by this.

Code: [Select]

var ri = this.Selection().address()[0].r1; //get selection rowIndx
this.addRow({
          rowIndx: ri + 1, //pass to addRow
          newRow: rowData
})

PS: Debug your code to troubleshoot any problem and check your browser console for errors.

[STEVE]

Finally, it does work!

Thank you.