Datatables is duplicating my columns

Datatables is duplicating my columns

MundaringMundaring Posts: 34Questions: 12Answers: 1
edited June 2017 in DataTables

Hi Allan,

I hope you are doing well. I hope you can help me. I am having a weird behaviour on a particular Datatable. I am using datatables in my whole project but one in particular is returning double information, and the second one is empty and some values on my view are looking on that second information.

In the images attached you can see double row for the information requested in positions 1 and 3. position 1 is full with information 3 is completely empty.

Previously position 1 contains all the values except for the ID, for that reason I have to add the Id value in my controller in line 9, but this was already solve adding this line, when in other tables it was not necessary.

Additionally I am having another weird behaviour in my view, but I think this double row is the cause.

Controller

public ActionResult DTEvaluation()
        {
            var request = HttpContext.Request.Form;

            using (var dtDB = new DataTables.Database("sqlserver", conn))
            {
                var response = new Editor(dtDB, "Evaluation", "Id") //Application.
                    .Model<VMEvaluation>()
                    .Field(new Field("Evaluation.Id"))
                    .Field(new Field("Evaluation.OrganizationId"))
                    .Field(new Field("Evaluation.CreationDate")
                        .GetFormatter(Format.DateSqlToFormat("dd/MM/yyyy"))
                        .SetFormatter(Format.DateFormatToSql("dd/MM/yyyy"))
                    )
                    .Field(new Field("Evaluation.EvaluationDate")
                        .GetFormatter(Format.DateSqlToFormat("dd/MM/yyyy"))
                        .SetFormatter(Format.DateFormatToSql("dd/MM/yyyy"))
                    )

                    .Field(new Field("Evaluation.CycleId"))
                    .Field(new Field("Evaluation.AdHoc"))
                    .Field(new Field("Evaluation.IsClosed"))
                    .Field(new Field("Evaluation.DepartmentName"))
                    .Field(new Field("Evaluation.PositionName"))
                    .Field(new Field("Evaluation.ManagerName"))
                    .Field(new Field("Evaluation.Active"))
                    .Field(new Field("Cycle.YearCycle"))
                    .Field(new Field("Cycle.MonthCycleId"))
                    .LeftJoin("Cycle", "Cycle.Id", "=", "Evaluation.CycleId")                    
                    .Process(request)
                    .Data();

                return Json(response, JsonRequestBehavior.AllowGet);
            }
        }

View Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using DataTables;

namespace MUN.PDR.Models.ViewModels
{
    public class VMEvaluation : Editor
    {
        public class EValuation : EditorModel
        {
            public int Id { get; set; }
            public int OrganizationId { get; set; }
            public string CreationDate { get; set; }
            public string EvaluationDate { get; set; }
            public byte CycleId { get; set; }
            public bool AdHoc { get; set; }
            public Nullable<bool> IsClosed { get; set; }
            public string DepartmentName { get; set; }
            public string PositionName { get; set; }
            public string ManagerName { get; set; }
            public bool Active { get; set; }
        }
        

        public class Cycle : EditorModel
        {
            //public byte Id { get; set; }
            public short YearCycle { get; set; }
            public short MonthCycleId { get; set; }
        }

    }
}

View

