Cannot list the column from the foreign key table in JS Datatable[Answered] RSS

• • Reply
  polachan

  Member

  411 Points

  1327 Posts

  Cannot list the column from the foreign key table in JS Datatable

  Jun 21, 2020 09:05 AM|polachan|LINK

  I am trying to list vehicle details  from Vehile.cs and its status from foreign key VehicleStatus.cs. But when I give vehicleStatus.status  it shows the error 

  jquery.min.js:2 Uncaught TypeError: Cannot read property 'style' of undefined
      at Ia (jquery.dataTables.min.js:76)
      at ia (jquery.dataTables.min.js:62)
      at e (jquery.dataTables.min.js:106)
      

  https://drive.google.com/file/d/1bkWIdOVdTGuHdi7UCucxLbmY3uWoVTKR/view?usp=sharing

  my models

   public class VehicleType
      {
          [Key]
          public int Id { get; set; }
          [Required]
          public string Category { get; set; }
      }
      public class VehicleStatus
      {
          [Key]
          public int Id { get; set; }
          [Required]
          public string Status { get; set; }
          
      }
       public class Vehicles
      {
          [Key]
          public int Id { get; set; }
          [Required]
          public string Make { get; set; }
          [Required]
          public string Model { get; set; }
          [Required]
          public string RegNo { get; set; }
          [Required]
          public string VehicleName {get;set;}
          public DateTime? MOTDate { get; set; }       
          public DateTime? TaxDate { get; set; }
          public DateTime? RegDate { get; set; }
          public DateTime? InsuredDate { get; set; }
          public string Comment { get; set; }
          [Required]
          public bool IsDeleted { get; set; } = false;
          [Required]
          public int VehicleStatusId { get; set; }
          [ForeignKey("VehicleStatusId")]
          public VehicleStatus VehicleStatus { get; set; }
          public int VehicleTypeId { get; set; }
          [ForeignKey("VehicleTypeId")]
          public VehicleType VehicleType { get; set; } 
      }
  

  Controller

       public IActionResult GetAll()
          {
              var allObj = _unitOfWork.VehicleRepo.GetAll(v=>v.IsDeleted==false,includeProperties: "VehicleStatus,VehicleType");
              return Json(new { data = allObj });
          }

  View

  <!-- language: lang-html -->
  
       <div class="row">
                  <div class="table-responsive">
                      <table id="tblData" class="table table-bordered" style="width:100%;font-size:90%">
                          <thead class="thead-light">
                              <tr>
                                  <th>Registration No</th>
                                  <th>Reg Date</th>
                                  <th>Make</th>
                                  <th>Model</th>    
                                  <th>status</th>
                                  <th>Description</th>
                                  <th>MOT Date</th>
                                  <th>TaxDate</th>
                                  <th>Insurance<br /> Renewal <br /> Date</th>
                                  <th>MOT</th>
                                  <th>Tax</th>
                                  <th>Reg</th>
                                  <th>InsDate</th>
                                  <th>Comment</th>
                              </tr>
                          </thead>
                      </table>
                  </div>
              </div>
  
      @section Scripts
      {
          <script src="~/js/VehicleReport.js"></script>
      }
  
  
  <!-- end snippet -->

  VehicleReport.js

   var dataTable;
  
  
  
      $(document).ready(function () {
          loadDataTable();
      });
  
  
      function loadDataTable() {
          var dataTable = $('#tblData').DataTable({
              "ajax": {
                  "url": "/Vehicle/GetAll",
                  "success": function (data) {
                      console.log(data);
                  }
              },
              "columns": [
                  { "data": "regNo" },
                  { "data": "make" },
                  { "data": "model" },               
                  { "data": "vehicleStatus.status"},  // Error is coming here
                  { "data": "vehicleName" },
                  { "data": "motDateString" },
                  { "data": "taxDateString" },
                  { "data": "regDateString" },
                  { "data": "insuredDateString" },
                  { "data": "motDate" },
                  { "data": "taxDate" },
                  { "data": "regDate" },
                  { "data": "insuredDate" },
                  {
                      "data": "id",
                      "render": function (data) {
                          return `
                                  <div class="text-center">
                                      <a href="/Vehicle/UpsertVehicle/${data}" class="btn btn-success text-white" style="cursor:pointer">
                                          <i class="fas fa-edit"></i> 
                                      </a>
                                      <a onclick=Delete("/Vehicle/Delete/${data}") class="btn btn-danger text-white" style="cursor:pointer">
                                          <i class="fas fa-trash-alt"></i> 
                                      </a>
                                  </div>
                                 `;
                      }, "width": "12%"
                  }
              ],
              columnDefs: [
                  {
                          "className": "dt-center", "targets": "_all" 
                  }
              ],
              scrollY: "600px",
              scrollX: true,
              paging: false,
              dom: 'Bfrtip',
              buttons: [
                  'copy',
                  'csv',
                  'excel',
                  {
                      extend: 'pdfHtml5',
                      orientation: 'landscape',
                      pageSize: 'LEGAL'
                  }
  
              ]
  
  
          });
          dataTable.column(8).visible(false);
          dataTable.column(9).visible(false);
          dataTable.column(10).visible(false);
          dataTable.column(11).visible(false);
      }

  General Repository

  public IEnumerable<T> GetAll(Expression<Func<T, bool>> filter = null, Func<IQueryable<T>, IOrderedQueryable<T>> orderBy = null, string includeProperties = null)
          {
              IQueryable<T> query = dbSet;
  
              if(filter != null)
              {
                  query = query.Where(filter);
              }
  
              if(includeProperties != null)
              {
                  foreach (var includeProp in includeProperties.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
                  {
                      query = query.Include(includeProp);
                  }
              }
  
              if (orderBy != null)
              {
                  return orderBy(query).ToList();
              }
              return query.ToList();
          }

  
  
  
  
  
   

• • Reply
  polachan

  Member

  411 Points

  1327 Posts

  Re: Cannot list the column from the foreign key table in JS Datatable

  Jun 21, 2020 02:06 PM|polachan|LINK

  It was the problem with column reference . I corrected . Sorry for that