CODEWITHSUNDEEP
backbone.js-collectionsbackgrid
Not a machine
Not a machine

Reputation: 551

backgrid.js - how to prevent multi-row selection?

I am new to backgrid and using it in a form to allow the user to select a row (via a checkbox) and then click "Submit". I cannot figure out how to configure my grid to behave like "radio buttons" in that only one row can be selected. Is this something backgrid natively supports or do I need to write a handler to "unselect" previously selected rows?

Upvotes: 0

Views: 378

Answers (2)

Aaron
Aaron

Reputation: 1411

You could create a custom cell that renders radio buttons. The implementation below may need some more work but something like this will get you started:

var RadioCell = Backgrid.Cell.extend({
    events: {
        "click .selectedRadio": "makeSelected"
    },
    render: function () {
        this.template = Mustache.to_html($("#radioCell").html(), this.model.toJSON());
        this.$el.html(this.template);
        this.delegateEvents();
        return this;
    },
    makeSelected: function () {
        // set all to inactive
        this.model.collection.invoke('set', { "SomeModelAttrib": false });
        // check if radio is checked and set the value on the model
        var radioValue = $("input[name='someSelection']").is(":checked");
        this.model.set("SomeModelAttrib", radioValue);
    }
});

and the mustache template:

<script type="text/template" id="radioCell">
<input type='radio' class='selectedRadio' name='someSelection' value="{{SomeModelAttrib}}" {{#SomeModelAttrib}}checked{{/SomeModelAttrib}}>
</script>

Upvotes: 0

Not a machine
Not a machine

Reputation: 551

Here is a quick-n-dirty method:

        wellCollection.on('backgrid:selected', function(model, selected) {
            if (wellGrid.getSelectedModels().length > 1) {
                model.trigger("backgrid:select", model, false);
                alert('Only one selection is allowed.');
            }
        });

The downside is this approach requires the use of "SelectAll" which is really counter-intuitive to the user. I would prefer to be able to not use "SelectAll" but it is required to get the getSelectedModels object populated.

Upvotes: 0

Related Questions