Answers

• kthorngren Posts: 21,139Questions: 26Answers: 4,918

  July 2018 Answer ✓

  dynamically add row to the datatable ,it show error message like "Cannot read property 'style' of undefined"

  I would guess that the data you are adding does not match the number of columns you have in the table. If this doesn't help please post your Datatables init code along with an example of the data you are adding.

  Kevin
• sridharram91@gmail.com Posts: 3Questions: 1Answers: 0

  July 2018

  Hai Mr. Kevin,,,,please have a look on my code,,,,,,i cannot find solution

  Product	Desc	Quantity	Cost	Total	Action

  $(document).ready(function(){

      var tproducts  = $("#ProductsTable").DataTable({            
                              "paging":   false,
                              "data": null,
                              "defaultContent": '',
                              "scrollY": "450px",
                              "scrollCollapse": true,
                              "paging": false,
                              "columnDefs": [
                                             { "width": "20%", "targets": 0 },
                                                { "width": "25%", "targets": 1 },
                                                { "width": "20%", "targets": 2 },
                                                { "width": "10%", "targets": 3 },
                                                { "width": "10%", "targets": 4 },
                                                { "width": "10%", "targets": 5 }, 
                              ],
                              "order": [[ 0, 'asc' ]],
                              dom: 'Bfrtip',
                              buttons: [
                                       'copy', 'csv', 'excel', 'pdf', 'print'
                              ]     
                      });     
                      jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');
  
  
                      $('.SuppQuotelist').change(function() {
                          var SuppQuoteId = $('.SuppQuotelist option:selected').val();
                          $('#POForm')[0].reset();
                          $('#price_id').val("");
                          $('#sub_total').val("");
                          $('#tax').val("");
                          $('#tax_amount').val("");
                          $('#total_amount').val("");
                          $('#Supplierlist').empty();                         
  
                          if (SuppQuoteId != "") {        
  
                              $.ajax({
                                  type : "POST",
                                  url : "getPRheaderDetail.htm",
                                  data : "SuppQuoteId=" + SuppQuoteId,
                                  success : function(response) {
  
                                      var res = JSON.parse(response);                                                 
  
  
                                      var rowcount = 0;
                                      $.each(res.ustPrProductslist,function(key,val) {
  
  
                                          var newrow = tproducts.row.add( [
                                                      '<select name="product[]" class="form-control select3"  id="product_' + rowcount +'" onChange="option_checker(' + rowcount + ');"></select>',
                                                      '<textarea class="form-control" rows="3"     id="Desc_' + rowcount +'" cols="40" maxlength="500" name="Desc[]"   placeholder="Enter ...">'+ val.pdDescription +'</textarea>',
                                                      '<input type="number"  name="qty[]"  id="qty_' + rowcount +'" placeholder="Enter Qty" value ='+ val.pdQuantity +' class="form-control qty" step="0" value="" min="0" />',
                                                      '<input type="number"   name="price[]"  id="price_' + rowcount +'"  placeholder="0.00" value ='+ val.pdUnitCost +' class="form-control price"   readonly value="" step="0.00" min="0" />',
                                                      '<input type="number"   name="total[]"  id="total_' + rowcount +'"  placeholder="0.00"  class="form-control total" readonly /><input type="hidden" value='+ val.pdPdId +' name="pdPdid[]" id="pdPdId" />',
                                                      '<button class="btn btn-warning btn-xs" type="button" id="edit_' + rowcount +'" onclick="Edit(' + rowcount +')"><i class="fa fa-pencil"></i> <b> Edit</b></button>',
                                                  ] ).node().id = 'row_'+ rowcount + '';
                                           newrow = tproducts.draw( false ); 
  
  
  
                                      }); 
  
  
                                  },
                                  error : function(req, status, err) {
                                      //      console.log('Something went wrong', status, err);
                                  }
                              });
  
                          }
  
                      });
  
  });