refreshing nested table without collapse

[forexdude1234Participant]

Looking at https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-nested-tables.htm

eg: https://www.jqwidgets.com/community/topic/updatebounddata-and-rowdetails/

Hi defyent,

Unfortunately, there’s no built-in way in the widget to remember the expand/collapse state. When the widget is re-bound, it re-renders itself and looses the state.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

It seems updateBoundData collapses the rows, which is a bit of a show stopper.

I am trying to work around this issue with updateRow, but I forsee complications ahead (insert/delete, etc). Basically, I need to write all the logic by hand.

Was wondering if there was a better way to do this?

Thanks for any help on this matter.

Cheers,

FD.

[Yavor DashevParticipant]

Hi forexdude1234,

Yes, unfortunately when using the updateBoundData method it collapses the expanded rows and if you don’t want to have this behavior you will have to use the updateRow method to achieve this.

However I have created a workaround that may suit your use case and it uses the updateBoundData method and after updating the data we bind of the bindingComplete event and in it we expand the rows we need to.

A code snippet that I have created for this case:

            let allExpandedRows=[];
            // create jqxDataTable.
            $("#dataTable").jqxDataTable(
            {
                width: getWidth("dataTable"),
                source: source,
                pageable: true,
                pageSize: 3,
                rowDetails: true,
                initRowDetails: initRowDetails,
                columns: [
                      { text: 'First Name', dataField: 'FirstName', width: 250 },
                      { text: 'Last Name', dataField: 'LastName', width: 250 },
                      { text: 'Title', dataField: 'Title' }
                  ]
            });

            $('#dataTable').on('rowExpand', function (event)
                {
                    // event args.
                    var args = event.args;
                    // row data.
                    var row = args.row;
                    // row index.
                    var index = args.index;
                    // row's data bound index.
                    var boundIndex = args.boundIndex; 
                    
                    if(!allExpandedRows.includes(boundIndex)){
                        allExpandedRows.push(boundIndex);
                    }
                });

                $('#dataTable').on('rowCollapse', function (event)
                {
                    // event args.
                    var args = event.args;
                    // row data.
                    var row = args.row;
                    // row index.
                    var index = args.index;
                    // row's data bound index.
                    var boundIndex = args.boundIndex; 

                    if (allExpandedRows.indexOf(boundIndex)!= -1) {
                        allExpandedRows.splice(boundIndex , 1);
                    }
                });

             
                $('#updateBtn').on('click', function () {
                    $("#dataTable").jqxDataTable('updateBoundData');
                    
                    const rowIndexes= allExpandedRows;
                    allExpandedRows = [];

                    $('#dataTable').on('bindingComplete', function (event) {
                        for(let i = 0; i < rowIndexes.length; i ++ ) {
                            $("#dataTable").jqxDataTable('showDetails', rowIndexes[i]);
                        };  
                     }); 
                })

et me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[Author]

Posts