jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid: rowdetails display issue
Tagged: grid rowdetails
This topic contains 6 replies, has 2 voices, and was last updated by AllanD 5 years, 3 months ago.
-
Author
-
Hi, I am programatically opening and closing row details using row select and unselect events. However, when the row details are opened or closed this way the grid display is reset to start at the first row.
Is this resetting of grid display behaviour a bug or am I doing something wrong?
I have replicated the issue with your rowdetails.htm demo code by modifying the jqxGrid definition. In particular, I have added “selectionmode” and turned off “showrowdetailscolumn” and have added row select and unselect functions to show and hide row details.
$("#grid").jqxGrid( { width: getWidth('Grid'), height: 250, source: dataAdapter, selectionmode: 'multiplerows', showrowdetailscolumn: false, rowdetails: true, rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li>Notes</li></ul> <div class='information'></div><div class='notes'></div></div>", rowdetailsheight: 200 }, ready: function () { // $("#grid").jqxGrid('showrowdetails', 0); // $("#grid").jqxGrid('showrowdetails', 1); }, initrowdetails: initrowdetails, columns: [ { text: 'First Name', datafield: 'firstname', width: 200 }, { text: 'Last Name', datafield: 'lastname', width: 200 }, { text: 'Title', datafield: 'title', width: 180 }, { text: 'City', datafield: 'city', width: 100 }, { text: 'Country', datafield: 'country'} ] }); $("#grid").on('rowselect', function(event) { $("#" + event.currentTarget.id).jqxGrid('showrowdetails', event.args.rowindex); }); $("#grid").on('rowunselect', function(event) { $("#" + event.currentTarget.id).jqxGrid('hiderowdetails', event.args.rowindex); }); });
Thanks in advance for your help,
Allan
Hello AllanD,
I am not sure what you want to achieve.
But in your case when clicking on one row and it is selected then it shows its details.
Related to this action it happens the opposite that hides details on the old selected row.After a few tests, I find a case where the first row is expanded but from the arrow.
Then when selecting another row the previous one does not hide details.
Because the implementation of the logic to hide the previous row is based on that it is selected but it is not.
You could try this approach below only in therowselect
event:$("#grid").on('rowselect', function (event) { var rows = $('#grid').jqxGrid('getrows'); for (var i in rows) { $("#grid").jqxGrid('hiderowdetails', i); } $("#" + event.currentTarget.id).jqxGrid('showrowdetails', event.args.rowindex); });
If you provide more details then I could provide you a better solution.
Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHi Hristo, Sorry for the confusion, my description of the issue was incomplete.
In the modified demo the opening and closing of row details works and displays as expected as long as you do not scroll down. For example, if you scroll down to “Laura” or “Anne” and select one of them the row details are opened but the grid display is reset to the beginning of the data, ie “Nancy” is displayed first and the row details and selected row are no longer visible.
Hope this is clearer,
Allan
Hello Allan,
I would like to suggest you one simple solution with the
ensurerowvisible
method.
After you expand the row you could try to invoke the mentioned method.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHi Hristo,
I did try that before and I found that
ensurerowvisible
method aligns the row you provide at the bottom of the displayed grid rows. This means that the opened row details are displayed off the bottom of the grid. I then calledensurerowvisible
with row + 1 and this does ensure row details are visible.However, the overall behaviour of opening and closing row details in this way is for the position of the selected row to be displayed in different positions which is disconcerting.
Does this mean it is not possible to have the same behaviour as row details button by calling
showrowdetails
andhiderowdetails
methods?Best regards,
Allan
Hello Allan,
You could check if this is the last record and handle it.
I mean that you could try to use thescrolloffset
in that case.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHi Hristo,
Thanks, using
scrollposition
andscrolloffset
replicates exactly the behaviour using row details button.Best regards,
Allan
-
AuthorPosts
You must be logged in to reply to this topic.