Select-checkbox in column renders, but is not clickable

Select-checkbox in column renders, but is not clickable

rdmrdm Posts: 194Questions: 55Answers: 4

In order to satisfy a user requirement, I need to add a checkbox-column that is not a part of the data model. A button that I click will read only the rows where that checkbox is clicked and perform a function.

My problem is that while I can get the checkbox to render on the page, when I click it, nothing happens. I don't see any runtime or compile errors.

The first column still works as intended: when the first column is clicked, the entire row is selected and the "Edit" button is then enabled. It's the second column that is not clickable at all.

What do I need to do in order to make that column clickable?

columns:
    [
        {
            /* used to select record for "Edit" button */
            data: null,
            defaultContent: '',
            className: 'select-checkbox',
            orderable: false,
            searchable: false
        },
        {
            /* used to select multiple records for use in custom function */
            data: null,
            defaultContent: '',
            className: 'select-checkbox',
            orderable: false,
            searchable: false
        }
        /* ... more columns ... */
    ]

This question has an accepted answers - jump to answer

Answers

  • Tester2017Tester2017 Posts: 145Questions: 23Answers: 17
    Answer ✓

    Try this:

          'columnDefs': [{
             'targets': 0,
             'searchable':false,
             'orderable':false,
             'render': function (data, type, full, meta){
                 return '<input type="checkbox" name="id[]" value="' 
                    + $('<div/>').text(data).html() + '">';
             }
          },
          {
             'targets': 1,
             'searchable':false,
             'orderable':false,
             'render': function (data, type, full, meta){
                 return '<input type="checkbox" name="id[]" value="' 
                    + $('<div/>').text(data).html() + '">';
             }
          }],
    

    I think the problem you had is caused by the fact that you are assigning a values (null) to data and not (unique) references.

  • rdmrdm Posts: 194Questions: 55Answers: 4

    Thanks @Tester2017 -- I hasn't seen "columnDefs" in use before. This solves a few different problems of mine too.

This discussion has been closed.