Hello, I am having table row, in that action icon only able to show left click options. Now I need to create right click option for action icon as well as to the total row.
Here is the picture for the row,
For this html file having:
<tbody id="ember52450" class="ember-view body-view container-view">
<tr id="ember52672" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
<td id="ember52822" class="ember-view content-data item-number item-number-view container-view item-number-view-core_component_data-view-mixin container-view-core_component_data-view-mixin itemNumber">
<div id="ember52825" class="ember-view view">
<div>1</div>
</div>
</td>
<td id="ember52831" class="ember-view lmdd-menu actions container-view">
<rs-icon id="ember52834" class="ember-view action-menu icon clickable-icon" title="Actions and transitions" style="width: 1em; height: 1em; font-size: 20px">
<icon glyph="action" class="action" style="font-size: 20px;">
</icon>
</rs-icon>
</td>
<td id="ember52840" class="ember-view content-data view view-core_component_data-view-mixin name">
<div class="container">
<div class="content">autocomplete</div>
</div>
</td>
<td id="ember52846" class="ember-view content-data view view-core_component_data-view-mixin label">
<div class="container">
<div class="content">autodf</div>
</div>
</td>
</tr>
</tbody>
For this having corresponding ember file, In that of table part is below:
Core.component.ObjectTable.extend()
.named("Admin.LMDView")
.reopen({
controllerBinding: 'parentView.pagination',
modelBinding: 'controller.resultSet',
displayStartBinding: 'controller.contentPageStart',
displayLengthBinding: 'controller.contentPageLength',
noContentIcon: 'metadata',
noContentMessage: 'admin/navigators/administration/lmd/no-content',
hasHeader: true,
paginated: true,
trailingColumns: [],
columns: [
// TODO: Move labels into messageTable
{ type: "actions", label: " " },
{ name: "name", label: "Name" },
{ name: "label", label: "Label" },
],
getColumnView: function (column) {
if (column.type === 'itemNumber') {
return Core.view.Activity.ItemNumberView;
}
if (column.type === 'actions') {
return this.constructor.ActionsColumn;
}
if (column.type === 'boolean') {
return Core.component.ObjectTable.BooleanColumn;
}
if (column.name === 'description') {
return Core.component.ObjectTable.NullableColumn;
}
if (column.name === 'elementCriteria') {
return Admin.ElementCriteriaColumn;
}
if (column.type === 'icon') {
return Core.component.ObjectTable.IconColumn.extend({ withName: true });
}
return Core.view.Activity.GenericDataView;
},
getHeaderView: function (column) {
if (column.icon && column.type === 'boolean') {
return Core.component.ObjectTable.IconHeader;
}
if (column.type === 'itemNumber') {
return Core.component.ObjectTable.ItemNumberHeader;
}
if (column.type === 'selection') {
return Core.view.Activity.SelectionCheckmarkView;
}
return Core.component.ObjectTable.DefaultHeaderView;
}
}).reopenClass({
ActionsColumn: Ember.ContainerView.extend()
.named("Admin.navigators.Administration.LMD.Actions")
.reopen({
tagName: 'td',
classNames: [ 'lmdd-menu' ],
childViews: [
Core.view.Icon.extend({
model: 'action',
classNames: [ 'action-menu' ],
size: 20,
titleBinding: 'Core.messageTable.workflow/chrome/action-menu',
click: function () {
var lmdd = this.get('parentView.rowView.object');
var lmdds = this.get('parentView.rowView.tableView.model');
var model = Core.model.Menu.create({
loadState: 'done',
content: [
Core.model.Menu.Item.create({
label: 'Delete LMD Definition',
icon: 'delete',
invoke: function () {
var fmtLabel = lmdd.label ? (lmdd.label + " ("+lmdd.name+")") : lmdd.name;
Core.confirm(
"Delete LMD Definition",
"Are you sure you want to delete the LMD Definition for " + fmtLabel + "?",
"Delete",
"Cancel"
).then(function () {
Core.services({
service: 'lmdd',
type: 'delete',
data: {
name: lmdd.name
}
}).done(function () {
lmdds.reload();
Core.notify({
title:"Delete LMD Definition",
message: "LMD Definition " + fmtLabel + " deleted"
});
});
});
}
})
]
});
var view = Core.view.Menu.create({
model: model,
menuContext: { lmdd: lmdd },
anchor: this.$(),
highlight: this.$().parent('tr:first')
});
view.show();
return false;
}
})
]
})
})
For the table having bodyrowview.js, in that I have tried like this:
click: function (event) {
var eventResult = this.get('tableView').clickRow(event, this.get('object'));
if (eventResult !== false) {
this.get('element').focus();
$('.content-data, .action-menu, .managed-object-tools-icon.clickable').bind('contextmenu', function(e) {
console.log(e);
e.preventDefault();
var actionMenuContext = this.get('object');
var element = e.currentTarget;
this.get('controller').send('contentItemActionMenu', row.length ? row : element, element, actionMenuContext);
return false;
}.bind(this));
}
return eventResult;
},
I need the right click options come for whole table row(every “td”). I’m using ember 1.4.0 version. I’m new to the Ember. Please ask me if you need further details also. Your help will be appreciate. Thanks in advance.
I’m not sure if this was your question but I answered something very similar on Stack Overflow recently:
