How to align the checkbox inside a datatable column to center ?

chandhu

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 ???

allan

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

chandhu

Hi Allen, thanks. the below code works.
className: "dt-center", targets: [4], width: '2%'. Is Active is in the 4th position.

chandhu

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 ???

kthorngren

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