Support DataTable Row Selection Events in Pluggable Views
Supporting the DataTable rowselect event in a pluggable view is a good practice for several reasons:
It allows pluggable views to participate in synchronization of row selections across multiple views. This feature allows views within one basic app to all react appropriately when users select an element in one view. Most
MashZone NextGen built-in views already support synchronization.
The
rowselect event is always visible to users when wiring interactions in
Mashboard. With view-specific events, users may need to perform click events to make them visible for wiring.
View-specific events publish only the data that is included for the view. The
rowselect event instead includes data for the entire row. Having all data available is highly useful when wiring apps in workspaces using
Mashboard to provide better options for mapping events in different apps.
Notify the DataTable of rowselect Events
Pluggable views can have their DataTable fire rowselect events when users click elements within the view using the rowClick(rowIndex) method in the MashZone NextGenDataTable API. The rowIndex parameter identifies which row in the DataTable has been selected by the user.
The DataTable uses this information to update selection state information for both the newly selected row and for the previously selected row, if any. It then fires one or two rowselect events:
If | Fire |
No row was previously selected | Rowselect for the new selected row with selected = true. |
A row was previously selected and the new row is a different row. | Rowselect for the previously selected row with selected = false. Rowselect for the new selected row with selected = true. |
A row was previously selected and the new row is that same row. | Rowselect for the previously selected row with selected = false. |
Each rowselect event includes the index for the row, the selected state (true or false) for this row and an object with the data for this entire row.
This example extends the click event handler method for each slice of the custom D3 Pie view shown in
Triggering an Event. It makes use of a feature in D3 that provides the index number to the data for any element that is clicked. Using this index, the handler simply calls
rowClick:
...
onClick = function(event, index){
//update datatable for rowselect
dataTable.rowClick(index);
//trigger view-specific event
var eventData = {};
eventData[props.label] = d3.select(this).attr("name");
eventData[props.series] = event.value;
Presto.view.trigger(el, 'click', eventData);
return false;
},
...
In many cases, the click handler would also update the user interface to indicate that selection had occurred. To accurately do this, the handler needs to know the previous selection state for each slice.
Since the DataTable tracks the selection status and also fires rowselect events that fully update this status for all rows involved, this example delegates the process of updating the user interface to the handler for rowselect.
Listen for rowselect Events from the DataTable
Pluggable views can also listen for rowselect events from the DataTable to account for user selections made in other views using this DataTable. To do this, the view must implement a handler for the event and then call the addListener(event-name,handler,scope) method for the DataTable.
This example adds the onRowSelect(rowIndex,selected,rowData) method as the handler that updates the user interface of the view each time a rowselect event is fired by the DataTable. The parameters for onRowSelect are the properties of the rowselect event: the row index, its selected state and the data for the row.
Since user clicks within the view can also trigger
rowselect events in the DataTable, this method handles both clicks within the view or clicks from other views using this DataTable. See
Notify the DataTable of rowselect Events for more information on the
rowselect events the DataTable may fire.
...
//determines selected or deselected color for slice and applies
//based on selected state from datatable rowselect event
onRowSelect = function(index, selected, row) {
var c = color(index);
if(selected){
c = d3.rgb(c).brighter();
}
d3.select(arcs[0][index]).select('path').attr('fill', c);
},
...
//add datatable listener for rowselect event
dataTable.addListener('rowselect',onRowSelect,self);
...
In this example, the handler updates the color of the slice to a brighter shade if the row is now selected or returns the color for the slice to its original shade if the row is deselected.
Once the handler exists, the view calls addListener, to register the handler with the DataTable.