Duplicate checkbox using fixedColumns

raviparikh

Hi All,

Hope you are safe & well!

I need your small help about fixedColumns option.

When we have enabled fixedColumns with below option in local site, it is showing twice checkbox and data with columns, you can check it here https://prnt.sc/ttlrak, Could you please help me how we can resolve it

scrollY: "auto",
scrollX: true,
scrollCollapse: true,
fixedColumns : {
leftColumns: 3,
},

allan

Can you give me a link to a test case showing the issue so I can debug it please?

Allan

raviparikh

Thanks Allan for your quick reply!

Currently we are working in local development server so it is not possible to generate test case link for this issue. I have just enabled below properties in datatable grid.

https://cdn.datatables.net/fixedcolumns/3.3.1/css/fixedColumns.bootstrap.min.css
https://cdn.datatables.net/fixedcolumns/3.3.1/js/dataTables.fixedColumns.min.js

// load table
var table = $('#ProspectListTable').DataTable({
    "processing": false,
    'serverMethod': 'post',
    "serverSide" : true,
    "ajax" : {
        "url" : "/list",
        "data" : queryData
    },
    colReorder: true,
    'columnDefs': [
        {
            targets: 1,
            render: function ( data) {
                return (data) ? data.replace(/\\'/g, "'") : '';
            }
        }
        ],
    "createdRow": function(row, data, dataIndex){
            $(row).attr("id", "tblRow_" + data.leadId);
    },
    columns: [
        { name: 'checkbox', data: 'checkbox', defaultContent: '', sortable : false},
        { name: 'profile_pic',  data: 'profile_pic' , defaultContent: '', sortable : false},
        { name: 'fullname', "orderable" : true, data: 'fullname', defaultContent: ''},
    ],
    "pageLength": 10,
    autoWidth: true,
    select: {
        style: 'multi',
        selector: 'td:first-child'
    },
    "aaSorting": [[2, "asc"]],
    "fnDrawCallback":function(){
        if($('#ProspectListTable_paginate .paginate_button').length <= 3){
            $('#ProspectListTable_paginate').hide();
        }else{
            $('#ProspectListTable_paginate').show();
        }
    },
    "lengthChange": true,
    language : {
        sLengthMenu: '_MENU_'
    },
    lengthMenu: [[ 10, 25, 50, 100 ],["10 Leads", "25 Leads", "50 Leads", "100 Leads"]],
    "initComplete": function(settings, json){
        $('#ProspectListTable').wrap('<div class="table-responsive"></div>');
    },
    scrollY: "auto", 
    scrollX: true, 
    scrollCollapse: true,
    fixedColumns : {
        leftColumns: 3,
    },
});

kthorngren

Can you build a test case to show the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

raviparikh

Thanks Kevin for your reply!
Ok, I will prepare test case as per your suggestion!

raviparikh

Hello,

As per your suggestion I have prepared test case of my issue, you can check it here http://live.datatables.net/tonazage/2/edit

Thanks in advance!

kthorngren

Thanks. Found a couple things. First is you re using Bootstrap 3 but aren't using the Datatables Bootstrap 3 styling files. I commented out what you had and used the Download Builder to build the proper set of files.

Next you have $('#ProspectListTable').wrap('<div class="table-responsive"></div>'); in initComplete. I commented this and now the Datatable behaves correctly. What are you trying to do with $('#ProspectListTable').wrap('<div class="table-responsive"></div>');?

http://live.datatables.net/cufumefu/1/edit

Kevin

raviparikh

Hello Kevin,

Thanks for your reply on this!

We are using bootstrap 4 css (version : 4.3.1 ) in our project, Could you please help me which datatable css/js version we should use in our project (https://cdn.datatables.net/) ?

Currently we are using below css/js for datatable in our project, Is it contemptible for bootstrap 4 ?
- https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css
- https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js

Or we should go with bootstrap 4 button right?

Thanks in advance!

raviparikh

and we are using below to do grid table responsive (its bootstrap 4 table responsive class), Is occurring any issue or Is it correct right?
$('#ProspectListTable').wrap('<div class="table-responsive"></div>'); n initComplete
Or have any suggestion for it?

allan

Use the download builder to get all of the files you require.

and we are using below to do grid table responsive (its bootstrap 4 table responsive class), Is occurring any issue or Is it correct right?

That is fine if you want to use Bootstrap 4's responsive table feature, rather than our Responsive extension. The two are not compatible. Scrolling might do something odd as well, I'm not sure.

Allan

raviparikh

Hello Allan,

Thanks for your reply on this!

I can not able to scroll header of table but scroll works proper for table body. In my table first column is checkbox that's design is also bit different.
can you please give me the solution for this case ?

I need to use table-responsive class and fixed column

I make a test case related to fixed column and table-responsive class of bootstrap for table.
http://live.datatables.net/fabuxacu/2/edit

kthorngren

I need to use table-responsive class and fixed column

Why do you need table-responsive when you have FixedColumns with scrollX enabled? Seems like the would be competing for scrolling the table which might be confusing to the users.

Kevin

raviparikh

Our requirement is that, we need to use fixedColumns option with responsive datatable grid so we are using bootstrap 4 table-responsive class for responsive grid datatable.

Is there any possibility to fulfill our above requirement in your grid?
if yes then how we can do it?

colin

No,as Allan said, FixedColumn extension and Responsive are incompatible,

Colin

raviparikh

Thanks for your replay Colin!
You mean that, we can not use both (FixedColumn extension with bootstrap 4 table-resposive class) right ?

Is these datatable extensions are fulfill our requirement "FixedColumn" and "Responsive" in your grid?

kthorngren

Here is your example without BS Responsive:
http://live.datatables.net/zagetiju/1/edit

I added the class nowrap to the table tag to keep the cells from wrapping. Does this not work for your solution?

Kevin

raviparikh

Thanks for your replay kthorngren!

Actually I also need to do responsive table. so I need to use table-responsive class.

can you please let me know below link's "Lock Pinned" section will it possible in your grid ?

https://www.ag-grid.com/javascript-grid-pinning/
if yes then how we can do it?

kthorngren

I need to use table-responsive class

There is another issue with your example. The rows don't line up. There is a styling issue between using FixedColumns and BS Responsive. FixedColumns basically replicates the fixed columns into another table. If you inspect your page you will find your full table then find the fixed columns table overlaid on top of the full table. Since there is no integration with the BS Responsive solution the styling is not consistent and doesn't work with FixedColumns. Datatables is open source so its an integration you can build if you want.

"Lock Pinned" section will it possible in your grid

I don't recall any discussion bout using this library. You can search the forum to see if anyone has tried it. The developers may be able to tell you if it might work.

Kevin