Editor not invoked in child table

Editor not invoked in child table

shatrughanshatrughan Posts: 85Questions: 15Answers: 0

Hi everyone..

Given below is the link to my page where I have used parent-child system.
https://e-reporting.in/Data/HTC_Bill/index1.php

When I expand the first column i.e. Bill **of any row, the child table gets populated and new row could be added using Add Bill button. But when click on subsequent rows to expand them, the **Add Bill Button doesn't work as an **empty editor **without any fields do appear.

Please see and help me to get rid of the above.

Thanks & Regards
Shatrughan Sangwan

This question has accepted answers - jump to:

Answers

  • shatrughanshatrughan Posts: 85Questions: 15Answers: 0
    edited February 2020

    My primary table is htc. Here is how I coded the parent-child tables but editor in child table is working once after loading.

    function format(rowData) {
                  var childTable = '<table id="cl' + rowData.id + '" class="display compact nowrap w-90" width="90%">' +
                  '<thead style=""><tr><th>Bill</th><th>Bill Number</th><th>Bill Date</th><th>Bill From</th><th>Bill To</th><th>Bags</th><th>Qty</th><th>Handling_Amt</th><th>TPT_Amt</th><th>Total</th><th>Site</th></tr></thead >' +
                  '</table>';
                  return $(childTable).toArray();
                }
            
    
    $('#htc tbody').on('click', 'td.details-control', function () {
                                  var tr = $(this).closest('tr');
                                  var row = table.row(tr);
                                  var rowData = row.data();
                                  if (row.child.isShown()) {
                                    // This row is already open - close it
                                    row.child.hide();
                                    tr.removeClass('shown');
                        
                                    // Destroy the Child Datatable
                                    $('#cl' + rowData.id).DataTable().destroy();
                                  }
                                  else {
                        
                                    row.child(format(rowData)).show();
                                    var id = rowData.id;
                        
                                    var childTable_Editor = new $.fn.dataTable.Editor({
                                      ajax: {
                                        url: "fetch_Centre_Wise_Bill.php",
                                        data: function(d) {
                                          d.site = rowData.id;
                                        }
                                      },
                        
                                      table: $('#cl' + id),
                                      template: '#customForm1',
                        
                                      fields: [
                                        {
                                          label: "Bill Number:",
                                          name: "htc_bill.Bill_Number",
                                        },
                                        {
                                          label: "Bill Date:",
                                          name: "htc_bill.Bill_Date",
                                          type:   'datetime',
                                          format: 'DD-MM-YYYY',
                                        },
                                        {
                                          label: "Period From:",
                                          name: "htc_bill.Bill_From",
                                          type:   'datetime',
                                          format: 'DD-MM-YYYY',
                                        },
                                        {
                                          label: "Period To:",
                                          name: "htc_bill.Bill_To",
                                          type:   'datetime',
                                          format: 'DD-MM-YYYY',
                                        },
                                        {
                                          label: "Bags Handled:",
                                          name: "htc_bill.Bags_Handled",
                                        },
                                        {
                                          label: "Qty Transported:",
                                          name: "htc_bill.Qty_Transported",
                                        },
                                        {
                                          label: "Handling Amount:",
                                          name: "htc_bill.Handling_Amt",
                                        },
                                        {
                                          label: "Transport Amount:",
                                          name: "htc_bill.TPT_Amt",
                                        },
                        
                                        {
                                          label: "Total Amount:",
                                          name: "htc_bill.Total_Amt",
                                        },
                                        {
                                          label: "id:",
                                          type:    "hidden",
                                          name: "htc_bill.site",
                                          def:rowData.id
                                        }
                                      ],
                                    });
                                    // Open this row
                                    childTable = $('#cl' + id).DataTable({
                                      dom: "Bfrtip",
                                      ajax: {
                                        url: "fetch_Centre_Wise_Bill.php",
                                        type: "post",
                                        data: function(d) {
                                          d.site = rowData.id;
                                        }
                                      },
                                      columns: [
                                        {
                                          className: 'details-control1',
                                          orderable: false,
                                          data: null,
                                          defaultContent: ''
                                        },
                        
                                        { title:"Bill Number", data: "htc_bill.Bill_Number" },
                                        { title:"Bill Date", data: "htc_bill.Bill_Date" },
                                        { title:"Period From", data: "htc_bill.Bill_From" },
                                        { title:"Period_To", data: "htc_bill.Bill_To" },
                                        { title:"Bags Handled", data: "htc_bill.Bags_Handled" },
                                        { title:"Stock Transported", data: "htc_bill.Qty_Transported" },
                                        { title:"Handling Amount", data: "htc_bill.Handling_Amt" },
                                        { title:"Transportation Amount", data: "htc_bill.TPT_Amt" },
                                        { title:"Total Amount", data: "htc_bill.Total_Amt" },
                                        { title:"Site", data: "htc_bill.site" }
                                      ],
                                      columnDefs: [
                                        {
                                          targets: [2, 3, 4, 5, 6, 7, 8, 9],
                                          className: "fee-col"
                                        },
                                        {
                                          targets: [1],
                                          className: "label-col"
                                        }
                                      ],
                                      select: true,
                                      select: {
                                        style: "os",
                                        selector: "td:not(:first-child)"
                                      },
                                      buttons: [
                                        { extend: "create", text:"Add Bill", editor: childTable_Editor },
                                        { extend: "edit", editor: childTable_Editor },
                                        { extend: "remove", editor: childTable_Editor }
                                      ],
                                    });
                        
                                    tr.addClass('shown');
                                  }
                        
                                });
    

    The above code snippet is inside of $(document).ready(function ().
    Regards,
    Shatrughan

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Seems like your code should work. Even opening, editing, closing and reopening the same child row fails. The only thing I see that stands out as different from the https://datatables.net/blog/2019-01-11#Creating-a-DataTable">example code is you aren't using table.detach();. This may be needed for the Editor to properly attach to the next Child Row.

    Kevin

  • shatrughanshatrughan Posts: 85Questions: 15Answers: 0

    Thanks @kthorngren

    I tried table.detach() as well but to no avail as the problem still persits.
    Also, opening a new row without closing the already open met with the same fate while using its child editor.

    Shatrughan

  • shatrughanshatrughan Posts: 85Questions: 15Answers: 0

    I found a thread -
    http://live.datatables.net/mukirowi/55/edit
    but, I couldn't figure out how to incorporate Editor with each of the tables.
    Please suggest...

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    The blog I linked is from the developer and provides the proper solution. The other thing I noticed is you use id for the child tables where the blog example does not. There is a link to the full JS code here. Maybe comparing ti to yours you will find the issue.

    Kevin

  • shatrughanshatrughan Posts: 85Questions: 15Answers: 0

    @Kevin Sir, the blog you mentioned reflects Parent-Child tables upto two levels only but I am in need of three and as such I used http://live.datatables.net/mukirowi/55/edit which works fine but unable to code editor part properly. Please guide.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    Are you in need of using Editor for the third level? Your example doesn't show it.

    As I mentioned the best and cleanest option is to follow the blog example. You can create a child level be adding the .detail-control to the first child and using an event that calls a different function to open the second child.

    I took the blog example and added a second child here:
    http://live.datatables.net/hakatehi/1/edit

    Removed all the ajax calls for the child as I don't have access to the server scripts in the blog. The Editor works in standalone mode. I enabled the second child with Editor but you don't have to. Note the use of stopPropagation() to keep the parent table click event from running when opening the second child. I also needed to incorporate rowId and idSrc for the Editor to work in the example. You probably won't need to worry about this.

    Kevin

  • shatrughanshatrughan Posts: 85Questions: 15Answers: 0

    Thanks a lot :) , Kevin

  • shatrughanshatrughan Posts: 85Questions: 15Answers: 0

    One more help please..
    I want to change the background of child table.
    How to set css thereof ?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    If you inspect the child row you will see that it is a child of a tr. After the row().show) statement you can use something like table.parent().css('background', '#90b2e8'); to set the background color. For example:
    http://live.datatables.net/hakatehi/3/edit

    Kevin

  • shatrughanshatrughan Posts: 85Questions: 15Answers: 0

    Thanks Kevin once again...You are so generous. :)

  • shatrughanshatrughan Posts: 85Questions: 15Answers: 0

    Is there any option to set width of label of particular field ...Actually, I have a radio field with four options but one of them gets placed below in next row. To get it placed properly, I want the width of label be reduced to the max possible.

    Please suggest ..
    Thanks & Regards
    Shatrughan Sangwan

This discussion has been closed.