I have an ag-grid (free reactjs version) with lots of columns and records to load.
Some columns are not necessary, so the user can drag the columns out of the grid (and hence hide them). This is fine but how can the user show the hidden columns again without refreshing the page?
I don't want to suppress column drag, just a way to undo the hide without refreshing.
Any advice?
Shameless plug: The enterprise version has this feature in two places, Tool Panel and Column Menu.
However, thankfully it is rather easy to implement this feature yourself using a single columnApi call, well... one of these:
resetColumnState()
This will reset the state of the columns to what you initially defined them as. It will basically make everything visible again
setColumnVisible(colKey, visible)
Just pass in the colId of the column (usually what you passed in as 'field'... but it could be different depending on your set up) and a truthy or falsey value and this will show/hide the column
setColumnsVisible(<Array> colKeys, visible)
note the s - other than that it is the same as before, but you provide an array of colKeys that you want to all be hidden or shown. If you wanted to provide an array of all your columns with another array of whether they should be shown or not then use the last option here setColumnState
setColumnState(<Array> columnState)
This is probably overkill for what you are trying to do, but this will allow you to set the state of all the columns, whether they are visible or not, pinned to different sides, fixing the widths, etc.
Basically I can see you doing one of two things:
Create a button that will make all the columns visible and call gridOptions.columnApi.resetColumnState() when it is clicked
-- OR --
Create a list of check boxes that will listen for a change and call one of the other functions. This list could be outside of your grid, or even inside of your grid in a Custom Filter Component (find the athlete column of the first example to see what I mean.)
Related
So I have been struggling with a problem involving a ui-grid that I have implemented. We have a complicated search for a table where a user can search for IDs for employees and they can also search IDs for companies. There are textboxes corresponding to employee/company ID so the user knows where to start typing. Right now, I am conditionally swapping the column visibility based on where the user begins typing (employee ID hides company columns as an example). However, I need a way to also hide the company/employee rows because the columns are showing empty values and are displaying when the user has nothing in the search box.
Research: I am toggling the columns based on an answer I found where I am just changing column visibility, but it seems there is no row visibility option. However, the only row hiding functionality seems to be checking against a static value and in this case it needs to be dynamic.
I am considering just using two different grids and toggling visibility based on the search boxes typed in, but I was trying to see if I could use just one grid.
Any help would definitely be appreciated.
I am working on ADF application.
I have table and I need to insert data into it cell by cell and column by column in order.
For example:
on start, all cells should be disables except only one cell (the first cell at YearworkDegree column)
if user entered value for that cell it should open below cell.. etc
after finishing YearWorkDegree column it should open first cell from the second column MidtermDegree and so on.
Is there a feature in ADF I can use in that case, or should I think in JavaScript to handle that case.
You can set the properties of one field to be dependent on the other and set partial page refresh between the two - so when you change the value in the first - the second on becomes enabled.
That being said - doing this is going to cause a lot of chattiness to the backend server (on each field change).
So you basically need something like tab navigation between cells but in a different order (downwards). There is no integrated functionality for this in ADF, you have to do it by yourself by writing a custom JS handler.
Please check this example
You can then modify it for your needs (making only the current cell enabled for editing, etc).
I have a weird problem whereby a <select> control stops showing its drop down list in IE11 using AngularJS after changing the value (twice).
Chrome (42) and FF (37) do not exhibit the issue.
Plunker: http://plnkr.co/edit/Ea0nMnPxXdqm8O59NyZS?p=preview
Fiddle: http://jsfiddle.net/xydvqo0q/
Steps:
Click the select to open its drop down list.
Select either of the two listed options. (It closes and a couple of other fields in the page update their values.)
Click to open again.
Select the other option. (It closes and the fields update again.)
Click to open the drop down list again. Will no longer open
Neither mouse click, nor Alt-downarrow will show the drop down once it gets into this state.
(Further, other selects on the same page also stop showing their drop down lists, and there appears to be a general control/windowing issue for the page - e.g. you can't select HTML text, and other controls won't show the focus or caret. Seems like IE loses the plot about which is the active "window" and it seems to be stuck inside the select. Pressing Tab a few times gets it out of this stuck state.)
Now, an IE control/windowing bug isn't unusual. But this is weird because of the specific set of requirements to reproduce. I've stripped back the example to what seems to be the minimum required to reproduce (yet you might think there's heaps of stuff in the page that should be irrelevant - afraid not).
The page needs the following for the issue to show:
The nested table (which lists "hello"s) must be there (and it must be nested - if it's not inside another table then the problem goes away). (I made it list hellos to eliminate it listing scope data to eliminate that as a cause.)
The table row which contains {{selecteditem.number}} must be there, and must be AFTER the nested table (moving it before removes the issue). I moved it to a separate table and the problem remains.
The selecteditem.number data must be different for the two items. If the "number" values are the same for the two items, it will not show the issue.
The number of "sub items" for each of the two items must be the SAME (meaning the nested table ends up with the same number of rows). If you add another sub-item to one of the items, the problem is fixed. If you add a sub-item to both (so they both have two) then the problem returns.
(Are you thinking I'm crazy yet? I thought I was. But wait there's more...)
The nested table must have the CSS property border-collapse: collapse. Without this property, or with a different value for this property, the issue doesn't occur. Note: the table can inherit this property from the parent table, or from a table CSS rule, or from a class (as the demo shows) and the issue still occurs. Removing it "live" using IE's F12 dev console and the issue gets fixed.
The TDs of the nested table - i.e. the "hellos" - must have a CSS border. They can inherit this, or obtain it from the class (as per the demo).
Basically, I have to tell the client they can have a collapsed-bordered table to show sub-items in the table of fields (there are usually many more than in the demo) or have a drop down list, but not both. (Or don't use IE, which isn't an option, or change the order of you form, which then would make no sense to the users.)
I tried not using ng-options (and instead ng-repeat-ing an option) but I get the same result (I'm limited to 2 links so here's the plnkr ID: 95XcM9j2eY70jUK10UrH).
I may dump the select entirely.
I have a very large grid with many columns. When the user clicks on the button, it calls a function which analyzes the whole store - cell by cell, if it finds no changes in a particular column, it hides it, othewise the column stays visible. Very often quite a large number of columns get hidden, but as I can see, this operation - column hiding with all this rendering - is very "heavy", so that my browser may alert, that the code runs for too long.
I do hiding like this:
var cols=grid.headerCt.getGridColumns();
Ext.each(cols, function (item, index, all){
if(condition) item.setVisible(false);
});
I tried to use Ext.suspendLayouts() and Ext.resumeLayouts(), but it leads to a bug. Even though operation now runs faster, instead of column hiding only columns' titles get hidden. So, I need a more optimal and working solution.
suspendLayouts() and subsequent resumeLayouts() is one of the ways to go. You only need to call grid.getView().refresh() after you resume the layouts.
Another option would be to call reconfigure, however, this removes the "hidden" columns from the columns menu.
Another question for you Filemaker Pro experts. The database I am developing starts with a Main layout with a number of buttons (e.g. insert new item, show all items, etc.). Each button is associated to a script, which takes the user to the relevant layout. In each of these layouts I show the buttons in a row, and highlight the current layout with inverse colour.
My problem is that some of the buttons lead to the same layout, viewed in different modes, and I don't know how to conditionally highlight the right button.
For instance, Insert new item and Show all items take to the same layout, however in the first case the script views the layout as a form and inserts a new record, while in the second I view as a list and show all records. The layout is the same, though, so I'd need to enact a conditional formatting based on something. How do I do that, and what should I check against?
Thanks in advance for any help.
Regards.
Presumably you are currently using the formula: Get (LayoutName) to decide on your conditional formula, why not try additionally using formulas: Get(WindowMode) and Get(LayoutViewState)?
You could conditionally format the button if (which sends user to MyLayout in browse mode):
Get(WindowMode)=0 and Get(LayoutName)="MyLayout"
Or (which sends user to MyLayout in form view):
Get(LayoutViewState)=0 and Get(LayoutName)="MyLayout"
.
Other functions which may help could be Get(FoundCount) and Get(TotalRecordCount). You can see the entire list of Get functions here.