jQWidgets Forums

jQuery UI Widgets Forums Grid Grid: rowdetails display issue

This topic contains 6 replies, has 2 voices, and was last updated by  AllanD 5 years, 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Grid: rowdetails display issue #107860

    AllanD
    Participant

    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

    Grid: rowdetails display issue #107905

    Hristo
    Participant

    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 the rowselect 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 Hristov

    jQWidgets team
    https://www.jqwidgets.com

    Grid: rowdetails display issue #107912

    AllanD
    Participant

    Hi 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

    Grid: rowdetails display issue #107934

    Hristo
    Participant

    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 Hristov

    jQWidgets team
    https://www.jqwidgets.com

    Grid: rowdetails display issue #107941

    AllanD
    Participant

    Hi 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 called ensurerowvisible 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 and hiderowdetails methods?

    Best regards,

    Allan

    Grid: rowdetails display issue #107986

    Hristo
    Participant

    Hello Allan,

    You could check if this is the last record and handle it.
    I mean that you could try to use the scrolloffset in that case.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    Grid: rowdetails display issue #108007

    AllanD
    Participant

    Hi Hristo,

    Thanks, using scrollposition and scrolloffset replicates exactly the behaviour using row details button.

    Best regards,

    Allan

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.