I am struggling to get all the sections of a List collapsed by default. My goal is to create these sections statically(no nested arrays) and prevent them to display expanded by default.
List()
{
Section(...){}
Section(...){}
}
Found the answer. It's the DisclosureGroup, in case someone needs it.
Related
Currently, I have a list view that allows items within the list view to be dismissable. I want each item within that list view to correspond to an element within another list that contains text. And when that widget in the listview is dismissed, then the corresponding element in the other list also gets deleted. Does anyone know hot
What I suggest is that if there is any common thing in both list that are related to each other such as id or any else say text in your case ,After dismissible widget get triggered iterate via the second list just check if there's any common based on the 1st list item, and delete the item rebuild the state. Maybe adding some code might be better but so far this is the best way you can do. let me know if it work.
I have several ag grids I'm working with that are setup as Master/Detail. I have an external filter setup on the master and that works fine I can extend it to the detail grid but running into a couple issues:
The filter appears to only apply to expanded nodes. Closing and reopening resets the data, though the filter may still have a value.
I haven't figured out a way for the filter to ignore the master if the filter matches detail but not the master.
How I expand the master where the detail matches. I think I will need to use a a timeout so that the grid isn't expanding and collapsing on each key press, but I don't know how to know which grid has matching data.
The code below is what I have so far for just handling the detail grid but this appears to be very slow (plunker: https://next.plnkr.co/edit/S1PNvugCbjPh55jI).
onFilterTextBoxChanged() {
// this.gridApi.setQuickFilter(document.getElementById('filter-text-box').value);
this.gridApi.forEachNode(function(node) {
console.log('node.detailNode', node)
node.gridApi.forEachDetailGridInfo(function(detailGridApi){
console.log('detailGridApi', detailGridApi);
detailGridApi.api.setQuickFilter(document.getElementById('filter-text-box').value);
})
});
}
Just a suggestion, on each keypress event happening on the filter box ->
1) Before calling quickFilter function, Expand all the detail grid using grid event expandOrCollapse because it somehow does the filtering while its in expanded state.
2) Collapse the grid when search filter box is empty and have cross mark to empty it.
Please ignore if it does not suits ur needs. Thanks!
is it possible to configure agGrid grouping so that it behaves like an accordion i.e. only one group can be expanded and when opening new group previously opened is closed?
Not sure if this answers your question, but I am sure this might be the only direction you'll have.
There is a method provided on gridApi - onGroupExpandedOrCollapsed
So I think (again, need to check) that this function would be called as its name suggests, and you can collapse the other rows (whichever is opened) and achieve your functionality.
Be cautious while using this as there is comment given by ag-grid
we don't really want the user calling this if one one rowNode was
expanded, instead they should be calling rowNode.setExpanded(boolean)
- this way we do a 'keepRenderedRows=false' so that the whole grid gets refreshed again - otherwise the row with the rowNodes that were
changed won't get updated, and thus the expand icon in the group cell
won't get 'opened' or 'closed'.
I have been trying to implement a slight change in the behavior of the chosen dropdown search results, but there doesn't seem to be any straightforward way to get at them. I have a list of countries preceded by three-letter ISO country code. I would like to be able to search as usual, but highlight the country if there is an exact match on the country code. The problem is that the matching country code will not always be the first item in the list. A more general request would be able to access the result list, and set the selection to some item other than the first.
By inspection, it looks to me like the search results only exist as a jquery object and within that the list items include a data-option-array-index with the original option list index, so I could find the item that I know I want highlighted in that DOM object and set the class "highlighted". But I also might need to scroll it into view, and messing with the underlying DOM directly is not ideal, so it would really be nice to have access to Chosen functions that would do that.
So, I figured it out, by accessing DOM. I have the index in the initial array that I want to highlight, and the following code will do it, assuming it is in the result list (using lodash _.find):
var highlightChosenResult = function(index) {
var resultList = $('li.active-result');
var result = _.find(resultList, function(el) {
return +$(el).attr('data-option-array-index') === index;
});
if (result) {
this.chosenApi.result_do_highlight($(result));
}
}
Im using Ag-grid to control my table, but i want in my group that stores a list of rows instead of having to make the row group expand in 2 clicks, i want to be on 1 click.
If i click on the icon arrow it works, but if i click on the title row it only opens on 2 clicks.
I already tried to find in the documentation any information about it, but cant find nothing.
Here is a example from the documentation.
https://ag-grid.com/javascript-grid-tree/index.php
example image:
We are now recommended not to use the onGroupExpandedOrCollapsed, so this should now be...
This will also update the icons and animate the rows, which onGroupExpandedOrCollapsed won't.
onRowClicked(params) {
params.node.setExpanded(!params.node.expanded);
}
This will toggle the expansion, use params.node.setExpanded(true) if you want the rows to just stay open.
You can listen to events on either a row or cell clicked, and expand nodes accordingly.
For example to expand a row based on a click you could do the following:
onRowClicked: (params) => {
// update the node to be expanded
params.node.expanded = true;
// tell the grid to redraw based on state of nodes expanded state
gridOptions.api.onGroupExpandedOrCollapsed(params.rowIndex)
}
This should be in the documentation - I'll update it to reflect this information.
In the column definition, you can use the onCellClicked(params) function to tell it to do something when the cell is clicked. I tried looking for an expand function, but I could only find expandAll() which I don't think you will want. So what I would do is just use jquery or simple DOM selection to click on the expand icon inside of that cell.
this one works
onRowClicked(params) {
params.context.setExpand.onExpandClicked(params.rowIndex, params.node.rowHeight);
}