Question 1: I have a list view with a column for "Active":
I want to allow the user to select Active/Inactive from a radio button group as a filter (or dropdown). I know react-admin provides filters for reference fields out of the box. What about a non-reference field, like "Active"?
Question 2: Any way to add a clear button or "X" by the search field to quickly clear all filters? Currently, you have to select what's in Search and clear the text. Annoying having to use the mouse AND keyboard to clear filters. But, I'm guessing there's a way around it.
Thanks.
I want to allow the user to select Active/Inactive from a radio button
group as a filter (or dropdown). I know react-admin provides filters
for reference fields out of the box. What about a non-reference field,
like "Active"?
There is BooleanInput and NullableBooleanInput. Documentation is quite well written and there are lots of Input components to use.
Question 2: Any way to add a clear button or "X" by the search field
to quickly clear all filters? Currently, you have to select what's in
Search and clear the text. Annoying having to use the mouse AND
keyboard to clear filters. But, I'm guessing there's a way around it.
if you are using TextInput for search field there is prop resettable
With those two things combined you should have more or less similar code in filter component:
<Filter {...props}>
<TextInput label="Search" source="q" alwaysOn resettable />
<NullableBooleanInput label="Is Active" source="active" alwaysOn/>
</Filter>
Related
What I'm trying to achieve with MUI's React-Autocomplete is what would probably be a typical use case, yet, I can't find any example that illustrates what I'm trying to achieve. And the documentation is lacking IMO.
So, I have this autocomplete component with a list of options (listOfOptions).
As the user types, in the input box, I would like to auto filter the list of options that appear on the dashboard, below that autocomplete input.
Say, the listOfOptions is a list of countries. And the dashboard shows the list of countries with their associated flags.
The user starts to type "R". The autocomplete will obviously filter out countries that do not start with R. What I want is that the dashboard now also filters in countries starting with R. It should show : Russia, Romania, etc...
I have played, in vain, with all props (onInputChange, onChange, onChange inside of renderInput, etc...). Applying a filter to my listOfOptions, in whichever of these mentioned change handlers doesn't work. It filters but makes me lose the prompt after the first key.
Not sure how to do it. Any hint would be greatly appreciated.
Imagine a page where you are asked to choose your favorite sport.
But the sports are not listed in the drop-down list, but in the form of grids div.
You can choose only one sport. And the choice should be stored in redux-form store.
What components of redux-form can I use?
Maybe there are ready-made solutions?
I guess you can achieve what you're looking for by using a group of checkboxes. Simply style the label attribute with CSS and hide the checkbox.
Using CodenameOne,
I have a Form that the user needs to fill in. All of the components, however, are actually Containers that represent custom functionality. As an example, I would have a TextField alongside a Button on a Container, and I would use that Container as a "Component". This allows me to create more advanced functionality by combining existing Components.
A good example of where this is necessary is that of a custom date entry field existing out of 3 TextFields or a combination of TextFields and ComboBoxes.
I have a "Field" that has functionality for that of a Contact Component.
This all serves as a single "Unit" in order to allow the user to choose a contact or fill in their own. Buttons open Dialog popups, etc.
My problems comes with when the user uses the Android keyboard. Should this Contact Object be the second "Field" and the user presses the 'Next' button on the Android keyboard, the App does not know what field to give focus.
Furthermore, If one of the fields are a ComboBox or a Button and the user presses next to reach that Component, the keyboard doesn't close, and instead removes the 'Next' button, replacing it with a return button or an emoticon selector.
Below is an example situation:
The user would press on the first field, the Keyboard shows up, and when the user presses next, the keyboard's Next button dissapears, as the immediate next field happens to be a Button or ComboBox.
Is there a way to change the focusing index, or omit certain fields form ever gaining focus in this way? I tried making the entire thing a Component but that doesnt allow me to combine other Components. Even if it is possible to make the parent Container a Component, how would I solve this particular issue?
The default behavior is to use the "next focus down" for this functionality so just use setNextFocusDown(nextTextField) on each one of the components. Notice that a ComboBox won't work as expected although you might want to change that to an AutoCompleteTextField which would.
It seems that these two instances duplicate each other: Drop Down Menu and Select Field. Both follow Google Material Design specs for menus. The difference is not that obvious at first sight. Why do they provide two similar components?
Select Field has more features that deal with form fields. onChange events, hintText, floatingLabelText. Drop Down Menus don't have those features.
DropDownMenu is for menus. Imagine a dropdown in the top right with your name 'Green v', you tap it and you see, 'Settings', 'Help', & 'Logout'. Even though it allows you to change the value prop onChange if you want (you could make the menu button say 'Settings v'), that's not what it's supposed to be for. It's actually not intended for use with forms at all, it's just for showing a list of options. Visual: https://material.io/guidelines/components/menus.html#menus-usage
SelectField is for filling in form data, and showing the selected item in the field.
I am building an ExtJS4 Web Application and there's a part where the user is shown a "Search Panel". It's basically a floating panel with textfields and a gridView. The textfields allow the user to put his or her input for first name and last name filters. There's also a combo box that the user can use to filter the search. The results are shown in the gridView. The search functionality works well.
However, when the floating panel is hidden and then shown, the fields are reset and the user would have to enter the input once more.
What I want to happen is for the textfield and combobox values to persist even though the panel is hidden then shown again. I have tried using setVisibility(false) then using setVisibility(true) but that did not work for me.
How can I persist values of fields when their parent view is hidden/shown?
The fields should have retained the value as you are just hiding and showing the search panel. It seems there is a bug in your program, but I cannot ascertain that without seeing some code. Assuming that your search panel includes a close button, I would suggest you to use closeAction: 'hide' on the panel instead of using setVisibility(). Also make sure that you are not creating multiple instances of search panel, use a single object of search panel.
Here is a quick fiddle http://jsfiddle.net/DirtyParadoxx/gL9aekzz/
If you want to use cookies, then as Nikolay Lopin suggested, stateful: true would be a nice way of doing it.