AG GRID - Make a filter based on 1st checkbox selection column - ag-grid

I'm trying to create a filter based on whether columns are selected or not. The selection is made by the first column which is created with:
headerName: '(Checks)',
headerCheckboxSelection: true,
checkboxSelection: true,
headerCheckboxSelectionFilteredOnly:true,
filter:'agSetColumnFilter',
minWidth: 50,
maxWidth: 50,
width: 50,
flex: 0,
resizable: false,
editable: false,
suppressCellFlash: true,
Note: There is no Field associated. I use this column to select/deselect the rows only
Ag Grid Filter Side Panel
When I go to the Side Bar Filter I see no values. I know how to make it display values adding:
filterParams:{
refreshValuesOnOpen: true,
suppressSorting:true,
values: ['Selected','Unselected'],
},
valueFormatter: (p)=>{
var x=(p.node.selected==true) ? 'Selected': 'Unselected';
},
But even if I do that sill cannot make it filter for Selected/Unselected rows.
Any help will be welcome!

My mistake! I should have used
filterValueGetter: (p)=>{
return (p.node.selected==true) ? 'Marcado': 'Sin marcar';
},
Now is working!

Related

sap.ui.table.Table scrollbar does not reach bottom

I've been working with sap.ui.table.Table for a while now but the scrollbar never reached the bottom. Fortunately I can see the last rows but it's still weird to not work as the samples...
Tried to study the samples which do not have the same problem and also the doc but nothing...
I do not have weird css on my table or components which shouldn't be used (table in the picture).
Version I'm using is 1.97
Sorry for the picture in the link but I'm still not allowed to insert it directly.
var table = new sap.ui.table.Table({
extension: new sap.m.Toolbar({
content:[
new sap.m.Button({
icon: "sap-icon://add",
text: "New"
}),
new sap.m.Button({
icon: "sap-icon://delete",
text: "Delete"
})
],
}),
footer: new sap.m.Toolbar({
design: sap.m.ToolbarDesign.Solid,
content: [
new sap.m.ToolbarSpacer(),
new sap.m.Text({
text:"entries"
})
]
}),
rows: {
path: "oModel>/users/result"
},
selectionMode: sap.ui.table.SelectionMode.Single,
visibleRowCount: 8,
visibleRowCountMode: "Fixed",
//rowHeight: 20})
table
Have you checked the guidelines? https://experience.sap.com/fiori-design-web/grid-table/#behavior-and-interaction
To prevent adverse side effects when scrolling vertically, all line items must have the same height (sap.ui.table.Table, property: rowHeight).
So maybe your rows don't match the rowHeight property. You can try to adjust it.
Also please make sure to only use supported controls inside the cells as listed here https://experience.sap.com/fiori-design-web/grid-table/#Table%28ALV%29-CellContent

How to show multiple GetX snackbars at once

I want to popup multiple snackbars like they are on top of eachother.
Is there a way to do that ?
Get.snackbar(
"test",
"test",
backgroundColor: secondaryColor,
maxWidth: 350,
margin: EdgeInsets.only(left: Get.height * 0.95),
isDismissible: false,
)
You can not show popup as stack.. with Get.snackbar because the Concept of Get is a Context less Widget tree. and for dialogue popup with Get each dialogue is created separated and show one and after such as ques FIFO.. for that approaches you need to think out side the Get then you will get your desire result
Happy Coding.... :)

how to remove horizontal line from barchart

How to solve this problem,
use FL-CHART package
You can remove the horizontal lines by setting drawHorizontalLine property to false
Example,
BarChart(BarChartData(gridData: FlGridData(
show: true,
drawVerticalLine: false,
drawHorizontalLine: false,// this one
)));
You can change the width to zero (0) of that lines.
Example: majorGridLines: MajorGridLines(width: 0),

AG Grid clip long text in cell and show all on click

I have a tall row like this
and I managed to display It like this
I also want to display it like on the first picture after the dots click.
To achieve it I made a custom cell renderer it's changing the inner HTML content of a cell. And my problem is that after change content to long row has the same height so I cant see full text.
Is there any method to rerender rows or the whole table.
you need to set these two property on the column which is getting expanded.
wrapText: true,
autoHeight: true,
if this behavior is needed on all column or you are not sure better define these under
defaultColDef: {
....
flex: 1,
minWidth: 110,
editable: true,
resizable: true,
wrapText: true,
autoHeight: true,
...
},
then call resetRowHeights(); on cellValueChanged event.
onCellValueChanged : function(params){ params.api.resetRowHeights();}

changing the background color of sencha touch panel

I am trying to change background color of panel.
Please see the code:
panel: {
centered: true,
width: 200,
height: 150,
style: 'background-color: red',
fullscreen: false,
hidden: true,
zIndex: 10,
}
but style: 'background-color: red' statement doesn't fulfill my requirements. it changes the color of panel border only not complete panel background color.
please suggest for the same.
thanks!
This works for me in 2.0.0:
Ext.application({
launch : function() {
Ext.Viewport.add([{
xtype: 'panel',
style: 'background-color:#F00'
}]);
}
});
This link: http://www.sencha.com/forum/archive/index.php/t-108823.html
Suggests that background-color is its own entity. I've never actually used Sencha, but a group I was working with considered using it once... e.g.
panel: {
centered: true,
width: 200,
height: 150,
background-color: red,
fullscreen: false,
hidden: true,
zIndex: 10,
}
also, I don't know if that's for an older version you're not using.