Access to multiple ItemRenderers within an AdvancedDataGrid - itemrenderer

I've create an AdvancedDataGrid where most of the cell are based on an ItemRenderer. The custom ItemRenderer (SoundBox) extends VBox. This custom component allow for simple changes in the background color based on user clicking on a cell.
Here is the snippet of the AdvancedDataGrid (nothing too advanced):
<mx:AdvancedDataGrid id="fsfw" dataProvider="{fsfWordList}" sortableColumns="false" >
<mx:groupedColumns>
<mx:AdvancedDataGridColumn width="35" dataField="wordcount" headerText=" "/>
<mx:AdvancedDataGridColumn id="myWord" width="150" headerText="TEST ITEMS">
<mx:itemRenderer>
<mx:Component>
<components:SoundBox width="100%" letterSound="{data.word}" />
</mx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn width="200" headerText="Correct / 2 points" dataField="sound1">
<mx:itemRenderer>
<mx:Component>
<components:SoundBox width="100%" letterSound="{data.sound1}" pointColumn="2"/>
</mx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
</mx:groupedColumns>
</AdvancedDataGrid>
What I'm trying to do is change the background color of (let's just say I have one row of data) row1, cell1 to green when the user clicks on cell3 of row1.
I'm unsure as to how I get access to those items (ItemRenderer/SoundBox) within the Grid.
Any Ideas? THX!

look at the following code,,, it will return the item rendrer of given row and colomn index.. Extended the Advance dataGrid and define this function in the extended class,to get it worked, then use it like "CustomADG.indicesToItemRenderer(0,0)" and in that reuturend object try to get the reference to soundComponent.
public function indicesToItemRenderer(rowIndex:int, colIndex:int):IListItemRenderer
{
var firstItemIndex:int = verticalScrollPosition - offscreenExtraRowsTop;
if (rowIndex < firstItemIndex ||
rowIndex >= firstItemIndex + listItems.length)
{
return null;
}
return listItems[rowIndex - firstItemIndex][colIndex];
}

Related

didCellParse does not return cell

I'm trying to center a row. My <td> has colspan across the table.
I have a data tag in the <td> because I have dynamic subheaders in the tables. With willDrawCell and didDrawCell I can access the cell.raw property and check the data tag to apply the style.
When I use didCellParse the CellHookData has cell as undefined.
With the willDrawCell and didDrawCell, I can alter the halign property, but it DOES NOT render in the center of the row in pdf.
didParseCell: data => {
if($(data.cell.raw).data('subhead') == true){
data.cell.halign = 'center';
}
}
With didParseCell I receive an error, because cell is undefined.
https://codepen.io/lightningmd/pen/gOOaezM
This code pen is using willDrawCell. You can see the subheader is found, and the cell.styles.halign is applied. Just change to didParseCell for the error.
You need to set the styles on the cell styles object, not the cell: data.cell.styles.halign = 'center'.
Seems there also is a bug where didParseCell is called with a null value for data.cell when there are colspans/rowspans. All in all, this should work:
didParseCell: data => {
if (data.cell && $(data.cell.raw).data('subhead') == true) {
console.log('Subheader Found;')
data.cell.styles.halign = 'center';
}
}

Dynamically updating the title component for a Material UI Tooltip

I am using a React Material UI Tooltip component. Specifically :
render() {
const {comment} = this.props;
...
<Tooltip title={this.handleFlaggedComment(comment)}>
<IconButton className={classes.tooltipIconButton} aria-label="Reported" href="">
<ReportedIcon className={classes.reportedIcon} />
</IconButton>
</Tooltip>
...
}
The handleFlaggedComment is implemented as :
handleFlaggedComment = (comment) => {
return (
<Fragment>
<div>
REPORTED COUNT : {comment.reportedCount}
</div>
</Fragment>
)
}
Lets also assume there is a mapStateToProps which is implemented as :
mapStateToProps(state) {
return {
comment: state.commentsList.currentComment
}
}
When the reportedCount goes from 1 to say 3, and I hover over the icon to show the tooltip, I would expect it to show 3 as the reportedCount. However it only shows 1 , which was the initial value
Is there a way to make the tooltip title update and show the updated comment, specifically the correct reportedCount ?
let us also assume that some UI action is triggering the reportedCount to increase. An example, is clicking on an icon that increments the reportedCount by 1 and it is updating state in redux for 'currentComment'

Highlight row in ag grid on button click

