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.
Related
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.
I am using material-UI autocomplete for a project that involves rendering a dynamic array based on what you select from the menu. I am finished with the project and now trying to implement multi-select to make choosing things from the menu easier. When you have everything you want from the menu, you click an "Add" button that takes everything you currently have selected and adds it to a table (and adds the properly formatted text into a query on the side, the goal is to build queries for users without them worrying about syntax). When I was not using multiselect, and only adding one thing at a time to the query, I was easily able to clear the autocomplete field by changing the value prop to null. This prevents users from adding the same fields to the query over and over (when add is clicked the options that were added are popped from the list of options). When using multi the rules seem to change and now changing value directly causes an error. My question is, does anyone know of a way to programattically click the x button built in to material-ui autocomplete fields to clear that text field in an event handler? Or is there any reliable way of clearing that on my end?
I am having a issue when using a cell editing grid that has a field that opens a window. The issue is when you open the editor for the field and click on one of the combobox triggers, a window opens, which causes the field to fire validateedit, resulting in the editor closing. I am looking for a way to prevent this. The reason that I am opening a window is that I am giving the user the ability to quickly add a new record to the combobox, without having to go to another place in the system. I am able to get this functionality to work with row editing but my customer does not like they way row editing works.
Here is my fiddle example.
I need to implement grid like control that utilizes some complex custom widgets for viewing and displaying rows. Just like this one:
The key point here is that controls in the right column depend on the value selected in the combobox from the left column.
Does anyone know what is the best way to implement it using ExtJS 5.0 components? Should I create my own widgets to display row data that will serve as both custom renderers and editors?
I would use a beforeedit function which changes the editor of the right column (setEditor) to the required widget type depending on what is set in the left column. If you use Editing (RowEdit) plugin instead of CellEditing, you would also have to setEditor in the left column's change or select event.
This is the easiest way, but it won't show all editors at once, of course.
To have all editors displayed at once, I would make a new field containing multiple fields. You can add multiple instances of these fields to a fieldset, container, panel or form at runtime.
I'm using a property grid with editors set in sourceConfig. I want only some rows to be editable and not all. Returning false in beforeedit disables all. The reason is, I have a button in a grid. When I click the button, the grid turns to a textfield! Any way to do this?
The beforeedit event should provide you with the editor and the editing context. Lets say your callback function looks like this:
function(editor,context) { ... }
Using the context you will get the record which get edited by accessing context.record while the editor can provide you with the editor form from where you have access to all rendered fields within that form. To get the form you have to get the editor first and after that you can fetch the form
var form = editor.getEditor().getForm()
This way you can be sure that the editor has been set up. To get a field within that form simply call
form.findField('fieldname') // fieldname is the dataIndex of the column
You can now do nearly anything based on your conditions.
In addition the record is also loaded into this form an can be accessed by calling form.getRecord()