jQuery UI Widgets Forums DataTable issue with button click in nested datatable

This topic contains 4 replies, has 2 voices, and was last updated by  Dimitar 3 years, 11 months ago.

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

  • nithin
    Participant

    I have two button in a nested datatable cell along with a value I need to increase and/or decrease based on button click

    Looks something like this: < 0/5 >
    Arrows are button and it will update 0 based on button clicks.

    The issue I’m facing is that the click event repeats based on how many rowdetails were expanded after the rowdetails containing nested table of the button click. Also, when I try to setCellValue in button click, the click event does not trigger when I click a second time, unless I expand another rowdetail, in which case it will trigger and occur a number of times based on how many rowdetails were opened .

    Heres the part of my code with initrowdetails

    
                if (nestedDataTable != null) {
                    var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
                    nestedDataTable.jqxDataTable({
                        source: nestedGridAdapter, theme: theme_secondary, width: 'auto', height: 'auto', autoRowHeight: true, altRows: true, enableHover: false, selectionMode: 'custom', enableBrowserSelection: true,
                        rendered: function(){
                            if($('.button-poured-control').length > 0){
                                $('.button-poured-control').jqxButton({ theme: theme_primary, width: 25 });
                            }
                            if($('.button-production-schedule').length > 0){
                                $('.button-production-schedule').jqxButton({ theme: theme_primary, width: 100 });
                            }
                        },
                        columns: [
                            { text: 'Order id', datafield: 'order_pkeyid', hidden: true },
                            { text: 'Order id', datafield: 'order_items_pkeyid', hidden: true },
                            { text: 'Forms', datafield: 'order_items_formspkeyid', width: 80 },
                            { text: 'Qty', datafield: 'order_items_quantity', width: 50 },
                            { text: 'Colour', datafield: 'order_items_colour', width: 100},
                            { text: 'Finish', datafield: 'order_items_finish', width: 100},
                            <strong>{ text:"Items poured", dataField: 'order_items_poured', hidden: true },
                            { text:"Items poured", dataField: 'poured_qty', width: 160,
                                cellsrenderer: function (row, column, value, rowData)
                                {
                                    var orderid = rowData.order_pkeyid;
                                    if(rowData.order_items_poured != null){
                                        return  '<div style="padding: 0;">' +
                                            '<button type="button" id="pouredup'+ orderid + row +'" class="button-poured-control button-poured-up" data-row="'+row+'"> + </button>' +
                                            '<div style="width: 70px; display: inline-block; text-align: center;">' + rowData.order_items_poured +'/' + rowData.order_items_quantity + '</div>' +
                                            '<button type="button" id="poureddn'+ orderid + row +'" class="button-poured-control button-poured-down"  data-row="'+row+'"> - </button>' +
                                            '</div>';
                                    }
                                    else{
                                        return '<div style="padding: 0; width:100%; height: 100%; text-align: center;"><input type="button" id="schedule'+ orderid + row +'" class="button-production-schedule"  data-row="'+ row +'" value="Schedule"></div>';
                                    }
                                }
                            }</strong> 
                        ]
                    });
                    nestedTables[id] = nestedDataTable;
    
    //                dynamic height for row details to fit nested table
                    rowinfo.detailsHeight = nestedDataTable.height() + 20;
    
                    <strong>$('.button-poured-up').click(function(event){
                        var button_id = event.target.getAttribute('id');
                        var orderid = button_id.substr(8,7);
                        var rowIndex = button_id.substr(15);
                        var tableid = "#nestedtable"+ orderid ;
    
                        var poured = $(tableid).jqxDataTable('getCellValue', rowIndex, 'order_items_poured');
                        var newpoured = parseInt(poured) + 1;
                        $(tableid).jqxDataTable('setCellValue', rowIndex, 'order_items_poured', newpoured);
                    });</strong>
    
                }
            }
    
    • This topic was modified 3 years, 12 months ago by  nithin. Reason: removed columns from code that are unrelated to issue for clarity

    Dimitar
    Participant

    Hello nithin,

    We recommend binding to the buttons’ click event in the jqxDataTable callback function rendered, as shown in the demo Row Template. Please refer to it.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    nithin
    Participant

    Thanks a lot, that does fix my issue. Really appreciate the help.


    nithin
    Participant

    Hey Dimitar,
    the button is in a cell of nested datatable.
    The issue still remains where the click event fires multiple times based on how many rows are expanded after expanding the row where the button is. So, for example I expand row1 and click button, event fires once. If I expand row1, row2, row3 and click button in nested datatable in rowdetails of row1, the click event fires 3 times.

    • This reply was modified 3 years, 11 months ago by  nithin.

    Dimitar
    Participant

    Hi nithin,

    Please try applying a specific class to your buttons based on the nested table they are in. The class can be based on the master table’s row the nested table belongs to.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.