I have a button outside the grid, on clicking of this button i am iterating the row nodes and doing a check whether the data is empty or not. If it is empty i want to highlight that row. Did not found anything which can give me any option to highlight the row in ag grid on button click.
Kindly help
I found the answer for above:
In Component: may be in constructor
this.rowClassRules = {
'invalid-row': (params) => {
if (this.inValidRowNode && this.inValidRowNode.data.name === params.data.name) {
return true;
}
}
};
On button click (in validation method), while iterating the node we need to set the data. I am setting in this way.
node.setDataValue('name', ' ');
In Html:
<ag-grid-angular #agGrid rowSelection="multiple" [gridOptions]="gridOptions" [columnDefs]="gridColumnDefs" (gridReady)="onGridReady($event)"
[rowClassRules]="rowClassRules">

ui-grid - How to pin a ROW to the top

I'm using the angularjs ui-grid and I have a "total" row that I want to pin to the top of the grid no matter what is the current sorting.
How can I accomplish that?
I think this is what you are looking for : Row Pinning
Essentially add another hidden column, something like this:
{
field: 'pinned',
visible: false,
sort: {direction: uiGridConstants.ASC, priority: 0}, //use uiGridConstants.DESC for pinning to the bottom
suppressRemoveSort: true,
sortDirectionCycle: [uiGridConstants.ASC] //use uiGridConstants.DESC for pinning to the bottom
}
Row entities which have pinned = true rise to the top, even when other sorting are applied.
DISCLAIMER: I know it's not exactly answers the question, but this is how I solved it for now until I'll have a better solution:
Create an other grid above the main grid :
<div style="height:30px" ui-grid="totalGridOptions"></div>
<div ui-grid="gridOptions" class="grid"></div>
with definitions:
$scope.totalGridOptions = {showHeader:false,enableHorizontalScrollbar:false};
and then bind the columns of the main grid to the total grid (for width and other adjustments):
$scope.$watch('gridOptions', function (newVal) {
$scope.totalGridOptions.columnDefs = newVal.columnDefs;
}, true);
I think you should use something like this
$scope.gridOptions.data.unshift({label:value});
unshift adds it to the top
Edit 2 / Actual Solution: The way I finally settled this issue was by using custom header cell templates. I essentially create a second header row by adding a div at the bottom of what was previously my header. Here's a simple version:
<div class="super-special-header>
<div class="header-display-name">{{col.displayName}}</div>
<div class="totals-row">{{grid.appScope.totals[col.field]}}</div>
</div>
I store my totals on the controller's $scope and can access them in that div with grid.appScope.totals[whateverThisColumnIs]. This way I can still update them dynamically, but they don't get mixed into a sort function like my previous 'solution' was aiming for.
Edit 1 / Dead-end 'solution': Just ran into a problem with my solution, if your table is long (you have to scroll to get to bottom rows), the totals row will scroll out of view. Going to leave this 'solution' here so no one else makes the same mistake!
I had this same issue but with a twist. Since I was going to need to change the default sorting algorithms for many of the columns anyway, I set my algorithm up to skip the first element in the sort. You can use the sortingAlgorithm property on any columndef that would be part of a sortable column. This is really only a solution if you have only a few sortable columns though. It becomes unmaintainable for huge tables.
I couldn't find any built-in feature for ui-grid to keep a specific row at the top of the grid when sorting is applied. But this could be done using sortingAlgorithm parameter in the columnDefs( please refer to http://ui-grid.info/docs/#!/tutorial/Tutorial:%20102%20Sorting).
I have written an algorithm which keeps the row('total' is the particular cell value in the row) at the top of the grid without applying a sorting.
var sortingAlgorithm = function (a, b, rowA, rowB, direction) {
if (direction == 'total') {
if (a == 'total') {
return 0;
}
return (a < b) ? -1 : 1;
} else {
if (a == 'total') {
return 0;
}
if (b == 'total') {
return 1;
}
}
}

Vaadin Listbox Option Tooltip

Is it possible to add the title(tooltip) attribute to a listbox ot twincolselect in Vaadin?
I've tried to use setItemCaptionPropertyId() along with setItemCaptionMode() but in vain.
At the end when Vaadin renders the page, the resultant html has only the value attribute to the select component and no title attribute is present.
Update - my question should have been re-phrased to say - I need tooltip on each individual item (individual row) within a listbox or twinselect.
Here is an example for Nativeselect component
// Create the selection component
final NativeSelect mynativeselect= new NativeSelect("myLabel");
// Add some items
for (int i = 0; i < 25; ++i) {
mynativeselect.addItem(i);
}
//set tooltip
mynativeselect.setDescription("My tooltip");

Resources