Backgrid not appending my custom cell

Question

Hello I am trying to append a custom type of cell I created to my backgrid instance but I keep getting the following error:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

I Console.logged the collection and the columns it turns out the above exception occurs on my custom cell. I think it is because it does not have a column attribute:

This is what my custom cell looks like:

  return QuestionCell.extend({

    distractors: ['-', 't', 'f'],
    template: 'gradescreen/table/mc',
    render: function () {
      var $val_td, view = this, correct_td = '',
      current_state = view.model.get('responses').stateModel.get('state'),
      correct_answer = '', selected = '-', select = '', pos, key_length;
      view.current_response = view.getCurrentResponse(view.model);
      if (view.current_response.get('response').prefix) {
        selected = view.current_response.get(
                'response'
              ).prefix === 'a' ? 't':'f';
      }
      if (view.question_meta.get('correct_prefix') ===
          view.current_response.get(
          'response').prefix) {
        correct_td = ' correct_td';
      }
      $val_td = $('<td class="response_td' + correct_td + '" />');
      app.fetchTemplate(view.template, function (tmpl) {
        $val_td.html(tmpl({cid: view.cid, q_number: view.question_number}));
        key_length = _.keys(view.question_meta.get('answers')).length;
        for (pos = 0; pos <= key_length; pos++) {
          var prefix = view.distractors[pos];
          correct_answer =
            prefix === view.question_meta.get('correct_prefix') ?
            'correct_response':'';

          select = selected === prefix ? 'selected="true"':'';
          $('#answer_options_' + view.cid, $val_td).append(
            '<option class="' + correct_answer + '" ' + select + ' >' +
              prefix + '</option>');
        }
        if (current_state > 2) {
          $('#answer_options_' + view.cid, $val_td).prop('disabled', true);
        }
        //view.bindEvents($val_td);
      });
      this.el = $val_td;
      return this;
    }
  });
});

It is extended from a cell I call as a QuestionCell which is extended from Backgrid.Cell and only contains from default attributes and methods.

This is how I am passing the cell to backgrid.

var grid, columns = [];

            _.each(questions, function (question, position) {
              if (question.get('type') === 'tf')
              {
                columns.push({
                  name: 'responses[0]',
                  label: 'Q-' + (position + 1),
                  cell: TFCell.extend({
                    question_meta : question,
                    question_number: position + 1,
                    group_id: view.group_id
                  })
                });
              }
              else
              {
                //this last one isn't getting rendered for some reason.
                columns.push({
                  label: 'Q-' + (position + 1),
                  cell: Backgrid.SelectCell.extend({
                    optionValues: [
                      ['-', '-'], ['a', 'a'], ['b', 'b'],
                      ['c', 'c'], ['d', 'd']
                    ]
                  })
                });
              }
            });
            grid = new Backgrid.Grid({
              columns: columns,
              collection: view.model.get('student_responses')
            });
            $('#Student_Grid').append(grid.render().$el);

Please help. How can I get this to get rendered. Many Thanks

Answer 1

Reading through the documentation it looks like it's supposed to be

$('#Student_Grid').append(grid.render().el);

instead of

$('#Student_Grid').append(grid.render().$el);

$el looks like a function where as el is the node object that you'd want to append.