How to make fuelux datagrid's(generated by backbone collection) each row editable using dialog

Question

New StaticDataSource will construct datasource for fuelux grid. The formatter will set the property to generate editable button in datagrid cell. The code is as follows:

 app.PlayersView = Backbone.View.extend({
    template: _.template( $("#players-template").html() ),
    events: {
        "click #addUser" : "addUser",
    },
    initialize: function () {
        if(this.collection){
            this.collection.fetch();
        }
        this.listenTo(this.collection, 'all', this.render);
    },
    render: function () {           
        this.$el.html( this.template );
               var dataSource = new StaticDataSource({
            columns: [
                {
                    property: 'username',
                    label: 'Username',
                    sortable: true
                },
                {
                    property: 'group',
                    label: 'Groups',
                    sortable: true
                },
                {
                    property: 'edit',
                    label: 'Edit',
                    sortable: true
                }
            ],
             formatter: function (items) {
                  $.each(items, function (index, item) {
                    item.edit = '<div class="btn-group"><a id="editGroup" class="btn">Edit</a></div>';
                  });
             },
            data: this.collection.toJSON(),
            delay: 250
        });
          $('#MyGrid').datagrid({
            dataSource: dataSource,
            stretchHeight: true
        });
  });

The app.Playerview object is created somewhere in bakcbone router as follows:

       new app.PlayersView({
            collection : new app.UsersCollection
        }));

Here, column are username, groups and edit. The edit column for each row contains edit button. When I click the edit button in any row, I want to pass the particular row modal or row data to any other backbone view. How can we do that?

Actualy I will open the dialog that will allow to edit that particular row. I want modal to be pre-populated by that row value.

Thanks in advance

@Loamhoof, the fuelux datagrid directly takes my collection. And, therefore, I want to figure out how to take model of each row and pass them to some other view when on click edit in row — Lasang, Apr 05 '13 at 04:18

score 1 · Answer 1 · answered Apr 05 '13 at 08:23

From a Backbone point of view you have no control whatsoever on your grid. So basically, at the moment, your rows don't represent any model.
As things are now, if you only want to pre-populate your modal, I guess you could do it easily with jQuery.
However I'll assume you also want your models to be changed at the same time. I don't know Fuel UX so I don't know exactly how you could do this but (but I'm still pretty sure you can, and should if you want your models to be updated): wait until the grid is created, bind your models to the grid by creating a view which element would be the row for each, and inside this view listen to clicks on your button. Here you would have direct access to your model, and therefore your data.

If you'd post some more code (the definition of your model for example) and the HTML of the grid (or a simplified version as I'm sure it's full of custom classes and so on), I could help if you wish so.

score 1 · Answer 2 · answered Apr 06 '13 at 21:17

If your players have unique identifiers you can change your edit buttons as follows, to include a player ID:

Before:

<a id="editGroup" class="btn">Edit</a>

After:

<a id="editGroup" data-id="3" class="btn">Edit</a>

Of course, you would plug in the correct ID inside your existing formatter function. You would then have access to this ID from the click event in order to populate your dialog and choose the correct model to update.

How to make fuelux datagrid's(generated by backbone collection) each row editable using dialog

2 Answers2