Editor not invoked in child table

shatrughan · February 2020

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

shatrughan · 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

kthorngren · February 2020

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

shatrughan · February 2020

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

shatrughan · February 2020

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...

kthorngren · February 2020

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

shatrughan · February 2020

@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.

kthorngren · February 2020

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

shatrughan · February 2020

Thanks a lot , Kevin

shatrughan · February 2020

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

kthorngren · February 2020

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

shatrughan · February 2020

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

shatrughan · February 2020

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

Editor not invoked in child table

Editor not invoked in child table

Answers

Howdy, Stranger!

Categories

DataTables

Editor not invoked in child table

Editor not invoked in child table

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables