Add new row beneath drop row and apply format

[mikep]

I'm creating a new grid row in my dropModel:

dropModel: { drop: function (evt, uiDrop)
{
 $gridMain.pqGrid('addRow',  {newRow: {…}}
});


1. The new row is added to the bottom of the grid. How can I add the row directly beneath the row where it was dropped?
2. How can I shade the BGColor of the new row?

[paramvir]

1. uiDrop.rowIndx provides information about rowIndx of drop location. Pass that to addRow() method.

https://paramquery.com/pro/api#option-dropModel

2. Add pq_rowstyle: { background: "#ff0000" } property to new row.

Code: [Select]

grid.addRow({
      newRow: {
          key1: val1,
          key2: val2,
          .....
          pq_rowstyle: { background: "#ff0000" }
      },
      rowIndx: uiDrop.rowIndx
})


[mikep]

Thank you, the drop location now works. My syntax isn't coloring though. Any ideas?

$gridMain.pqGrid('addRow',
    {
        newRow: {
            pq_rowstyle: { background: ""#ff0000" },
            projectuid: uiDrag.rowData.projectuid, res: dropRowData.res, resourceuid: dropRowData.resourceuid
        },
        rowIndx: uiDrop.rowIndx
    });

[paramvir]

Please share a jsfiddle.

[mikep]

https://jsfiddle.net/942v085w/1/

I'm trying to change the row color in the Drop Grid. The fiddle example has an error on drop, which my actual project does not. My main concern is the coloring syntax.

[paramvir]

There is no addRow method in your jsfiddle.

Please note that pq_rowstyle: { background: ""#ff0000" } is a property of newRow.

[mikep]

I need to set background for addRow and updateRow. I've updated the example to use addRow, but need syntax for both.
https://jsfiddle.net/942v085w/4/

Here's what I tried in my project, which doesnt work:
                                            $gridMain.pqGrid('addRow',
                                                {
                                                    newRow: {
                                                        id: "testing color",
                                                        pq_rowstyle: { background: "#ffffff" }
                                                    }, rowIndx: uiDrop.rowIndx,
                                                });

[paramvir]

Please check this: https://jsfiddle.net/u9xa0Lrb/1/

and use the latest version 7.1.0 of pqgrid.

[mikep]

That worked. Thank you. I am trying the same syntax with updaterow now and it's not coloring:
https://jsfiddle.net/942v085w/7/

[paramvir]

Please check this: https://jsfiddle.net/ydft4rLu/

Code: [Select]

this.getRowData({rowIndx:uiDrop.rowIndx}).pq_rowstyle = { background: 'blue' }


[mikep]

Thank you. I updated this to do actions on add/update and it works here: https://jsfiddle.net/jb8ke9q7/1/
When I do the same thing here: https://rpm1.azurewebsites.net/rpm.aspx, The blue coloring and the text changing  (updateRow) does not happen until I call the addRow. It's like it's a step behind. Any suggestions? To recreate:
1. Drag xxxx ADMD (on left grid) onto xxxCRAL
2. Drag xxx CRAL (on left) onto Mike Peterson

[mikep]

I got it working now. Thank you.

[mikep]

For this example: https://jsfiddle.net/4s6akemd/2/

1. when I drag/drop on groupings, the drag item get dropped in a new group at the bottom of the grid. This is fine/expected, but how can I give focus to the new row, so the user can see the new item, particularly if it scrolls off the viewable area of grid.

2. Can I drag items by grabbing the items text, in addition to the "||" on the far left of the item. That way it's quicker for users to grab the row they want to drag.

[paramvir]

1. Please use scrollRow and focus methods.

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

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

2. Please use combination of dragModel.clsHandle and dragModel.diDrag options.

[mikep]

Thank you. I have attempted to do these in the link below. Any advice on what I need to change?
1. How do I specify the rowIndxPage? Dont I just need to set the focus on the last row in the grid, if that's where it is dropped? Also, if grouping is removed I'd like the row dropped where it is dragged. I was using "rowIndx: uiDrop.rowIndx" which works, but I'm guessing I need to check if grouping is applied, since this doesn't work with grouped rows

2. I changed colIndexes, but don't know how to allow drag if they select anywhere in the row, rather than just the "||" area to the left.

https://jsfiddle.net/cu16n4wx/1/