New grid widgets to replace grid/template grid / listviews for UI flexibility - Mendix Forum

New grid widgets to replace grid/template grid / listviews for UI flexibility

155

Why do I wish for the restructuring of grids/template grids/listviews?


Currently the grids come with pre-defined structures. And they feel so limiting when it comes to UI design and UX.

In all honesty each project I've built I'm currently creating CSS or widget workarounds to facilitate better UX. 

And this is just taking a huge amount of extra time which I often get into discussions about with our clients and my managers because they don't understand the extra efforts it requires to work around the default structure of grids / template grids, and when you offer them the listview as an alternative which is more flexible in styling. You then have to explain to them that the listview can't be sorted by the user and also searching is limited compared to grids / template grids.


Both the normal buttons and paging buttons at the top are just horrendous.
As most grids get so long that buttons drop off the screen at the top. 
If there is multiple pages the user needs to scroll back-up to see whether there is another page.


Also almost every client wants the edit / delete / action buttons inline with the items. 
Because it isn't clear that you need to select an item and then click a button at the top of the grid.

How often have you've not experienced yourself: "you don't have an item selected" before clicking a button.
So yeah, we've created a widget that can actually replace columns of a normal grid with new content like buttons or images but the fact that we need a widget for that is just stupid.

And the reason we created the widget is because to achieve buttons inline with the items, you could choose to use the template grid, but then there is the issue of headers, grids have headers by default. Whereas if you want a template grid to have headers you're in trouble because it is not possible unless you javascript inject them into the DOM or CSS hack the paging buttons to the bottom of the grid and disable search. 

Same goes for a listview you can get there by going stylingless listviews and creating a table above and inside each list item aligning them as best as you can with CSS. But all this extra effort for such simple UX is just plain annoying.

SO to conclude my "rant", here is some constructive feedback as to how I would like to construct my lists of data.


Using a set of new core widgets:
 

- New grid widget that replaces grid / template grid / list view:


- Grid body data column(s) widget:


- Header toolbar:


- Paging toolbar widget:


- List summary toolbar widget:


Examples: 

1-50 customers displayed out of 1000 customers

1 product displayed out of 50 products


- Button toolbar widget:


- Search toolbar widget:

 

- Customized toolbar widgets from Appstore

asked
30 answers

I hope the Mendix Datagrid V2 is atleast as good as the comparable grid from competing solutions like OutSystems. If there is one single feature enhancement that would immediately have a bigger impact than anything else on the backlog of improvements is a decent data grid. 

Created

Hi Sean,

The data grid 2.0 is distributed as a module though the market place/app store, see: https://marketplace.mendix.com/link/component/116540

Note: it still has some limitations (like client side filtering/sorting/paging) which will be fixed in for the GA of Mendix 9

Created

A new datagrid was announced at Mendix World and is apparently part of Mendix Studio Pro 9 but when I look at the datagrid in the 9.0.2 beta release it seems to be the same as the old one? Is there a new one in the current beta release?

Created

At Mendix World we announced a new datagrid which will contain many of the above features. This will be part of Mendix 9. Next to that, next year we will keep improving on this

Created

Is there an update here? Is this still coming this year?

Created

I thought I was alone.

I searched the forum, the online documentation, the videos, I also posted some questions on the Forum about grids, lists, dropdown menu, filters. No answers!

Eventually, I found this thread.

During the last 4 weeks I’ve spent much time in searching for some ‘basic’ UI features that should be ‘there’ already, to eventually realize that they haven’t been developed yet. What is the point of using a low code application and than write CSS, Javascripts, or invent workarounds to create a graphical decent application? 

Let’s hope we get something soon.

Created

We are continuously making improvements and adding features. This will not be one release. Current plan is Q4.

Note that these things are not simple and take time do right. Next to that, we have many topics that we need to work on.

Created

Danny! How delayed are we talking? 
…..In the next 3-5 months delayed?
…..or in the next couple years delayed?

Created

Unfortunately we have some delays here

Created

We are in the middle of Q2. Let’s all hope that everything went as planned :-)

