Grid selected rows problem

[dan123Participant]

Hi I have two grids. with the main grid having 2 nested grids.

I will explain as an example of demo:

Main Grid
Step: 1 – Select Row 1
Step: 2 – Row 1: Expand, from first nested grid row 1 edit the “Edit Amount Column” as $1.00
Step: 3 – Click Submit
Look at Grid 2 it shows the value that you entered, now try delete this row and it will send back the calculation to reset.

Same goes for Row 2. you can select multiple from first nested grid and edit the “Edit Amount Column” and it will send these down to Grid 2.

Problem i am facing is that:
When I do multiple selection from my Main grid, its not working correctly. Only my latest selection will work and my delete also functions strange because of this too.

Try selecting both rows from Main grid and edit some rows from its first nested grid and submit. You will see the problem then.

I know its something to do with my submit button and the delete button functions.

i really need a workaround for this. Please need help on this

Here is my example link:
https://www.jseditor.io/?key=jqxgrid-custom-

[HristoParticipant]

Hello dan123,

I would like to ask you to save your demo again but before that to turn on the option “Everyone” from menu ‘Share’.
Also, this topic looks like this one.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[dan123Participant]

oh haha sorry Hristo. I keep forgetting the set “Everyone”. I just set it so please need your help

[HristoParticipant]

Hello dan123,

Your code is too extensive for us to review thoroughly.
You could check your data when you add in the second Grid there looks like it has records with same IDs. You use same ID selector for all inner (nested) grids – “#grid”. You should determinate specific ID for each one. Please, take a look at this tutorial: https://www.jqwidgets.com/assembling-n-nested-jquery-grid/

It looks like this is an issue that become from initial design of this project. Could you clarify it, with more details? What you try to achive?
Also, please provide us a simple example with a concrete issue.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[dan123Participant]

Yeah sorry this is the simpler example since it deals with nested grid the code will be long. I know where i am having problem which is the submit button and the delete button functions. I am not sure if did them correctly, so maybe ur thoughts on those parts will help.

[HristoParticipant]

Hello dan123,

I think the design is not correct. When editing “Edit Amount” column it is used for two things. The first time it is used to add/subtract value. The second time it takes the ‘total value’ (calculation of the ‘Total Amount’). Why you do not use an additional column to make this calculation and as I saw the other two columns have that.
I would like to suggest you make research on that part.
Also, you could have a column that contains a real amount of the value (instead of writing 2 you just down the value from 30 to 28).

When I try to edit second nested Grid it throws an error (check this field – “newcid”).
It will be better if you have a reference for all nested grid (with real ID). You could add own ID for each one nested Grid before you initialize it.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[dan123Participant]

Hi Hristo,

Notice when i select both rows it unchecks the first one. I am still not sure how to do this part that you mentioned – “It will be better if you have a reference for all nested grid (with real ID). You could add own ID for each one nested Grid before you initialize it.”

I know its a strange example but just need help returning the values to the first sub grid.

Here is the example:
https://jseditor.io/?key=jqxgrid-custom-

[HristoParticipant]

Hello dan123,

I am not sure what you try to achieve and how to reproduce your issue.
About my thoughts – I would suggest you try to collect all created ‘nested’ grids IDs in an array.
On that way you could easy get reference to each one particular grid. (by design the container in rowdetailstemplate set different ID for the “div” container in each one row)
Please, take a look at this approach:

var upperGridsArray = [];
var lowerGridsArray = [];
var initrowdetails = function (index, parentElement, gridElement, record) {
		var id = record.uid.toString();
		//var information = $($(parentElement).children()[1]);	
		var information3 = null;
		var information = $($(parentElement).children()[0]);
		var grid = $($(parentElement).children()[1]);

		var currentID = 'upperGrid' + index;
		upperGridsArray[index] = currentID;
		$(grid[0]).attr('id', currentID);
		...
		//TODO: for 'lowerGridsArray' - "grid2"
};

The purpose of this is easy to refer to all grids.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[dan123Participant]

OK i updated based on what you provided.
var upperGridsArray = [];
var lowerGridsArray = [];
//var nestedGrids3 = new Array();
// create nested grid.
var initrowdetails = function(index, parentElement, gridElement, record) {
var id = record.uid.toString();
//var information = $($(parentElement).children()[1]);
var information3 = null;
var information = $($(parentElement).children()[0]);
var grid = $($(parentElement).children()[1]);
var grid2 = $($(parentElement).children()[2]);
var currentID = ‘upperGrid’ + index;
upperGridsArray[index] = currentID;
$(grid[1]).attr(‘id’, currentID);

var currentID2 = ‘lowerGrid’ + index;
lowerGridsArray[index] = currentID2;
$(grid2[2]).attr(‘id’, currentID2);

Now the “Submit” button event doesn’t work. Throws some script error. Really need your help Hristo.

Also wanted to mention is that on the “Submit” button click event, the first level nested grid is the one below, is it correct way to initialize a method? I am still not sure how to call a nested grid from outside of “if (grid != null) {}” statement.

$(grid[1]).jqxGrid(‘getselectedrowindexes’);

Here is update:
https://www.jseditor.io/?key=grid-custom-

[dan123Participant]

The submit button event seems to work now, and moved the delete button of jqxgrid2 to another script tag on the html code page.
Moved the “submitcorrection” button click event inside “if (grid != null) {}” statement because it seems like the multiple selection kind of works but it creates duplicates with lot of $0.00 amounts. Also doesn’t give any script error either. So good news on that part.

Test case:
Check both rows, and check the first row of nested grid for both rows of main grid. Try editing the value of “Edit Amount” and Click submit. Check the grid below

Updated the link:
https://www.jseditor.io/?key=grid-custom-3

[HristoParticipant]

Hello dan123,

Your last example is not shared.
This is a case where you make customizations and if you have some a concrete issue with our widgets please write it with a simple example and the steps to reproduce it.
Also, this project will be better to think about the UX when I start to edit a cell (‘Edit Amount’) I will think how to change the value. Maybe if it has one more column that you use for subtraction or to add arrows for the input to be more sensitive. Another thing about this project it should refer to “backend” for these specific manipulations (transactions). I would suggest you separate your functionalities.

I would like to mention that again this project has a lot of customizations and I cannot find the issue relevant to our widgets.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts