Custom App Module - AG Grid Table Generator

Wappler Extensions
,
#21

In this release have added a click event handler and theme selection.

To use the row click event perform the steps below:
Note: Ensure your data source holds an id field.

  1. Enable Row Click in the UI
    image
  2. Then in Dynamic events add Grid Events => Row Clicked
    image
  3. Select the steps which you wish to perform on the row click event
    image
    image1004×378 28.1 KB

    Add dynamic binding for the id binding

image
image695×160 5.55 KB

If you require rest of the data on row click,
you can find those values inside the data object
image

Also added Toggle and Checkbox control for ID,
Use Case:

  1. Multi-select IDs, bulk operations
  2. Slider toggle for status fields (you can bind this to an SC action for togging the true/false status)
    image
    image740×231 6.9 KB

To Enable Selector checkbox

  1. Enable the Row Checkbox events checkbox
    image
  2. Add Dynamic Events for Checkbox Checked and Unchecked
    image

To Enable Status Toggles

  1. Ensure the status field (boolean) is present in your data source
  2. Enable the Row Status Toggle checkbox
    image
    Note: Ensure Row Click Events is unticked, otherwise it will take precedence.
  3. Add Dynamic Events for Status Enabled and Disabled
    image

To Enable Actions Column

  1. Tik the Configure Actions group and Enable Actions
    image
  2. Set the required options for class, icon, tooltips, and title, else leaf to defaults
    image
  3. In Dynamic Events set the Action events for Edit and View Clciked
    image
  4. Use the binding available for id for the next set of actions

image
image1245×570 127 KB

Change Locale (currently only English and Hebrew are supported

image
image1343×446 161 KB

Enable RTL
image

3 Likes
#22

Awesome stuff, I ended up using tabulator, but I might switch back when I find sometime to revisited that portion of the app.

Keep at it, I would love to contribute, but I am not keen on Wappler Extensions as of right now.

1 Like
#23

How would you handle pagination server side? I have around 2k of data to display each session

#24

HI @KrishManohar,
That part isn’t handled in this module yet, as its an Enterprise feature.
Am looking for a way around this e feature, will update you if i find a way to implement this in community edition.

1 Like
#25

Readme updated with new features:

#26

Added Features:

  1. Compact View
  2. Define Amount fields
  3. Support for Transactional Updates of Client Side data
    https://www.ag-grid.com/javascript-data-grid/data-update-transactions/
2 Likes
#27

Version 0.6.4 released with below features:
  1. Module now supports grouping of fields
  2. Amount Fields settings moved to Data Manipulation on UI
  3. Action Attribute added for Export CSV, in case anyone wishes to use a separate button action for triggering the download instead of inbuilt

Please refer to Readme for more details

3 Likes
#29

Goddmorning,

Awesome extension. Sorry for the simple question but how I can tun it in Wappler. I using the terminal in my project and running the npm I command and i am getting that 270 packages was successfully installed . How I can use it in my project. I can’t found it inside the frond end components.

Nora

#30

Please check: How To Install and Use Custom Wappler Extensions

#31

Nicely done Roney! Thanks for putting this together!

1 Like
#32

Added Support for Totals footer row and Save Column State to Browser Local Storage.
image
image

4 Likes
#33

Added Support for importing CSV and Excel Files
Added Support for SelectedRow fetch and variable to use that array for further actions

image
image

4 Likes
#34

This is an awesome extension for Wappler. It saves me so much time adding data grids to pages. Thanks for all of your work building this extension.

I do have one issue I am running in to and was hoping you could help. When using the “Hide Components” feature, the “Hide Fields” part works, however if I add a column to the “Hide Filters” or “Hide Sort Filters”, the grid completely disappears when viewing in the browser. I take the columns out, and the grid comes back. Am I doing something wrong?

image
image419×808 44.7 KB

Thanks,
Chris

#35

Hi @turn3636,
Thanks for reporting this, was able to replicate the behavior and fix the bug.
Have released version 1.0.7 with the fix, kindly update to the latest.

2 Likes
#36

Great, thanks!

1 Like
#37

Thanks again for that update. I have another issue and I am probably doing something wrong.
I am trying basically trying to show a detailed record. I have the “Configured Actions” checked, along with “Enable Actions” checked and the “View Action Button” checked. I set the styling and everything is working so far. I added a Dynamic event of the View button being clicked so I could load by server action and populate my ID with the ID from the AG Grid row. It does load my server action but the ID is null.

Here is what I have set:

image
image392×963 58.3 KB

Here’s my response:

image
image1428×807 110 KB

Should this be my ID? Or should I have a nested array of all my column names here? How does it know what my ID column is?

image
image1114×989 129 KB

#38

Hi @turn3636,
For the id binding to work the data source needs to provide id field data,
Can you verify if your Data Source provided contains the id field or not,
If there is no ID field in the data source, then you can still use the “data” object of the row and retrieve the specific row data for further actions. ex: data.name, data.item, etc.

#39

Yes, my data source does contain an id column, but it is not named “id”. Does that matter?

#40

Yes that matters, the binding for id works only when your id field matches “id” field provided in your data source.

1 Like
#41

Great, thanks.

1 Like