Created

+1 

Created

Its still an ongoing topic, if everything goes as planned Q2 will get some nice improvements on this topic.

Unfortunately we have some delays

Created

Are there any news on this? The last update we got was 8 months ago.

Created

I think this is an awesome example of a feature I wish would work in Mendix straight out of the box (see vids).
The amount of times we are creating tables, and the lack of good table support is slightly shocking:
A lot of clients ask for some sort of “excel” kind of features, which makes sense because that is their frame of reference.


https://www.youtube.com/watch?v=IBoafMgLefM
https://www.youtube.com/watch?v=6WtUWsQDuXM

Created

We rarely see this level of detail in suggestions – this is great, you have my vote

Created

I’ll just leave this here

A Complete Guide to CSS Grid
https://css-tricks.com/snippets/css/complete-guide-grid/

Created

Take your time to implement the features as best as you can. These are application components that are critical to our daily lives as Mendix developers therefor I'd rather have you take 2 years instead of 1 to implement it super well than to half ass it and still not offer the improvements we're all eagerly waiting for.

Created

Hi all,

This is still an ongoing topic and has priority. However this is a big topic, it requires fundamental architecture changes and changes on other levels, and unfortunately takes longer than hoped.

Created

Probably an option to make this clientside logic. Something like Datatables.js. Proven technology.

But any improvement will be very welcome.

Created

Any news on this? eager to see this happening.

Created

any news on this?

this is a daily struggle for me :( 

Created

Hi all,

This is a huge topic for us and we are still working on it. Unfortunatly is does not goes as fast as we want, but be assured, this still has high priority.

I recommend checking out list view controls: https://appstore.home.mendix.com/link/app/105694/

Created

Anyone have a news update on this per chance?

Created

The latest update I've received on this subject Jason is from a LinkedIn message exchange with Danny Roest on the 27th of May. In which he elaborated that Mendix is currently re-writing widgets to React, where they've rewritten de input widgets to React which are estimated to be launched in 7.16 & 7.17 which are 1-for-1 replacements so there is zero new feature introductions just a different framework running in the background rendering them.  They are also currently working on a re-write of the datagrid to react, to allow for sorting and paging based on a datasource microflow for the grid. This also will be a 1-for-1 rewrite of the current datagrid. They then have it planned to re-write other widgets. And after all that they plan to start introducing new features that have been described in here. So my current guess would be that we can see the features somewhere around Mendix version 8.15. 

Created

any news on when this is planned?

Created

As additional features I thought off: Make holding down the mouse key over the Grid body draw a selection rectangle which can be used to select multiple items.

Make it possible to drag and drop a row item and drop it in between other row items, add ability to set a sorting microflow, which passes the new state of the sorted list to a microflow as list of objects. Allow dragging the entity over the paging toolbar and jump to the next page or last page or page with page number after holding it over that clickable element for X seconds

Created

Im glad im not the only one running into this :D 

Created

Hi Danny Roest,

How to generate a new grid view with ui column like the topic below 

 

https://www.mendix.com/blog/mendix-7-13-a-bakers-dozen-of-developer-updates/?utm_medium=social-owned&utm_source=linkedin

 

Thanks

Created

Lovely, eager to see this happening. So hate the customer's question 'Can't I just download it to Excel, modify data and upload it again?'.

I hope the repeaters will meet all suggestions.

Created

Thank you for your elaborate post, and the suggestions! We understand (and agree with) your feedback.

We are currently working on rearchitecting our client and the way we build widgets. An important topic of this is "Repeaters", which is the term we use for the new approach for iterating over objects and visualizing this in a way. You can see this as the next step for data grid, list view and template grid.

Our idea is to make this generic by creating a repeatable concept which can be visualized in different ways, and to which you can attach other widgets (like a paging widget, search widget, sorting widgets) that can communicate to the repeater. In this way you can build your own data grid, list view or template grid like widgets as building blocks.

This will create a consistent way of handling multiple object with a full UI flexibility.

We will keep your feedback of the current UI in mind when building the new set of widgets.

Created