@model IEnumerable<MUN.PDR.Models.Evaluation>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title"><strong>Evaluations</strong></h4>
    </div>
    <div class="panel-body">
        <table id="tblEvaluation" class="display compact table table-hover table-striped" cellspacing="0" width="100%">
            <thead>
                <tr>                    
                    <th>
                        @Html.DisplayNameFor(model => model.Id)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.OrganizationId)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.CreationDate)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.EvaluationDate)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.CycleId)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.AdHoc)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.IsClosed)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.DepartmentName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.PositionName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.ManagerName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Active)
                    </th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<script>
    var editor;

    $('document').ready(function () {

        editor = new $.fn.dataTable.Editor({
            ajax: '/Evaluations/DTEvaluation',
            table: '#tblEvaluation',
            idSrc: 'Evaluation.Id',
            fields: [{
                label: "Organization:",
                name: "Evaluation.OrganizationId"
            }, {
                label: "Position:",
                name: "Evaluation.PositionName"
            }, {
                label: "Active:",
                name: "Evaluation.Active",
                type: "checkbox",
                separator: "|",
                options: [
                    { label: '', value: 1 }
                ]
            }
            ],
            formOptions: {
                inline: {
                    onBlur: 'submit'
                }
            }
        });

        // Activate an inline edit on click of a table cell just allowed columns
        $('#tblEvaluation').on('click', 'tbody td.editable', function (e) {
            editor.inline(this);
        });

        var evaluations = $('#tblEvaluation').DataTable({
            "searching": true,
            "bPaginate": true,
            "bInfo": true,
            "bAutoWidth": true,
            oLanguage: {
                sProcessing: '<div class="grid-loading"><img src="../images/ajax-loader.gif" width="32" align="middle" /> Loading</div>'
            },
            "processing": true,
            dom: 'Bfrtip',
            "iDisplayLength": vDisplayLength,
            "pagingType": vpagingType,
            ajax: {
                url: '/Evaluations/DTEvaluation',
                type: 'POST'
            },
            columns: [
                { data: "Evaluation.Id", className: 'noteditable' },
                { data: "Evaluation.OrganizationId", className: 'noteditable' },
                { data: "Evaluation.CreationDate", className: 'noteditable' },
                { data: "Evaluation.EvaluationDate", className: 'noteditable' },
                {
                    data: "Cycle",
                    className: 'noteditable',
                    render: function (data, type, row) {
                        if (data.YearCycle == null) {
                            return '';
                        }
                        return data.YearCycle + ' - ' + data.MonthCycleId;
                    }
                },
                { data: "Evaluation.AdHoc", className: 'noteditable' },
                { data: "Evaluation.IsClosed", className: 'noteditable' },
                { data: "Evaluation.DepartmentName", className: 'noteditable' },
                { data: "Evaluation.PositionName", className: 'noteditable' },
                { data: "Evaluation.ManagerName", className: 'noteditable' },
                {
                    data: "Evaluation.Active",
                    render: function (data, type, row) {
                        if (type === 'display') {
                            if (data == 1)
                                return '<input type="checkbox" class="editor-active" checked >';
                            else
                                return '<input type="checkbox" >';
                        }
                        return data;
                    },
                    className: 'editable'
                }
            ],
            order: [1, 'asc'],
            keys: {
                columns: ':not(:first-child)',
                keys: [9]
            },
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            buttons: [
                
            ]
        });
    });
</script>

Thank you so much in advance if you can give me a hand to understand why this behaviour of returning double information structure.

Regards,
Wilson

This question has an accepted answers - jump to answer

