Any example of a dropdown menu in a particular cell

[jeremielodi]

General Question, Topic

Your Environment

Software	Version(s)
Angular	8
Angular-Slickgrid	x.y
TypeScript	x.y
Operating System	x.y
NPM/Node/Yarn	x.y

Context

Expected Behavior

Current Behavior

Possible Solution

Code Sample

[ghiscoding]

I believe this is a duplicate of issue #248 and if so, there's an example on how to do it yourself in it

[jeremielodi]

What I mean is like this :

I use boostrap dropdown

[jeremielodi]

In the picture I use ui-grid of angular 1.x

  {
      field: 'Actions',
      width: 100,
      displayName: '',
      enableFiltering: false,
      cellTemplate: 'modules/school_management/enrollment/templates/action.cell.html',
    }

[jeremielodi]

@ghiscoding this is a kind of formatting, it is not a context menu

[ghiscoding]

Perhaps you're looking for this or just use a Custom Formatter to can be a link or a button to open a modal window or whatever else. If you look at this Example 2 - Formatter, the last column named "Completed" does an action by using onCellClick and you can do the same for all your use case.

I suggest you to read the Wiki and if you are still confused, then I suggest you ask that kind of questions on Stack Overflow. It is most probably doable with a Custom Formatter.

[jeremielodi]

OKay, I'm trying to use component as you mentionned at #152 and see if I will be able to implement that

[jeremielodi]

This is exactly what I did with ui-grid

[jeremielodi]

If in the future we can have a property called 'cellTemplate' that will help to load the html template from a url or text in cell definition, we will make things easy.
And inside the template use can use the component scope for accessing methods ...

What I'm looking for is like the Grid Menu in a particular cell

Something like this will be awsome

{
       id: 'title',
      name: 'Title', 
      field: 'title',
      cellTemplate: '/template_url_to_replace.html',
}

[ghiscoding]

A cellTemplate is a Formatter in SlickGrid and that is what you have to use. We used UI-Grid in AngularJS projects before and there's nothing we can't do with Angular-Slickgrid compare to UI-Grid.

[ghiscoding]

I give that a quick try at it, it's more complicate than I imagine, mainly for the following reason

• Angular-Slickgrid is a wrapper on top of SlickGrid which is a jQuery library... meaning that the core of the lib is not written in Angular which makes it harder to deal with custom Angular (a problem that UI-Grid didn't have because it was written in Angular)
• You cannot use just a Formatter because a SlickGrid Formatter always expect an html string to return right away (and instantiating an Angular Component is not returning right away)
• the dropdown list doesn't show when using a custom formatter and using z-index doesn't help, that is how SlickGrid is built and the only way to get over this problem is to move the dropdown to the DOM document body.

I got a quick sample working by following these steps

1. Use a Custom Formatter just to show the Bootstrap Dropdown button (note that it's an empty shell without any action list, the real one that will be used comes from the Angular Component on step 3)
2. Add the Custom Formatter to your column definition
3. Create an Angular Component with the real Bootstrap Dropdown with the list of Actions which we'll use (click) event to trigger the action
4. Add the Angular Component to the Angular App Module in the declarations and entryComponents
5. add (sgOnActiveCellChanged) to your Angular-Slickgrid component
6. add the action in your component (I added a delete action in the component where the grid is but I guess you could also move the code to the action component)
7. add the onActiveCellChanged method in your component which will instantiate the Action Angular Component and also append this new DOM element to the body container (because we cannot show a list within a grid cell).

See the commit for the complete list of changes.

I might simplify this process in the future by moving this into a separate service, but even if I do, there are some steps that just cannot be removed (at least step 3-4 will always be required by the user).

and finally it works!

[jeremielodi]

Thanks a lot

[ghiscoding]

The GitHub Demo and the angular-slickgrid-demos just got updated as well. You can see the live demo here

Cheers ⭐️

[jeremielodi]

It's a very good start 👍

[jeremielodi]

I did some manipulations on the dropdown in order to improve it behavior a bit.

This pull request has all my changes.
You can see how it works now