How to align the checkbox inside a datatable column to center ?
How to align the checkbox inside a datatable column to center ?
chandhu
Posts: 3Questions: 1Answers: 0
I am using ASP.Net Core 6 C#. I have a datatable like this.
<div class="card-body">
<table class="table display table-bordered" id="DATATABLE"></table>
</div>
$("#DATATABLE").DataTable({
serverSide: true,
filter: true,
searchDelay: 1000,
scrollY: StaticData.TABLE_HEIGHT + 'px',
lengthMenu: StaticData.TABLE_PAGE_SIZE,
scrollCollapse: true,
ajax: {
url: '/STUD_MANAGEMENT/LoadStudents',
type: 'GET',
datatype: 'json',
headers: { 'RequestVerificationToken': 'your json token' },
dataSrc: (json) => {
json = json.data;
for (var i = 0, ien = json.length; i < ien; i++) {
**json[i]['isactive'] = '<input type="checkbox">' **
`;
}
return json;
}
},
columnDefs: [{ className: "dt-center", targets: [7], width: '2%', }],
columns: [
{ data: 'STUD_ID', title: 'STUD ID', autoWidth: false, visible : false },
{ data: 'NAME', title: 'Name', autoWidth: true },
{ data: 'CLASS', title: 'Class', autoWidth: true },
{ data: 'isactive', title: 'Is Active ?', autoWidth: false, orderable: false }, // this checkbox is left aligned.
{ data: 'USER', title: 'User', autoWidth: true },
{ data: 'DATE', title: 'Date', autoWidth: true },
],
});// datatable
How to make the checkbox (without any text or caption) to middle of the column ???
Answers
Without a test case, it is impossible to say for sure, but you probably need to add
className: "dt-center",for the column in question.Allan
Hi Allen, thanks. the below code works.
className: "dt-center", targets: [4], width: '2%'. Is Active is in the 4th position.
Hi Allen, I have another doubt. Is_Active is a bool property in the Student Class. How we can databind the Is_Active property to the Checkbox in the above code in the question ???
This Editor example shows how the checkbox state can be set based on the data value. If you are not using Editor you can ignore the Editor part of the code.
Kevin