Open modal dialog from within ember-table cell

Question

I'm at my wit's end trying to accomplish what should be very straightforward behavior: I have an Ember table component (from Addepar), I would like to have buttons inside that table that trigger a modal dialog.

Since I'm new to Ember, I started with the Ember table starter kit jsbin available here: http://jsbin.com/fasudiki/9/edit

I added a custom cell view so I can use my own template:

  columns: function() {
    var firstColumn;
    firstColumn = Ember.Table.ColumnDefinition.create({
      columnWidth: 350,
      textAlign: 'text-align-right',
      headerCellName: 'Column 1',
      tableCellViewClass: 'App.EmberTableMyCustomCell',
      getCellContent: function(row) {
        return row.get('myRandomValue').toFixed(2);
      }
    });

    return [firstColumn];
  }.property(),

with

App.EmberTableMyCustomCell = Ember.Table.TableCell.extend({
    templateName: 'custom-table-cell',
    classNames: 'custom-table-cell'
});

and

<script type="text/x-handlebars" data-template-name="custom-table-cell">
    <span class="ember-table-content">
    {{ view.cellContent}}
    <button {{action 'openModal' 'modal'}}>This one doesn't</button>
    <button {{action 'myCellAction' 'modal'}}>This one doesn't either</button>
    </span>
</script>

I then tried following the official Ember guide for modal dialogs: http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/

In Ember terminology, I'd like to be able to trigger an action on the Index route from within the ember-table component.

I tried triggering the action directly from the template which didn't work:

<button {{action 'openModal' 'modal'}} >Open modal</button>

I then tried what is suggested in the "Sending Actions From Components To Your Application" guide: http://emberjs.com/guides/components/sending-actions-from-components-to-your-application/

by creating an 'actions' map on the App.EmberTableMyCustomCell view and then using both

  this.send('openModal', 'modal');

and

  this.sendAction('openModal', 'modal');

Again, no success.

I then tried what's recommended in this SO question: Ember component sendAction() not working

by setting the action name in a custom attribute on my ember-table and using it at a parameter for triggerAction(...) using:

<div class="table-container">
  {{table-component
    hasFooter=false
    columnsBinding="columns"
    contentBinding="content"
    myCustomActionName="openModal"
  }}
</div>

and

  actions : {
    myCellAction : function () {
      this.triggerAction('myCustomActionName', 'modal');
    }
  }

Again, no success.

Any ideas what I'm doing wrong?

I have put the code in jsbin: http://jsbin.com/yovikaviseve/2/edit

azirbel azirbel · Accepted Answer · 2014-09-11T18:29:35

I believe that (unfortunately) your action in App.EmberTableMyCustomCell is not being called. I'm not sure if it's the best solution, but I was able to work around the problem by extending Ember.Table.EmberTableComponent and defining my action there. Once the action was called there, I was able to use the method from your linked SO post to propagate the action to the ApplicationController.

I actually sent the primary action instead to make things a bit simpler, as described here: http://emberjs.com/guides/components/sending-actions-from-components-to-your-application/.

Here's the working example: http://emberjs.jsbin.com/yemebu/3/edit.

Thanks for including a JS Bin - made it much easier for me to take a look. Let me know if you have more questions or if this approach doesn't work for you!

Open modal dialog from within ember-table cell

1 Answers