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();}
Related
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!
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
my problem:
The suggestionbox doesn't hide, except i choose one suggestion. hideSuggestionsOnKeyboardHide changes absolutely nothing...
I saw that others solved this problem with another package named keyboardvisibility.
But for me this is not a solution, beause i don't want the suggestionbox to disappear as soon as the keyboard disappears, I want the suggestionbox to disappear as soon as I tap somewhere outside the suggestionbox. Hope someone can help.
Here my code if it helps:
TypeAheadField(
hideOnEmpty: true,
hideOnError: true,
suggestionsBoxController: _suggestionsBoxController,
textFieldConfiguration: TextFieldConfiguration(
controller: typeAheadControllerA,
decoration: const InputDecoration(
hintText: 'Artikelnummer',
icon: const Icon(
Icons.business_center,
color: Colors.grey,
))),
suggestionsCallback: (pattern) {
return autoA
.where((autoA) =>
autoA.toLowerCase().contains(pattern.toLowerCase()))
.toList();
},
itemBuilder: (context, suggestion) {
return ListTile(
title: Text(suggestion),
);
},
transitionBuilder: (context, suggestionsBox, controller) {
return suggestionsBox;
},
onSuggestionSelected: (suggestion) {
typeAheadControllerA.text = suggestion;
},
)
Another minor problem/question:
How can i change the width of the suggestionbox / adapt to the width of the input field?
When I set the icon, logically the width of the input field decreased but the width of the suggestion box did not adapt to the width of the input field. I tried with suggestionsBoxDecoration offsetX. With offsetX I can move the box to the right, but the box keeps its width and therefore goes too far to the right but then i tried with wrapping the typeaheadfield in a padding widget or sizedbox but nothing works. If nobody knows how to solve this, I will probably remove the icons...
Thanks for help :)
You just use the keyboard "done" on iOS physical devices (I haven't tested it on Android yet - assuming there is something similar?), or click another field if there is one. The iOS simulator just doesn't bring up the keyboard when typing so it annoyingly seems like it can't be hidden without selecting a suggestion.
Tapping outside the field but not on another field doesn't unfocus normal TextFields either.
Use this metod: hideSuggestionsOnKeyboardHide: true,
You should wrap your scaffold with GestureDetector and with the property onTap() you call _suggestionBoxController.close();. Another thing if it does not work for you maybe you have a lot of code that is executed in one single file a simple refactoring can be your solution and set hideSuggestionsOnKeyboardHide : true (it was my case). For the width of the box suggestionBoxController.resize()
I want to show a bottom sheet after the user tap on the FAB button. At first, it was working properly but I didn't know why it suddenly started to appear in full height/expanded state mode all the time.
I've tried with all type of bottom sheet listed in the document. It has the same problem.
// _scaffoldKey.currentState
// .showBottomSheet((context) => AccountView());
showModalBottomSheet(
context: context, builder: (context) => AccountView());
In the AccountView is a ListView, Currently, there's only one item. The bottom sheet height should only be equaled to the height of the ListTile. But it appears in full height instead.
You can use shrinkWrap: true, property in ListView or you can put AccountView() in a container and give it height.
Turn out I need to set shrinkWrap in the column to true.
Column(
shrinkWrap: true,
...
)
I used https://github.com/google/charts inside my flutter app. It works great. But when i zoom on chart, the zoom happens but in the wrong place! It starts expanding keeping the left static. The effect is the chart slide under your finger zooming not in the point you are zooming to. Is there a way to zoom like you zoom on a picture on gallery?
code of my chart
Widget build(BuildContext context) {
return new charts.LineChart(
_chartSeriesFromChartData(seriesList),
animate: false,
defaultRenderer: charts.LineRendererConfig(includeArea: true, includePoints: true),
primaryMeasureAxis: charts.NumericAxisSpec(tickProviderSpec: charts.BasicNumericTickProviderSpec(desiredTickCount: 8)),
behaviors: [ZoomBehaviour()],
)
You can use code like this in your code:
behaviors: [new charts.PanAndZoomBehavior()],
or if you want selection by item in our charts you can use:
behaviors: [new charts.SeriesLegend()],
and if you want use two of them maybe you can use:
behaviors: [new charts.SeriesLegend(), new charts.PanAndZoomBehavior()],