ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: mikep on March 05, 2020, 09:34:12 pm

Title: Add new row beneath drop row and apply format
Post by: mikep on March 05, 2020, 09:34:12 pm: 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?
Title: Re: Add new row beneath drop row and apply format
Post by: paramvir on March 06, 2020, 11:40:08 am: 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 })
Title: Re: Add new row beneath drop row and apply format
Post by: mikep on March 06, 2020, 07:18:41 pm: 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
});
Title: Re: Add new row beneath drop row and apply format
Post by: paramvir on March 06, 2020, 08:55:29 pm: Please share a jsfiddle.
Title: Re: Add new row beneath drop row and apply format
Post by: mikep on March 10, 2020, 03:52:04 am: 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.
Title: Re: Add new row beneath drop row and apply format
Post by: paramvir on March 10, 2020, 10:48:14 pm: There is no addRow method in your jsfiddle.

Please note that pq_rowstyle: { background: ""#ff0000" } is a property of newRow.
Title: Re: Add new row beneath drop row and apply format
Post by: mikep on March 10, 2020, 11:03:46 pm: 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,
});
Title: Re: Add new row beneath drop row and apply format
Post by: paramvir on March 10, 2020, 11:45:17 pm: Please check this: https://jsfiddle.net/u9xa0Lrb/1/

and use the latest version 7.1.0 of pqgrid.
Title: Re: Add new row beneath drop row and apply format
Post by: mikep on March 11, 2020, 01:04:37 am: That worked. Thank you. I am trying the same syntax with updaterow now and it's not coloring:
https://jsfiddle.net/942v085w/7/
Title: Re: Add new row beneath drop row and apply format
Post by: paramvir on March 11, 2020, 10:05:52 am: Please check this: https://jsfiddle.net/ydft4rLu/

Code: [Select]
this.getRowData({rowIndx:uiDrop.rowIndx}).pq_rowstyle = { background: 'blue' }
Title: Re: Add new row beneath drop row and apply format
Post by: mikep on March 11, 2020, 05:50:10 pm: 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
Title: Re: Add new row beneath drop row and apply format
Post by: mikep on March 12, 2020, 05:39:39 pm: I got it working now. Thank you.
Title: Re: Add new row beneath drop row and apply format
Post by: mikep on April 15, 2020, 01:54:28 am: 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.
Title: Re: Add new row beneath drop row and apply format
Post by: paramvir on April 15, 2020, 05:47:30 pm: 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.
Title: Re: Add new row beneath drop row and apply format
Post by: mikep on April 15, 2020, 07:08:49 pm: 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/
Title: Re: Add new row beneath drop row and apply format
Post by: paramvir on April 16, 2020, 05:19:33 pm: 1. This doesn't work with grouped rows.

Code: [Select]
var ri = $gridRes.pqGrid('addRow', { newRow: { proj: uiDrag.rowData.proj, grp: uiDrag.rowData.grp, pq_rowstyle: { background: "#ff0000" } }, //rowIndx: uiDrop.rowIndx, }); $gridRes.pqGrid('scrollRow', { rowIndxPage: ri }, function(){ //debugger; $gridRes.pqGrid('focus', { rowIndxPage: ri, colIndx: 1 }); });

2. This makes the whole row draggable.

Code: [Select]
clsHandle: 'pq-grid-row',
https://jsfiddle.net/rt8gn1f9/