issue with button click in nested datatable

[nithinParticipant]

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>

            }
        }

[DimitarParticipant]

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/

[nithinParticipant]

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

[nithinParticipant]

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.

[DimitarParticipant]

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/

[Author]

Posts