I'm refereeing this example of slickgrid for context-menu
In the image given below I'm using angular-slickgrid along with ngx-contextmenu, where I'm displaying my context menu only when a particular cell is clicked in status column, Based on particular cell value different option has been displayed in context-menu.
My problem is when I want to update or replace that particular cell value with the selected option from context menu eg: "Inprogress" should replace or update as "Suspended" from context-menu.
HTML code
/**************HTML code********************/
/**********angular-slickgrid code************/
<div id="container">
<angular-slickgrid
gridId="grid"
(onAngularGridCreated)="angularGridReady($event)"
gridWidth="'90%'"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset"
(onGridStateChanged)="gridStateChanged($event)">
</angular-slickgrid>
</div>
/*************ngx-contextmenu code***********/
<context-menu #editMenuRight>
<ng-template *ngFor="let item of mainOption" contextMenuItem>
<li #myLi class="myLi" data="low" (click)="test1()">{{item?.option}}</li>
</ng-template>
</context-menu>
Angular Component code
/*************Angular Component code***********/
import { Component, OnInit, Injectable, ViewEncapsulation, HostListener, ViewChild, Input,
ElementRef } from "@angular/core";
import { Headers, RequestOptions } from '@angular/http';
import { Http, Response } from '@angular/http';
import {
Column, GridOption, AngularGridInstance,
Filters, ExtensionName, FieldType, Formatter, Formatters,
Editors,EditorArgs, EditorValidator, Statistic, GridStateChange,
GridOdataService, OperatorType, OnEventArgs, MultipleSelectOption
} from 'angular-slickgrid';
import { ContextMenuComponent } from 'ngx-contextmenu';
import { ContextMenuService } from 'ngx-contextmenu';
@Component({
selector: 'app-schedule',
templateUrl: './schedule.component.html',
styleUrls: ['./schedule.component.css'],
encapsulation: ViewEncapsulation.None
})
export class ScheduleComponent implements OnInit {
/*******my option which I'm showing for particular cell if cell value matches with option****/
public mainOption: any[];
public scheduleOption: any[] = [{
option: 'Scheduled',
}, {
option: 'Suspended',
},
{
option: 'Abort',
}];
public suspendedOption: any[] = [{
option: 'Suspended',
}, {
option: 'Scheduled',
},
{
option: 'Abort',
}];
public inprogressOption: any[] = [{
option: 'Inprogress',
}, {
option: 'Suspended',
},
{
option: 'Abort',
}];
public abortOption: any[] = [
{
option: 'Abort',
}];
public completeOption: any[] = [
{
option: 'Completed',
}];
@ViewChild('editMenuRight') public editMenuRight: ContextMenuComponent;
@ViewChild("myLi") divView: ElementRef;
@Input() contextMenu: ContextMenuComponent;
constructor(private http: Http,
private httpClient: HttpClient,
private elementRef:ElementRef,
private remoteservercommunicationservice: RemoteServerCommunicationService,
public pathstorageservice: PathStorageService,
private globaldataservice: GlobalDataService,
private contextMenuService: ContextMenuService)
);
angularGridReady(angularGrid: AngularGridInstance) {
this.angularGrid = angularGrid;
this.gridObj = angularGrid && angularGrid.slickGrid || {};
}
/********* display context-menu code******/
public onContextMenu($event, item: any): void {
console.log(item);
console.log($event);
setTimeout(() => {
this.contextMenuService.show.next({
contextMenu: this.contextMenu,
event: $event,
item: item,
});
$event.preventDefault();
$event.stopPropagation();
});
}
ngOnInit() {
this.columnDefinitions = [
{
id: 'Status',
name: 'Status',
field: 'Status',
sortable: true,
filterable: true,
onCellClick: (e, args) => {
let v = args.dataContext.Status;
var cell = this.angularGrid.slickGrid.getCellFromEvent(e);
var msg = this.angularGrid.slickGrid.getColumns()[cell.cell].id;
console.log(cell);
console.log(msg);
/******** replacing option based on cell value******/
if (v == "Scheduled")
{
this.mainOption = this.scheduleOption; /***** replacing option here******/
this.onContextMenu(e,'right'); /***opening context-menu on cell click if its true***/
return this.mainOption;
}
if (v == "Inprogress")
{
this.mainOption = this.inprogressOption;
this.onContextMenu(e,'right');
return this.mainOption;
}
if (v == "Completed")
{
this.mainOption = this.completeOption;
this.onContextMenu(e,'right');
return this.mainOption;
}
if (v == "Abort")
{
this.mainOption = this.abortOption;
this.onContextMenu(e,'right');
return this.mainOption;
}
if (v == "Suspended")
{
this.mainOption = this.suspendedOption;
this.onContextMenu(e,'right');
return this.mainOption;
}
return this.mainOption;
}
}
]
}
/*** my problem is here, I want to fetch particular <li> tag value and replace or update the
particular cell with that fetch value after click in context menu or with particular option
selected in menu***********/
ngAfterViewInit() {
$(document).ready(function () {
$("#editMenuRight").click(function (e) {
if (!$(e.target).is("li")) {
return;
}
if (! this.gridObj.getEditorLock().commitCurrentEdit()) {
return;
}
var row = $(this).data("row");
this.dataset[row].Status = $(e.target).attr("data");
this.gridObj.updateRow(row);
});
});
}
