Slickgrid multiple checkbox columns

Question

I wish to have multiple checkbox columns in my slickgrid, along with the title of the column and when selecting that column, to select all items in that column.

I see on the slickgrid examples that it appears to only be used in one column with no title.

I am using VS 2019, and while trying to build a column and make it into checkbox column, I am showing an error underline (, expected)

 var checkboxSelector = new Slick.CheckboxSelectColumn({
          cssClass: "slick-cell-checkboxsel"
      });

          var columns = [

              { id: "JobCards", name: "Job Card", field: "JobCards", checkboxSelector.getColumnDefinition(), maxWidth: 35, formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox },

              { id: "Enabled", name: "Enabled", field: "Enabled", checkboxSelector.getColumnDefinition(), maxWidth: 35, formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox }

          ];

  var mygrid = new Slick.Grid("#GridAppUserList", AppUserRows, columns, sboptions);

  mygrid.registerPlugin(checkboxSelector);

How do I create a column (with a column title) that I can select all the rows in that column?

Thanks.

Answer 1

It doesn't look like there's a way to do what you want with the pre-built checkbox selector. It's not set up for a title as well as the header checkbox. But it should be pretty easy to modify it a bit to do what you want.
Or you could try just combining your column definitions with the ones it produces:

var checkboxSelector1 = new Slick.CheckboxSelectColumn({
  columnId: "JobCards",
  cssClass: "slick-cell-checkboxsel"
});

var col1 = checkboxSelector1.getColumnDefinition();
col1.name = "Job Card " + col1.name; 
col1.field = "JobCards";
col1.maxWidth = 35;
col1.formatter = Slick.Formatters.Checkmark;
col1.editor = Slick.Editors.Checkbox;

columns.push(col1);

// and same for column 2 ....

Note that your error above is because you are just dumping the getColumnDefinition() call into the object:

, field: "JobCards", checkboxSelector.getColumnDefinition(), 

to get rid of the error, you'd need to make it

, field: "JobCards", someOtherName: checkboxSelector.getColumnDefinition(), 

but then the column def you are getting from checkboxSelector would just be another property of the column, which is not what you want.