I got two questions about ShieldUI grid component.
Q1. when editing is enabled, you need to click cell to toggle edit/display mode. Is it possible to make it always showing editor component?
Q2. When I attach ShieldUI components like numeric text box or date picker to ColumnTemplate, no matter how I change the value in custom UI component. It doesn't sync the value showing in the component back to data source in the Grid. Do you know the solution for my above issues?
Thanks.
Related
My react-materialUI app has multiple dialogs, and some of these dialogs are containing the same mui data grid (a list of projects).
Example: a save project dialog. This dialog contains this mui data grid and a mui text field, both as child components.
By clicking on a row in the data grid, I want to set the content of the text field to the value of the selected row.
To accomplish this, I could lift up the value state of the text field and the selectedRow state of the data grid to the save dialog.
somehow I find it hard to understand that a supposedly reusable component isn’t handling their state by itself.
Is lifting states up really the best practice or is there something basic I overlooked?
If some behavior in the data grid should affect the value of the text field, you probably need to lift the state for that text value.
But you might not need to lift the state for the data grid. Instead, you could pass an onSelect prop which you use to set the text value, something like:
<DataGrid onSelect={(project) => setText(project.name)} />
Further reading
The beta React docs have great content on such topics, e.g. https://beta.reactjs.org/learn/thinking-in-react#step-4-identify-where-your-state-should-live
I am using PrimeReact Data table which works perfectly fine when I use built-in edit button for inline row editing. But I would like to customize the editor buttons e.g. I would like to display edit and delete button in same column which is currently not supported out of box, therefore I need to customize the row-editor column.
I would like to perform an editing action as PrimeReact is doing here https://www.primefaces.org/primereact/datatable/edit/ but from my custom component e.g. button I am not able to do that. The issue I am having is when I capture the click event on my custom component I am not able to get grid's data or any react state variable within that event handler, hence not able to perform editing.
Anyone know how to do that?
Please do not share CRUD example from PrimeReact because I do not want to use dialog I want inline row editing on the table.
I have a custom filter component I'm giving Ag grid for each column. The component contains a dropdown. When user selects an option from dropdown, the filter closes immediately on selection rather than staying open like it should.
How can I keep the filter component to stay open on selection of option from dropdown?
Reading the docs more, I found the answer here:
https://www.ag-grid.com/javascript-data-grid/component-filter/#custom-filters-containing-a-popup-element
Custom Filters Containing a Popup Element
Sometimes you will need to create custom components for your filters that also contain popup elements. This is the case for Date Filter as it pops up a Date Picker. If the library you use anchors the popup element outside of the parent filter, then when you click on it the grid will think you clicked outside of the filter and hence close the column menu.
There are two ways you can get fix this problem:
Add a mouse click listener to your floating element and set it to
preventDefault(). This way, the click event will not bubble up to the
grid. This is the best solution, but you can only do this if you are
writing the component yourself.
Add the ag-custom-component-popup CSS
class to your floating element. An example of this usage can be found
here: Custom Date Component
I want to basically know if I am having rows selected to activate an input, the thing is
"selectionChange" event is not capturing when the selection is being changed I have a small example.
https://codesandbox.io/s/ag-grid-react-redux-events-forked-459v6?file=/index.js
What id expect to happen is to get the alert to show when something is selected on this example.
Turns out in React this property is onSelectionChange, following react pattern
I am trying to create a very simple input screen containing inputs, labels and a picker.
The app that I am trying to build contain a picker, two numeric inputs and two labels (existing side by side along with the input elements) as shown below
When the user makes a selection in the picker (can choose either "Metric" or "Imperial"), the labels (B1 & B2) beside the inputs should also change accordingly as {B1: "Kg", B2: "Cm"} or {B1: "Inches", B2: "Lbs"}
What are some design pattern/strategies to achieve this ?.
Looks like a simple problem but I have run out of ideas as to how change the label based on the selection of picker.
I have thought of creating two different Modals M1 and M2 with visibility toggling but I am not sure that the solution is elegant :(
Would appreciate any tips or guidelines as to how this problem (changing a label based on picker selection) is solved.
I strongly advise you to try creating code yourself first by following the react documentation.
These are some steps to help you get started:
Set an event handler on the picker.
In this handler you set the state to be either metric or imperial.
After that you can render based on state values.
A change in state will re-render components so the label will change automatically.