Class 'SelectAllHeaderCell' not found

[Gardezi1]

Hello I am trying to add a checkbox like this but I am facing an error. which is

Uncaught ReferenceError: Class 'SelectAllHeaderCell' not found

Here is the code

var grid1 = new Backgrid.Grid({
  columns: [ {
    name: "name",
    label: "Territory",
    cell: "string"
  },
  {

    // name is a required parameter, but you don't really want one on a select all column
    name: "",

    // Backgrid.Extension.SelectRowCell lets you select individual rows
    cell: "select-row",

    // Backgrid.Extension.SelectAllHeaderCell lets you select all the row on a page
    headerCell: "select-all",

  }],

  collection: new Backbone.Collection([
    {"name": "Afghanistan"},
    {"name": "Albania"}
  ])
});

$("#dayResult").append(grid1.render().el);

Can you please tell why am I getting this error

[christinedraper]

Do you have require("backgrid-select-all") as well as require("backgrid") ?

[Gardezi1]

no I only have backgrid.js

[Gardezi1]

@christinedraper from where will I get backgrid-select-all.

and one more thing when I remove the headercell option and just let the cell option remain I start to get this error

Uncaught ReferenceError: Class 'SelectRowCell' not found

[Gardezi1]

@christinedraper one last thing. I am not requiring these file. I'm including them in my html files.

[christinedraper]

https://github.com/wyuenho/backgrid-select-all

[Gardezi1]

@christinedraper just one thing will this resolve both errors

Uncaught ReferenceError: Class 'SelectAllHeaderCell' not found

Uncaught ReferenceError: Class 'SelectRowCell' not found

[christinedraper]

Should do. Both those classes are defined in that extension.

[Gardezi1]

@christinedraper I downloaded both the files backgrid-select-all.css and backgrid-select-all.js and included them in my project but I started to get the error

Uncaught TypeError: Cannot read property 'Extension' of undefined and this again too

Uncaught ReferenceError: Class 'SelectAllHeaderCell' not found

[christinedraper]

You need to have Backgrid defined first. backgrid-select-all extends the Backgrid class.

[Gardezi1]

thanks @christinedraper that helped. I just need to one more thing that I'm not getting the border line in between the column. is there any way to do that ?

[christinedraper]

That's a matter of applying your own css to the table. Try something like this in your stylesheet:

.backgrid th,
.backgrid td {
  border-right: 1px solid #DDD;
}

[Gardezi1]

thanks @christinedraper I solved it but now I'm getting a new issue I'm trying to have nested columns so I used your this extension

FortesSolutions/backgrid-grouped-columns

and I included all the files like this

    <script src="https://cdn.rawgit.com/wyuenho/backgrid/master/lib/backgrid.js"></script>

    <script src="assets/plugins/backgrid-selectall/js/backgrid-select-all.js" ></script>
    <script src="assets/js/backbone.paginator.js"></script>
    <script src="assets/js/backgrid-paginator.js"></script>
    <script src="https://cdn.rawgit.com/wyuenho/backgrid-filter/master/backgrid-filter.js"></script>

    <script src="assets/js/backgrid-grouped-columns.js" ></script>

but I'm getting this error

Uncaught TypeError: column.get(...) is not a function

can you tell me why am I gettind this error. Here is the code

var grid2 = new Backgrid.Grid({
  columns: [ {
    name: "name",
    label: "",
    cell: "string"
  },{
    name: "Hours",
     children:[
       {
         name:"0",
         cell: "select-row",
       },
       {
         name:"1",
         cell: "select-row",
       },
       {
         name:"2",
         cell: "select-row",
       },
       {
         name:"3",
         cell: "select-row",
       }
   ]

  }],

  collection: new Backbone.Collection([
    {"name": "Monday"},
    {"name": "Tuesday"},
    {"name": "Wednesday"},
    {"name": "Thursday"},
    {"name": "Friday"},
    {"name": "Saturday"},
    {"name": "Sunday"}
  ])
});

$("#dayResults").append(grid2.render().el);

[christinedraper]

backgrid-grouped-columns says it's only proof-of-concept. Possibly you're seeing some problem with the way they are patching Backgrid. Suggest you see if they can help you.

[Gardezi1]

ok. Thanks for all the help

[Gardezi1]

@christinedraper just one last thing if I want to change the checkbox and want to add some attribute to it is there any way to do that.

I have been trying to add these two attributes data-render='switchery' data-theme='default' but I can't figure out how to do this. Can you tell me as these checkboxes are being rendered can I add these attibutes somehow

and is there any way to add a element in the in a columnn