Change dynamic column width on column resizing

Change dynamic column width on column resizing

shubhgupta2shubhgupta2 Posts: 6Questions: 2Answers: 0

Hi, I am using datatable 1.10.24 version along with datatabe extensions ColReorder 1.5.3, RowGroup 1.1.2, Select 1.3.3

$('#example').DataTable( {
        "columnDefs": columnDefs,
        "serverSide": true,
        "autoWidth": false,
        "scrollX": true,
        "scrollY": true,
        "pageLength": 300,
        "colReorder": true,
        "order": [1],   
        "bLengthChange" : false,
        "destroy": true,
        "scrollCollapse": true,
        dom: 'l<"toolbar">frtip',
        initComplete: function(){
             $('#example_wrapper .dataTables_scrollHead thead th').resizable({
                    handles: "e",
                    alsoResize: '#example_wrapper .dataTables_scrollHead table',
                    stop: function () {     
                    }
                });
           },
         "ajax": {
            "contentType": "application/json; charset=utf-8",
            "type": "POST",
            "dataType": "json",
            "url": "xyz",
        "data": function ( d ) { ... },
             "dataSrc": function (json) { ... }
    },
    },
    columns:{ columns...}
    } );

So, On resizing I am tring to update the column Defs width and redrawing it. However, table is not taking the updated width.

Answers

  • colincolin Posts: 12,911Questions: 0Answers: 2,200

    This example from this thread is using Resizable too, maybe that would help. If no joy, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • shubhgupta2shubhgupta2 Posts: 6Questions: 2Answers: 0


    I have tried with the suggested approach.So, I am able to update the header width but cell width is not getting updated as you can see in my attached screen shot.

  • tangerinetangerine Posts: 3,143Questions: 27Answers: 366

    Please link to a test case as Colin requested.

  • shubhgupta2shubhgupta2 Posts: 6Questions: 2Answers: 0

    Hi,
    I have created one example live.datatables.net/coqiwimi/145/edit

    Here, I have drawn the table keeping server-side as true. I have received dummy data from the API which I overrode with my dataSet. On Column resizing in stop event I simply get the column cell Index and header width of that column and set the width in my respective column " .dataTables_scrollBody thead th".
    however, It is working fine cell width is getting updated and scrollX is also getting enable. But, the issue is after resizing the column my sorting event gets fired due to which my table is redrawn, and the column size changes to the previous one.
    I wanted to stop the sorting event while resizing the column headers. so that my table column resizing works properly and also sorting should work properly once my column resizing is done.

  • colincolin Posts: 12,911Questions: 0Answers: 2,200

    You've duplicated threads - please don't do that as it wastes people's time!

    Column resizing isn't supported within the DataTables code, so we'd expect there would be issues there. The code is open-source, so it would require changes to make it behave as you'd expect.

    Colin

Sign In or Register to comment.