Posted 13 August 2023, 8:29 pm EST - Updated 13 August 2023, 8:34 pm EST
Context menu implementation in angular
Posted by: nilesh_nichal on 13 August 2023, 8:29 pm EST
-
nilesh_nichal
-
anirudh.verma
Posted 15 August 2023, 3:37 pm EST
Hi,
You can implement the same functionality in Angular using the wjContextMenu directive.
Please refer to this link for more information on the wjContextMenu directive: https://www.grapecity.com/wijmo/api/classes/wijmo_angular2_input.wjcontextmenu.html
Please refer to this sample for reference: https://stackblitz.com/edit/angular-umslg4
Similarly, you can attach a context menu on an arbitrary HTML element or on other Wijmo controls.
Please refer to this demo sample for reference: https://www.grapecity.com/wijmo/demos/Input/Menu/ContextMenus/angular
Regards
-
nilesh_nichal
Posted 16 August 2023, 8:05 pm EST
Hi Anirudh,
Thank you so much for the reply.
We had two more requirements in this, it would be really helpful if you consider them.- We wanted to show a pin icon on the column header once the column has been pinned through context menu option
- Once we auto-size columns we needed one option to restore the auto sizing of all columns to initial state.
Regards
-
anirudh.verma
Posted 17 August 2023, 4:22 pm EST
Hi Nilesh,
As per your requirement, I have modified the previous sample. The required functionalities can be achieved by using the following approaches:
-
To show a pin icon on the column header once the column has been pinned through the context menu option - You can use the allowPinning property of the FlexGrid. This will show a pin in the column headers. Please refer to this API reference for more information on allowPinning property: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#allowpinning
-
We needed one option to restore the auto sizing of all columns to the initial state - You can store the initial width of all the columns and can then reassign it to all the columns whenever the appropriate option is clicked from the context menu. I have implemented two functionalities, first to reset the size of a specific column and second, to reset the size of all the columns.
Please refer to this sample for reference: https://stackblitz.com/edit/angular-33qgql
Regards
-
-
nilesh_nichal
Posted 22 August 2023, 12:05 am EST
Hi Anirudh,
Thank you so much for the help! -
anirudh.verma
Posted 22 August 2023, 2:29 pm EST
Hi Nilesh,
I am glad that I was able to help you. Please let us know in case you have any further queries.
Regards
Anirudh -
nilesh_nichal
Posted 21 September 2023, 4:17 pm EST - Updated 21 September 2023, 4:25 pm EST
Hi Anirudh,
Even if we comment this code(shown in the attached image), the context menu will be shown after the user clicks right button of the mouse on a column. I wanted to prevent the menu being shown to the user for a particular column(In your given example’s case, the column before the Id column). Can you please help me to solve this issue? -
anirudh.verma
Posted 21 September 2023, 6:20 pm EST
Hi Nilesh,
Sorry for the confusion. Since the wjContextMenu directive is used to show the Menu for FlexGrid so, this part of the code will not have any action. So, to prevent the menu from being shown to the user for a particular column you may call preventDefault() and stopPropagation() methods in the handler of contextmenu event.
Please refer to the following code snippet:
host.addEventListener( 'contextmenu', (e) => { // select the cell/column that was clicked let sel = grid.selection, ht = grid.hitTest(e), row = ht.getRow(); ** // Prevents context menu from opening in case the context click is performed on RowHeader, TopLeft or BottomLeft cells.** if ((ht.cellType === CellType.RowHeader) || (ht.cellType === CellType.TopLeft) || (ht.cellType === CellType.BottomLeft)) { e.preventDefault(); e.stopPropagation(); return; } switch (ht.panel) { // ... code } },true);Please refer to this link for more information: https://www.grapecity.com/wijmo/api/classes/wijmo_angular2_input.wjcontextmenu.html
Please refer to this sample for reference: https://jscodemine.grapecity.com/share/PsUJSwc4MkKGO3rM9_DBew
Regards
Anirudh -
nilesh_nichal
Posted 21 September 2023, 8:50 pm EST
Hi Anirudh,
It working properly now, thanks for the solution.
-
anirudh.verma
Posted 21 September 2023, 10:23 pm EST
Hi Nilesh,
Thank you for informing us. Please feel free to reach out if you have any further questions.
Regards
Anirudh -
nilesh_nichal
-
sonu.pandey
Posted 2 October 2023, 5:25 pm EST
Hi Nilesh,
The observed behavior is expected because the wjFlexGridCellTemplate customizes the cells based on its defined template. If you wish to display the pin icons using the wjFlexGridCellTemplate template, you can manually insert the HTML for pin icon buttons within the template and manage the pinning toggle. Please refer to the provided code snippet and sample link below:
<wj-flex-grid-column [binding]="'date'" [header]="'Date'"> <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell"> <button [className]="getPinnedStateClass(cell)" type="button" tabindex="-1" aria-pressed="false"><span class="wj-glyph-pin"></span></button>{{cell.col.header}} </ng-template> </wj-flex-grid-column>Sample link: https://jscodemine.grapecity.com/share/qSC4yslwUEedzKHN1v-w2Q/
Regards
