locked
Cannot list the column from the foreign key table in JS Datatable RRS feed

  • Question

  • User-1355965324 posted

    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();
            }






     

    Sunday, June 21, 2020 9:05 AM

Answers

  • User-1355965324 posted

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 21, 2020 2:06 PM