Answers

  • MundaringMundaring Posts: 34Questions: 12Answers: 1

    Hi Allan,

    I forgot to atached the images to the previous comment.

    I just execute a Trace in the database to see what was the controller sending to the DB and I found all the fields are twice, the quantity of rows are OK , but I don't understand why the fields are twice.

    SELECT  Evaluation.Id as 'Evaluation.Id', Evaluation.Id as 'Evaluation.Id', Evaluation.OrganizationId as 'Evaluation.OrganizationId', 
            Evaluation.CreationDate as 'Evaluation.CreationDate', Evaluation.EvaluationDate as 'Evaluation.EvaluationDate', 
            Evaluation.CycleId as 'Evaluation.CycleId', Evaluation.AdHoc as 'Evaluation.AdHoc', Evaluation.IsClosed as 'Evaluation.IsClosed', 
            Evaluation.DepartmentName as 'Evaluation.DepartmentName', Evaluation.PositionName as 'Evaluation.PositionName', 
            Evaluation.ManagerName as 'Evaluation.ManagerName', Evaluation.Active as 'Evaluation.Active', 
            Cycle.YearCycle as 'Cycle.YearCycle', Cycle.MonthCycleId as 'Cycle.MonthCycleId', 
            EValuation.Id as 'EValuation.Id', EValuation.OrganizationId as 'EValuation.OrganizationId', 
            EValuation.CreationDate as 'EValuation.CreationDate', EValuation.EvaluationDate as 'EValuation.EvaluationDate', 
            EValuation.CycleId as 'EValuation.CycleId', EValuation.AdHoc as 'EValuation.AdHoc', EValuation.IsClosed as 'EValuation.IsClosed', 
            EValuation.DepartmentName as 'EValuation.DepartmentName', EValuation.PositionName as 'EValuation.PositionName', 
            EValuation.ManagerName as 'EValuation.ManagerName', EValuation.Active as 'EValuation.Active' 
    FROM  Evaluation 
            LEFT JOIN Cycle ON Cycle.Id = Evaluation.CycleId 
    

    Thanks,
    Wilson

  • MundaringMundaring Posts: 34Questions: 12Answers: 1

    Hi Adam,

    Sorry, I am trying to find as much Information as I can to provide it to you. I change everything just to display two fields and even though both got duplicated. I don't get why.

    Controller

    [AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
            public ActionResult DTEvaluation()
            {
                var request = HttpContext.Request.Form;
    
                using (var dtDB = new DataTables.Database("sqlserver", conn))
                {
                    var response = new Editor(dtDB, "Evaluation", "Id") //Application.
                        .Model<VMEvaluation>()
                        .Field(new Field("Evaluation.Id"))
                        .Field(new Field("Evaluation.OrganizationId"))                             
                        .Process(request)
                        .Data();
    
                    return Json(response, JsonRequestBehavior.AllowGet);
                }
            }
    
    

    View Model

    namespace MUN.PDR.Models.ViewModels
    {
        public class VMEvaluation : Editor
        {
            public class EValuation : EditorModel
            {
                public int Id { get; set; }
                public int OrganizationId { get; set; }           
            }        
    
            //public class Cycle : EditorModel
            //{
            //    //public byte Id { get; set; }
            //    public short YearCycle { get; set; }
            //    public short MonthCycleId { get; set; }
            //}
    
        }
    }
    

    View

    @model IEnumerable<MUN.PDR.Models.Evaluation>
    
    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h4 class="panel-title"><strong>Evaluations</strong></h4>
        </div>
        <div class="panel-body">
            <table id="tblEvaluation" class="display compact table table-hover table-striped" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.Id)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.OrganizationId)
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <script>
        var editor;
    
        $('document').ready(function () {
    
            editor = new $.fn.dataTable.Editor({
                ajax: '/Evaluations/DTEvaluation',
                table: '#tblEvaluation',
                idSrc: 'Evaluation.Id',
                fields: [{
                    label: "Organization:",
                    name: "Evaluation.OrganizationId"
                }
                ],
                formOptions: {
                    inline: {
                        onBlur: 'submit'
                    }
                }
            });
    
            // Activate an inline edit on click of a table cell just allowed columns
            $('#tblEvaluation').on('click', 'tbody td.editable', function (e) {
                editor.inline(this);
            });
    
            var evaluations = $('#tblEvaluation').DataTable({
                "searching": true,
                "bPaginate": true,
                "bInfo": true,
                "bAutoWidth": true,
                oLanguage: {
                    sProcessing: '<div class="grid-loading"><img src="../images/ajax-loader.gif" width="32" align="middle" /> </div>'
                },
                "processing": true,
                dom: 'Bfrtip',
                "iDisplayLength": vDisplayLength,
                "pagingType": vpagingType,
                ajax: {
                    url: '/Evaluations/DTEvaluation',
                    type: 'POST'
                },
                columns: [
                    { data: "Evaluation.Id", className: 'noteditable' },
                    { data: "Evaluation.OrganizationId", className: 'noteditable' }               
                ],
                order: [1, 'asc'],           
                buttons: [
                    
                ]
            });
        });
    </script>
    
    

    Thanks,
    Wilson

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    In your model you have:

    EValuation

    In your controller you use:

    Evaluation

    Since C# is case sensitive, that's going to cause the issue you are seeing. Fix the typo in the model and it should hopefully work.

    Allan

  • MundaringMundaring Posts: 34Questions: 12Answers: 1

    Hi Allan,

    That solved my problem. Thank you so much I can't believe such an error, the additional problem was based on that as well.

    Thanks,

    Wilson

This discussion has been closed.