Posted in: SPARK UI Toolkit Controls
Navin AgarwalMarch 14, 2018 at 4:23 am #5041
I have requirement where I want to show the rows in a table grouped by a column. For e.g
Task Status Task Name Allocated To Task Due Date
Task1 User1 31/03/2018
Task2 User2 01/04/2018
Task3 User3 02/04/2018
Task4 User4 04/04/2018
Task5 User5 05/04/2018
Task6 User6 06/04/2018
Task7 User7 08/04/2018
Task8 User8 09/04/2018
Task9 User9 10/04/2018
The rows with task data are selectable & columns are sortable. I don’t see any options in SPARK UI table to achieve this. Would you be able to please advise what is the best approach to implement this using SPARK UI ?
ThanksSPARK SupportMarch 14, 2018 at 3:47 pm #5045
My suggestion would be to use three separate Table controls and filter the data set to display the records containing only the desired status.
However, if you need to display the records grouped by task status in the same Table you can manipulate the data set outside of the Table to reorder the list. Or, you can set the Task Status column to render as Custom and create a custom sort function in the On Cell Render event.
Stephen P.Navin AgarwalMarch 16, 2018 at 5:57 am #5046
I won’t be able to use separate tables as the requirement is not limited to three task category. I used that as an example in my question to explain the requirement. In real use case it’s a dynamic field like customer ID and the numbers of rows could be many.
I have tried re-ordering outside but with additional features like filter, sorting by any columns, selecting rows, visibility etc, it gets very complicated. I won’t be able use much of out-of-box table control in this approach. But if there is no other option then I might have to try that.
Regarding custom cell, are you able to share bit more about this approach or point me to any example ?
Thanks for your suggestion.SPARK SupportMarch 16, 2018 at 9:21 am #5048
The only documentation regarding custom cell is on the Table article and JS Doc:
The Table article uses the example of setting the sort value for complex types in the On Custom Cell event:
- On Custom Cell When there is a new cell (In order for this event to work, the developer needs to create a custom render. This can also be used to set cell.setSortValue(cell.value) for complex types)
The JS Doc demonstrates creating a custom HTML element for the cell:
var div = document.createElement("div"); div.innerHTML = cell.row.data[cell.varName]; return div;
My suggestion would be to set a Column to Render as Custom and put a debugger statement in the On Custom Cell event. Then explore the available properties of the “cell” context variable in the console. Note that you can either return an HTML element as in the JS Doc example, or return “S” for Seamless Coach View, “H” for Simple HTML or “V” for Coach View.
You must be logged in to reply to this topic.