[Data Grid Reactive] Multiple Columns with same visibility and order
Forge component by Bruno Martinho
Application Type
Reactive

Hello,

I have a scenario where there on the grid a set of columns that needs to be together - visibility and order should stick.

For example, on a product list grid we would have these columns:

Id | Product Name | Warehouse 1 | Warehouse 2 | Total

In this case, Warehouse 1, Warehouse 2, and total should always be on this order and the visibility would be on the Total column - if it is displayed, all 3 would show and if not, all 3 would not show. 

Is there an easy way to implement this control over Warehouse 1 and Warehouse 2 columns based on the Total column? 

I am guessing I would have to set the AllowReorder property to true on the Total column (the others would be false), but how to get an event when the Total column order and visibility changes and how to trigger action to change order for the other columns? 


Thank you.

mvp_badge
MVP
Solution

Hi @Joao Kuae,

Thank you for reaching out for this interesting use case.

I would separate your use in 2 different features:

  1. Ability for the columns to be group, and moved together - at the moment it's not possible to create column groups, as such unfortunately, the only way is to do it fully manually through JavaScript.
    How to achieve it? As you would have to append to the event "draggedColumn" and then understand what column was dragged by the binding, followed by then dragging programmatically the other 2 columns.
  2. Ability to get an subscribe to events from the column picker - this is what would allow you to understand when some column was checked / unchecked and with that do the logic that you require (show/hide the Warehouse 1 | Warehouse 2 columns for example.
    How to achieve it? For that you should append your own handler to the event "itemChecked" (receives a parameter - e.g. s of type wijmo.input.ListBox), and check which is the binding (s.selectedItem.binding) and if it was checked or not (s.selectedItem.isVisible).

But before going into helping you to create a workaround, allow me to ask you:

  • How important is this use case?
  • When do you need to deliver this use case?

I'm asking you this, because we are currently researching on how to "create group columns" based on a new nightly build of wijmo. If all goes well, we would be able to have this feature delivered in a near future - it's also dependent on the date of GA version of wijmo. This would help you with the feature 1. since you would not need to do as much or many no manual code, and instead would be just a configuration. 

I also noticed that we are not exposing the column picker feature, making it much harder for you to extend the grid behavior by attaching your own code to the event "itemChecked" as described in feature 2.. This is something that can be easily done for our next release.
This is what would enable you to append your client action like this:

GridAPI.GetGridById("YOURGRIDID").features.columnPicker.itemChecked.addHandler(YOURHANDLER);

Hoping to hear from you soon,

Cheers,
RG

P.s. Thank you @Julio Isaias for your suggestion, although doesn't fully solve the problems at hand!

Hi Joao,

I assume that Data Grid Reactive is getting the data from a JSONSerialize.

A solution could be to create 2 structures:
1. A structure with WarHouse1, WarHouse2, Total
2. Another structure without WarHouse1, WarHouse2, Total

So, then this way you can map your output according to the value of a total, using a switch or an if statement.



Julio.


Hi Julio,

Based on your idea, I would still need a trigger from the grid when the user deselect the Total column, which I don't know how to - since I need the event to change the structure. 

I am able to get the column visibility status, no I can manually change the other 2 columns. The issue is I need a trigger to know when the user changes the visibility.

ex:
I can get the Total column visibility with:
GridAPI.ColumnManager.GetColumnById("Total").config.visible

Either if its true or false, I can set the other 2 columns with:
GridAPI.ColumnManager.ChangeProperty("Warehouse1","visible", false)
GridAPI.ColumnManager.ChangeProperty("Warehouse2","visible", false)

In addition, I need a way to stick together those 3 columns. For example, the current order is:

Id | Product Name | Warehouse 1 | Warehouse 2 | Total 

If the user changes to:

Id | Total | Product Name | Warehouse 1 | Warehouse 2

I would need somehow change to:

Id | Warehouse 1 | Warehouse 2 | Total | Product Name


Thanks.

mvp_badge
MVP
Solution

Hi @Joao Kuae,

Thank you for reaching out for this interesting use case.

I would separate your use in 2 different features:

  1. Ability for the columns to be group, and moved together - at the moment it's not possible to create column groups, as such unfortunately, the only way is to do it fully manually through JavaScript.
    How to achieve it? As you would have to append to the event "draggedColumn" and then understand what column was dragged by the binding, followed by then dragging programmatically the other 2 columns.
  2. Ability to get an subscribe to events from the column picker - this is what would allow you to understand when some column was checked / unchecked and with that do the logic that you require (show/hide the Warehouse 1 | Warehouse 2 columns for example.
    How to achieve it? For that you should append your own handler to the event "itemChecked" (receives a parameter - e.g. s of type wijmo.input.ListBox), and check which is the binding (s.selectedItem.binding) and if it was checked or not (s.selectedItem.isVisible).

But before going into helping you to create a workaround, allow me to ask you:

  • How important is this use case?
  • When do you need to deliver this use case?

I'm asking you this, because we are currently researching on how to "create group columns" based on a new nightly build of wijmo. If all goes well, we would be able to have this feature delivered in a near future - it's also dependent on the date of GA version of wijmo. This would help you with the feature 1. since you would not need to do as much or many no manual code, and instead would be just a configuration. 

I also noticed that we are not exposing the column picker feature, making it much harder for you to extend the grid behavior by attaching your own code to the event "itemChecked" as described in feature 2.. This is something that can be easily done for our next release.
This is what would enable you to append your client action like this:

GridAPI.GetGridById("YOURGRIDID").features.columnPicker.itemChecked.addHandler(YOURHANDLER);

Hoping to hear from you soon,

Cheers,
RG

P.s. Thank you @Julio Isaias for your suggestion, although doesn't fully solve the problems at hand!

Hi @Ruben Goncalves,

Thank your for your solution.

It seems possible, but might take some time to do this customization. I'll discuss with the client the options but if this grouping feature is confirmed to be released, it makes more sense to wait for it. 

Thanks.

mvp_badge
MVP

Good to hear! :)

I'll ask the team, to keep you updated on the grouping discovery.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.