jeudi 21 juin 2018

How to create right click option using ember

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,

In that gear icon only we can able to left click to get options

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;
                                    }
                                })
                            ]
                        })
                })

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.




Aucun commentaire:

Enregistrer un commentaire