locked
ScrollY: misaligned data table header . All the columns Header is not being showed against its data. Please help urgent RRS feed

  • Question

  • User-1355965324 posted

    Hi

    I am using  the datatable to list the  record  on the div $('#SuccessModal').modal. But   after adding the  comment column on the datatable  and after using ScrollY , all alignment  going wrong . The header of the column is not being showed against its data .  It would be very very appreciated somebody can help me to fix this error. I am also using rowgroup. This is the problem ScrollY.

    If I remove  scrollY or comment column  from the datatable it will work otherwise the column alignment going wrong , 

    I also tried to solve be giving  column width for all column ,  still no effect. The customised column width is not taking at the time of listing the records. But when I click  on the column header, the column would be displayed wth column width size.

    I  asked datatable forum and they have advised me to view the program. I dont how can make them to view the program . Any one can help me to resolve the problem it would be very appreciated

    Please find screen  layout coming in my program

    https://drive.google.com/open?id=1bkWIdOVdTGuHdi7UCucxLbmY3uWoVTKR

    <div id="SuccessModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-xl">
    
                <!-- Modal content-->
                <div class="modal-content text-info">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title text-success">Employee Uniform  Purchase History</h4>
                    </div>
    
    
                    <div style="padding-left:20px;">
                        <div class="col-md-12 att-area" style="margin-top: 20px;">
                            <div class="table-responsive" style="min-height:200px;">
                                <table id="tblAllApprovedequets" class="table table-bordered " style="width: 100%;">
                                    <thead>
                                        
                                        <tr>
                                            <th>DepotName</th>
                                            <th>EmployeeName</th>
                                            <th>Product Name</th>
                                            <th>Product Code</th>
                                            <th>Color</th>
                                            <th>Size</th>
                                            <th>Approved Date</th>
                                            <th>Qty</th>
                                            <th>Price <span>&#163;</span></th>
                                            <th>Total</th>
                                            <th>Comment</th>
                                        </tr>
                                    </thead>
                                    <tbody style="width: 100%;">
                                        <tr>
    
                                            <td> DepotName </td>
                                            <td> EmpName </td>
                                            <td> ProductName </td>
                                            <td> ProductCode </td>
                                            <td> Color </td>
                                            <td> Size </td>
                                            <td> ApprovedDate</td>
                                            <td> OrderedQty </td>
                                            <td> Rate </td>
                                            <td> Total </td>
                                            <td> Comment </td>
    
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="CloseSuccessModal()">Ok</button>
                    </div>
                </div>
    
            </div>
        </div>
    
      function ShowHistory(empId) {
    
            try {
    
                var table = $('#tblAllApprovedequets').DataTable();
                table.destroy();
            }
            catch (ex) {
    
            }
    
            $('#tblAllApprovedequets').DataTable({
                "processing": false,
                "ajax": {
                    "url": "/UniformApproval/GetAllApprovedRequestByEmployeeId?employeeId=" + empId ,
                    "dataSrc": function (json) {
                        return JSON.parse(json);
                    }
                },
                "columns": [
                    { "data": "DepotName" },
                    { "data": "EmpName" },
                    { "data": "ProductName" },
                    { "data": "ProductCode" },
                    { "data": "Color" },
                    { "data": "Size" },
                    { "data": "ApprovedDate" },
                    { "data": "OrderedQty" },
                    { "data": "Rate" },
                    { "data": "Total" },
                    { "data": "Comment" }
    
    
                ],
                order: [[0, 'asc'], [1, 'asc']],
                rowGroup: {
                    dataSrc: ["EmpName", "DepotName"],
                    //startRender: function (rows, group) {
                    //    return $('<tr/>')
                    //        .append('<td class="td-left" >' + group + '</td>');
                    //}
                    startRender: function (rows, group, level) {
    
                        var total = rows
                            .data()
                            .pluck("Total")
                            .reduce(function (a, b) {
                                return a + b;
                            });
    
                        return $('<tr/>')
                            .append('<td class="td-left" >' + group + '</td>')
                            .append('<td></td>')
                            .append('<td></td>')
                            .append('<td></td>')
                            .append('<td></td>')
                            .append('<td></td>')
                            .append('<td></td>')
                            .append('<td style="font-weight:bold">' + parseFloat(total).toFixed(2) + '</td>')
                            .append('<td></td>');
    
                    }
                },
    
    
                "columnDefs": [
                    {
                        "targets": [1],
                        "visible": false
                    },
                    {
                        "targets": [0],
                        "visible": false
                    },
    
                    {
                        "className": "dt-center", "targets": "_all"
                    },
                    {
                        "targets": [8, 9],
                        "render": function (data, type, full) {
                            return parseFloat(data).toFixed(2);
                        }
                    },
    
    
                ],
                "pageLength": 40,
                scrollY: "300px",
                scrollX: true,
                paging: false
    
            });
            $('#SuccessModal').modal('show');
    
        }

    Monday, January 27, 2020 2:52 PM

