Datatable column width not set when revisit the page

vjsam

hi,
I have the below datatable

this.repPartGridSettings = {
            dataSource: this.partDetail.RepairPartsList,
            sScrollY: "380px",
            bPaginate: false,
            rowTemplate: 'repPartGrid',               
            columns: [
                //{ 'name': 'IsSelected' },
                { 'name': 'WReturn' },
                { 'name': 'Callout' },                  
                { 'name': 'MaterialNumber' },
                { 'name': 'Quantity' },
                { 'name': 'Description', 'sWidth': '20%' },
                { 'name': 'ValidFrom' },
                { 'name': 'ValidTo' },
                { 'name': 'StockItem' },
                { 'name': 'Section' },
                { 'name': 'WiringDiagram' }
            ]
        };

 <div id="divrepairPartGrid" class="col-md-12">
                                    <table id="repairPartGrid" class="display" style="min-width: 100%"  data-bind="dataTable: repPartGridSettings">
                                        <thead>
                                            <tr>
                                                @*<th class="hide">
                                                </th>*@
                                                <th>
                                                    Warranty Return
                                                </th>
                                                <th>
                                                    Callout
                                                </th>
                                                <th>
                                                    Part&nbsp;#
                                                </th>
                                                <th>
                                                    Qty
                                                </th>
                                                <th>
                                                    Description
                                                </th>
                                                <th>
                                                    Download
                                                </th>
                                                <th>
                                                    Valid&nbsp;From
                                                </th>
                                                <th>
                                                    Valid&nbsp;To
                                                </th>
                                                <th id="ShowHeaderSection" data-bind="visible: $root.ShowSection">
                                                    Section
                                                </th>
                                                <th>
                                                    Stock&nbsp;Item
                                                </th>



                                            </tr>
                                        </thead>
                                    </table>
                                </div>

The grid column width are setting fine on the intial grid load when i come back to the page using the back button , the width of the datatable column are zero. When i press the developer tools f12 it gets the width correctly. Not sure how to fix it. I have used the below code after the datatable load to repaint the column width, but it didnt work. Any help is appreciated.

function resizeDataTable(dataTableid) {
        $("#" + dataTableid).removeClass('kiketable-colsizable'); // Remove kike column class
        var oTable = $("#" + dataTableid).dataTable();
        $(oTable).css({ width: $(oTable).parent().width() }); // Perform datatable functions
        $("#" + dataTableid).addClass('kiketable-colsizable'); // Add kike column class
       oTable.fnAdjustColumnSizing();  

     //   $(oTable).css({ width: $(oTable).parent().width() });
    }


  self.partService.getRepairParts(partNumber, sectionCallOut).then(function (responseMessage) {
            if (responseMessage.Data != null || responseMessage.Data != undefined) {
                if (sectionCallOut != 'TL' || responseMessage.Data.Drawing == null)
                    ko.mapping.fromJS(responseMessage.Data.PartsList, {}, self.partDetail.RepairPartsList);
                resizeDataTable("repairPartGrid");

Thanks
vjsam

kthorngren

Maybe columns.adjust() will resize your table when you go back to the page.

Kevin

vjsam

Thanks for your reply . The columns didnt exist when i tried the below line
var oTable = $("#" + dataTableid).dataTable();
oTable.columns.bAutoWidth = false;

kthorngren

What version of Datatables are you using?

If 1.10.x then you will probably want to use the newer form of the parameter names. This page has the 1.9 to 1.10 naming convention mapping.
https://datatables.net/upgrade/1.10-convert

Also you will want to read this section. You will want to use var oTable = $("#" + dataTableid).DataTable(); with 1.10.
https://datatables.net/manual/installation#Initialising-DataTables

oTable.columns.bAutoWidth = false;

You can't set the parameters this way. They need to be set when you initialize the Datatable. Also autoWidth is typically not used and probably won't help your situation.

I'm unclear if you are still having issues.

Kevin

vjsam

hi Kevin,

Am using the datatable version 1.10.0-beta.3.dev .

Still am not able to get the column width assigned to the header. Is there a way to trigger the sort functionallity after the rows got assigned to datatable since when i sort the table header width are getting assigned correctly.
Tried the below code to trigger the sorting but the sorting didnt got triggered.

var oTable = $("#" + dataTableid).DataTable();
$('#warranty').click();
oTable.on('click', 'th', function () {
var info = oTable.fnSettings().aaSorting;
var idx = info[0][0];
alert(idx);
});

I have atatched the two screenshot of the grid with the one with header width not calculated and the second one the grid header aligns itself the column width on clicking the header column for sorting.

Thanks
vj

kthorngren

Are you able to provide a link to the page with the issue or build a test case showing the issue?

Kevin

vjsam

Its an intranet application .Thats the problem. Am not sure how can i give out a test case with the working example. The problem occurs when i click the browser back button and comes back to the same page where grid displays the data. basically am hitting the service again and rebuild the grid again.

Thanks
Vj

kthorngren

Maybe I missed it but did you try columns.adjust()?

Kevin

allan

Am using the datatable version 1.10.0-beta.3.dev

You very certainly want to update. 1.10.15 is the current release and has evolved a lot since the 1.10 betas.

Allan

vjsam

Kevin & Allan,

Tried table.columns.adjust().draw(); but it didn't work . Downloaded the 1.10.15 version but it throws script error when i included that in the project. The script error are from the below file when i tried using 1.10.15 version of jquery.dataTables.js file.

/**
* A KnockoutJs binding handler for the html tables javascript library DataTables.
*
* File: knockout.bindings.dataTables.js
* Author: Lucas Martin
* License: Creative Commons Attribution 3.0 Unported License. http://creativecommons.org/licenses/by/3.0/
*
* Copyright 2011, All Rights Reserved, Cognitive Shift http://www.cogshift.com
*
* For more information about KnockoutJs or DataTables, see http://www.knockoutjs.com and http://www.datatables.com for details.
*/

vjsam

Kevin & Allan,

The issue got fixed.I have to set the selectedtab to make the datatable header work. Finally it works Thanks for all your help