Search code examples
javascriptdrop-down-menubackgrid

drop down list using backgrid?


I want to create a drop down list in a table cell using backgrid.js

I am creating the following column:

{ name: "priority",
    label: "Priority",
    cell: Backgrid.SelectCell.extend({
      // It's possible to render an option group or use a
      // function to provide option values too.
      optionValues: [["one", "a"], ["Two", "b"], ["Three", "c"], ["Four","d"], ["Five", "e"]]
    })
  }

But this doesn't render the Priority Column. Nor it is displaying the dropdown list.

Help me out, what mistake i am making?


Solution

  • Try this

    var PriorityComboCell = Backgrid.Cell.extend({
    
    
    template: _.template(
    
                    '<select name="#" id="priority_select"> ' +
                    '<option selected="selected"></option>' +
                    '<option id="a">One</option>' + 
                    '<option id="b">Two</option> ' +
                    '<option id="c">Three</option>' +
                    '</select>'
                ),
                events: {
    
                },
    
                render: function () {
    
                    this.$el.html(this.template({}));
                    return this;
                }
        });