All replies

  • User1535942433 posted

    Hi polachan,

    Accroding to your codes,I create a little test and it's table header is right.

    Do you have added datatable css?Do you have other CSS?I guess datatable css conflict with other css.

    Best regards,

    Yijing Sun

    Tuesday, January 28, 2020 4:44 AM
  • User-1355965324 posted

    No, there should not be . The ScrollY is the reason for the alignment problem. since adding the comment column , the alignment was correct, but after adding the comment,  the alignment completely going wrong. But  when I click the table header , the   alignment  will get corrected automatically

    It is not the problem of CSS

    Any way many thanks

    Tuesday, January 28, 2020 6:12 AM
  • User1535942433 posted

    Hi polachan,

    Accroding to your description, I guess the datatable version isn't fit.I suggest you could change the version of jquery and datatable.

    My jquery version is 3.2.1 and datatable version is 1.10.20

    More details, you could refer to below articles:

    datatable.min.js: https://datatables.net/download/

    jquery.min.js:https://jquery.com/download/

    Best regards,

    Yijing Sun

    Wednesday, January 29, 2020 10:19 AM
  • User-1355965324 posted

    I am using the given version but datatable forum says it should be worked with this version . I dont know

    <link rel="stylesheet"  href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

    Wednesday, January 29, 2020 11:05 AM
  • User1535942433 posted

    Hi polachan,

    Accroding to your description,could you tell us wheather you have problem about the current version?

    Best regards,

    Yijing Sun

    Thursday, January 30, 2020 8:52 AM
  • User-1355965324 posted

    Definitely you will get same error when you add Comment column with  different   length of data  and keep some of them null  and    when you use ScrollY then there should be  misaligned data table header . I dont know how can fix it.

    Thursday, January 30, 2020 11:39 AM
  • User1535942433 posted

    Hi polachan,

    Accroding to your codes.Since you don't post more details about your code in behind and ShowHistory function,I create a little test and it works fine.

    More details,you could refer to below codes:

     <script src="Scripts/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <link rel="stylesheet"  href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
        <script>
            $(function () {
                $('#tblAllApprovedequets').DataTable({
                    "processing": false,
                    "ajax": {
                        "url": "2163585.aspx/GetAllApprovedRequestByEmployeeId",
                        "type": "post",
                        "contentType": "application/json; charset=utf-8",
                        "datatype": "json",
                        "dataSrc": function (json) {
                            var msg = $.parseJSON(json.d);     //将json字符串转化为对象
                            return msg.data;
                        }
                    },
                    "columns": [
                        { "data": "DepotName" },
                        { "data": "EmpName" },
                        { "data": "ProductName" },
                        { "data": "ProductCode" },
                        { "data": "Color" },
                        { "data": "Size" },
                        { "data": "ApprovedDate" },
                        { "data": "OrderedQty" },
                        { "data": "Rate" },
                        { "data": "Total" },
                        { "data": "Comment" }
                    ],
                    order: [[0, 'asc'], [1, 'asc']],
                    rowGroup: {
                        dataSrc: ["EmpName", "DepotName"],
                        startRender: function (rows, group) {
                            return $('<tr/>')
                                .append('<td class="td-left" >' + group + '</td>');
                        },
                        startRender: function (rows, group, level) {
    
                            var total = rows
                                .data()
                                .pluck("Total")
                                .reduce(function (a, b) {
                                    return a + b;
                                });
                            return $('<tr/>')
                                .append('<td class="td-left" >' + group + '</td>')
                                .append('<td></td>')
                                .append('<td></td>')
                                .append('<td></td>')
                                .append('<td></td>')
                                .append('<td></td>')
                                .append('<td></td>')
                                .append('<td style="font-weight:bold">' + parseFloat(total).toFixed(2) + '</td>')
                                .append('<td></td>');
                        }
                    },
                    "columnDefs": [
                        {
                            "targets": [1],
                            "visible": false
                        },
                        {
                            "targets": [0],
                            "visible": false
                        },
                        {
                            "className": "dt-center", "targets": "_all"
                        },
                        {
                            "targets": [8, 9],
                            "render": function (data, type, full) {
                                return parseFloat(data).toFixed(2);
                            }
                        },
                    ],
                    "pageLength": 40,
                    scrollY: "500px",
                    scrollX: true,
                    paging: false
                });
                $('#SuccessModal').modal('show');
            })
        </script>
    
    
    <div id="SuccessModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-xl">
    
                <!-- Modal content-->
                <div class="modal-content text-info">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title text-success">Employee Uniform  Purchase History</h4>
                    </div>
    
    
                    <div style="padding-left:20px;">
                        <div class="col-md-12 att-area" style="margin-top: 20px;">
                            <div class="table-responsive" style="min-height:200px;">
                                <table id="tblAllApprovedequets" class="table table-bordered " style="width: 100%;">
                                    <thead>
                                        
                                        <tr>
                                            <th>DepotName</th>
                                            <th>EmployeeName</th>
                                            <th>Product Name</th>
                                            <th>Product Code</th>
                                            <th>Color</th>
                                            <th>Size</th>
                                            <th>Approved Date</th>
                                            <th>Qty</th>
                                            <th>Price <span>&#163;</span></th>
                                            <th>Total</th>
                                            <th>Comment</th>
                                        </tr>
                                    </thead>
                                    <tbody style="width: 100%;">
                                        <tr>
    
                                            <td> DepotName </td>
                                            <td> EmpName </td>
                                            <td> ProductName </td>
                                            <td> ProductCode </td>
                                            <td> Color </td>
                                            <td> Size </td>
                                            <td> ApprovedDate</td>
                                            <td> OrderedQty </td>
                                            <td> Rate </td>
                                            <td> Total </td>
                                            <td> Comment </td>
    
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="CloseSuccessModal()">Ok</button>
                    </div>
                </div>
    
            </div>
        </div>

    Code-behind:

    [WebMethod]
            //[ScriptMethod(UseHttpGet = true)]
            public static string GetAllApprovedRequestByEmployeeId()
            {
                string strS, strSql;
                strS = @"Data Source=(localDb)\MSSQLLocalDB;Initial Catalog=aspnet-TestApplicationWithDatabase-20190820030542;Integrated Security=true";
                SqlConnection conn = new SqlConnection(strS);
                conn.Open();
                strSql = "select * from Product";
                SqlCommand sqlCommand = new SqlCommand(strSql, conn);
                SqlDataReader objRader = sqlCommand.ExecuteReader();
                //读取数据
                List<Product> records = new List<Product>();
                if (objRader.HasRows)
                {
                    while (objRader.Read())
                    {
    
                        Product record = new Product();
                        record.DepotName = objRader["DepotName"].ToString();
                        record.EmpName = objRader["EmpName"].ToString();
                        record.ProductName = objRader["ProductName"].ToString();
                        record.ProductCode = objRader["ProductCode"].ToString();
                        record.Color = objRader["Color"].ToString();
                        record.Size = objRader["Size"].ToString();
                        record.ApprovedDate = objRader["ApprovedDate"].ToString();
                        record.OrderedQty = objRader["OrderedQty"].ToString();
                        record.Rate = objRader["Rate"].ToString();
                        record.Total = objRader["Total"].ToString();
                        record.Comment = objRader["Comment"].ToString();
                        records.Add(record);
                    }
                }
                conn.Close();
    
                return "{\"data\":" + JsonConvert.SerializeObject(records) + "}";
    
            }

    Result:

    Best regards,

    Yijing Sun

    Friday, January 31, 2020 7:33 AM
  • User-1355965324 posted

    Many Thanks Yij sun

    Can I ask you one more doubt. What is the Data type you have used  for comment. I am using here Varchar(250)  Data type for the  comment. Please can you let me know. Also I am using asp.net core cshtml  not aspx file

    With Thanks

    Pol

    Friday, January 31, 2020 8:41 AM
  • User1535942433 posted

    Hi polachan,

    Accroding to your description,my data type of comment was varchar(50).However I try to use varchar(250) and it also work fine.

    Besides,asp.net core cshtml haven't affect on this.

    Best regards,

    Yijing Sun

    Friday, January 31, 2020 10:14 AM