CODEWITHSUNDEEP
jqueryrazordatatable
Dhanil Dinesan
Dhanil Dinesan

Reputation: 575

How can add Check box when binding Data to data table?

I want to add check box in Data table when Data is binding to Data table

i will share my code here

im using Jquery Datatble here and im using C# and razor, 

function BindColumSelectTable(DataExchangeList) {
    debugger
    $('#columnSelectTable').DataTable({      
        "data": DataExchangeList,
        "destroy": true,
        "columns": [
            { data: null },
            { data:"FieldCaption" },
        ],
        "columnDefs": [
            { className: "checkbox i-checks", "targets": [0] },
            { className:"tabletdAdjust","targets":[1]}
        ],     
    });
}

Im expecting a result like a table with two columns. First Column is for check box and the second column is the data bind from the list. Now i get objectobject for the first column

this is the output now i get

Column          Name
[objectObject] ID
[objectObject] Code
[objectObject] Name
[objectObject] CreatedBy
[objectObject] CreatedDate
[objectObject] UpdatedBy
[objectObject] UpdatedDate

Upvotes: 0

Views: 971

Answers (2)

Dhanil Dinesan
Dhanil Dinesan

Reputation: 575

we can simply do one thing to add check box with data 

"columns": [
        {
            data: 'check', defaultContent: '', render: function (data, type, row) {
                return '<input type="checkbox"/>'
            }
        },
        { data:"FieldCaption" },
    ],

only we need to add a render function and return a check box

Upvotes: 0

Tetsuya Yamamoto
Tetsuya Yamamoto

Reputation: 24957

From a similar issue, I think the problem is caused by usage of data: null definition as the first column. It tells DataTables to use original object for corresponding row as data source for that column.

You should set data setting with non-existent property name in data source and use defaultContent option if you don't have unique ID column in table:

{ data: 'id', defaultContent: '' }

so that the column definition should be look like this:

"columns": [
    { data: 'id', defaultContent: '' }
    { data: 'FieldCaption' },
],

As for using select checkboxes, you can set columnDefs like this (see the reference for example):

columnDefs: [{
    orderable: false,
    className: 'select-checkbox i-checks',
    targets: 0
},
{ 
    className: 'tabletdAdjust',
    targets: 1
}],

Upvotes: 1

Related Questions