jQuery UI Widgets Forums DataTable refreshing nested table without collapse

This topic contains 1 reply, has 2 voices, and was last updated by  Yavor Dashev 1 month, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • forexdude1234
    Participant

    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.

    • This topic was modified 1 month, 2 weeks ago by  forexdude1234.

    Yavor Dashev
    Participant

    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

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

You must be logged in to reply to this topic.