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

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

chandhuchandhu Posts: 4Questions: 2Answers: 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

  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin

    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

  • chandhuchandhu Posts: 4Questions: 2Answers: 0

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

  • chandhuchandhu Posts: 4Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 20,793Questions: 26Answers: 4,860

    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

Sign In or Register to comment.