Possible to achieve the following functionality?

[pkz]

Hi Team,

I’m interested in using your data grid and your themes. I’m currently trying to migrate from datatables+chartjs to a unified platform and came across your library. I’m interested in knowing if the following functionality is possible to achieve with the current feature set of the smart grid:

 

1. Is it possible to drag and drop rows across nested data grids (with events that are triggered after and before the drop)?
2. Do you have any type of cross-filter that works like this: user clicks on a chart’s data point and he is shown all the rows that are part of that data point in a table
3. Is it possible to have charts are cells – like, bar chart, line chart etc., ?
4. Can the contents of a cell be formatted as per our liking? like formatting comma-separated strings as badges etc.,
   
5. Is it possible to add a scroll bar at the top of the grid so that users don’t have to scroll to the bottom to scroll horizontally if there are many columns?
6. How customizable is the UI of the grid? is it possible to customize it like the table below:
   

 

Finally, is there an example that combines a lot of the existing feature of the smart grid? aggrid seems to have a lot of such examples where a lot of features are possible to do. For example, I have not found an example where I can sort + freeze column + group columns + have nested tables etc.,

 

Thank you!

 

[admin]

Hi pkz,

Thank you for your interest in our products.

Regarding your questions:

1. Drag and Drop between Grids can be implemented like that: https://www.htmlelements.com/demos/grid/row-drag/
2. Unfortunately, we do not have such functionality built in the Grid. That can be implemented by dynamically setting the Grid’s dataSource property to a new Array or DataAdapter instance.
3. The Grid allows rendering of any type of HTML in the cells by using a templating functionality. For example: https://www.htmlelements.com/demos/grid/column-dynamic-template-with-components/ shows how to implement templates rendering.
4. Yes, you can render tags in cells. For example: https://www.htmlelements.com/demos/grid/column-dynamic-template/
5. No, but in most cases Grids are either with responsive or fixed height and the horizontal bar is shown in the view area. For example: https://www.htmlelements.com/demos/grid/spreadsheet/
6. Yes, you can have top pager and all other parts can be done as well.
7. You can take a look at: https://www.htmlelements.com/demos/grid/users/. The demos shows sorting, filtering, columns panel, column resize, column edit, multiple cells selection(excel-like), multi-users support and different types of cell editors.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[pkz]

Hi Peter,

Thank you for your reply and your answers!

I tested the demo which included multiple functions and found that the android vertical view does not work:

Another issue is with selecting filter after clicking on sort, it auto scrolls to the bottom of the page: video: https://ufile.io/todisyz7

<hr />

 

Few more questions:

1. Is it possible to auto-hide rows based on size of the container/window on some sort of priority levels?
2. Is there dark-mode for all the elements of the table or do we have to define them manually in CSS? (like, the charting inside the table)
3. what are some features that would not work (like grouping etc., – not sure if it’s 100% supported) if a server-side model is used?
4. Does a row’s size (height) increase dynamically if the content of the any cell in the row is large? for example, if I were to add 5 tags of 6 characters each, how would the row look like?
5. Is it possible to have a search box for each column along with a filter button?
6. How would pagination look like for a server-side model? we return the no. of records & the records/page right? or is it just next/prev button?

 

Thank you!

[admin]

Hi pkz,

The Grid in the sample was with width set to (100% – 350px) That’s the reason why on a small screen its width is nearly 0.

1. Auto-hide rows is not supported.
2. We have a Dark theme. You can look at the demo and choose a theme from the Theme chooser. You can also use Bootstrap or Material style design.
3. Server side grouping is supported. Look at: https://www.htmlelements.com/demos/grid/server-side-grouping/. Rows within groups are loaded on demand after expand.
4. No, but cells wrapping feature can be enabled – https://www.htmlelements.com/demos/grid/allow-cells-wrap/
5. Filtering Row is supported – https://www.htmlelements.com/demos/grid/filtering-row/
6. Server-side pagination can be seen here: https://www.htmlelements.com/demos/grid/server-side-paging-sorting-filtering-mysql-php/

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[pkz]

Thank you for the answers again, Peter.

You still have not addressed the last bug report I mentioned which is the page jumps when clicking on sort/filter (video attached in previous post).

Regarding Q1. I’m sorry I meant columns – not rows. Hiding columns based on priority level as the windowsize gets smaller – is this possible?

[admin]

Hi pkz,

I can’t see the video as my web browser reports it as unsafe.
As for hiding columns based on priority – no, we do not have such functionality built-in the Smart.Grid. We have it in our Table component, but not in the Grid.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[pkz]

It’s a safe website – no sign up required for video upload. how can I share videos with you? there is no options for in the forums…

https://drive.google.com/file/d/1xC2Ch-Vi8SH9u4Ucnwbj0tkt-fIZYrte/view?usp=sharing

• This reply was modified 2 years, 8 months ago by pkz.

[admin]

Hi pkz,

We will investigate what could be the reason for this. It seems that the browser auto-scrolls to the focused element.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts