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.

Ben McIntyre · Accepted Answer · 2020-11-05 23:49:17Z

2

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.

edited Nov 5, 2020 at 23:49

answered Nov 2, 2020 at 13:01

Ben McIntyre

1,98817 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Over a year ago

Thank you, but Unfortunately this did not work. It just added a checkbox to the header column but no column name.

David Over a year ago

That works, thank you. I would say that the var has a spurious 1 on the end of it, and I also changed the order of col1.name to make it work for me. When I checked the columns array, I also saw it wrote as name... <input type='checkbox'> Job Card... so this may also be a way of doing this.

Collectives™ on Stack Overflow

Slickgrid multiple checkbox columns

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related