I am quite new to ag-grid.
We are using ag-grid Angular version. All of our cells are editable in grid and there are approx more than 3000 cells.
Having an Angular form for grid and form control for each cell seems to make grid lot slower. specially while generating all form controls on load and before submitting form when all form control's validity is updated.
Has anyone found a better way to perform ag-grid cell validation with Angular?
Thank for any help.
In the ag-Grid documentation, data validation is suggested with a custom Cell Editor. In the cell editor component you can perform data validation on the cell input directly. Perhaps this gives you better performance than the Angular Form control.
See the "Numeric" column example on their website:
https://www.ag-grid.com/example-angular-editor/
Related
I'm struggling to create an editable grid with ag-grid. I've found that using both a renderer and editor where both have useField creates problems when removing rows with react-final-form-array.
Keep in mind that a renderer is the readonly/normal state of the cell while the editor is the edit view; Editor is only rendered while editing.
https://codesandbox.io/s/infallible-violet-joej4?file=/src/App.js
In the example above, you'll see that I've commented out the renderer and validation rules. Commenting out the renderer prevents me from displaying validation errors--on top of this, ag-grid destroys the useField, so my validations are also lost.
Naively, I thought form validation instead of field validation was the way to go, but again, I still require a custom renderer to display validations or metadata.
I then thought of creating a two dimensional array that has all of the useField cells but this causes "Rendered more hooks than during the previous render." errors. I'm not well versed in hooks but I don't see <Field> working either.
Thoughts?
Moved away from updating by cell, and instead updated by grid. This let ag-grid be the source of truth that updates final-form as needed.
I need three icons/buttons in one cell in each row and make it clickable. In other words i will need three icons in each cell in specific column (rest of the column will have data), See attached image for example.
Language using: Angular and ag-grid techniques
See this mockup image for example
You can achieve the above functionality by creating a custom render component. checkout the similar example from AG Grid
Rendering using Angular Components
I am working on Bonita Open source version of 6.4.2 for my project of end of study and I'm facing a big problem to which I'm not finding any coming.
In fact I have a form with an editable Grid widget in which the user enter some data which will be transported to a DB MySQL, at this stage everything works perfectly.
Besides a new constraint occurred to me: I must populate the boxes of the first column with a list of values from my database so that when a user clicks on this boxes the list scrolls and the value will be picked from this list (the same behavior as the Select widget) but inside a table.
Unfortunately, this cannot be achieved with the Editable Grid widget that is provided out of the box (it only allows basic text input).
To implement the kind of UI you described, you have two possible solutions:
Use Bonita BPM Subscription edition's dynamic form feature. This will allow you to create repeatable groups of widgets representing rows of your table. This solution allows to use any types of widgets with data and validators.
Create a HTML widget that contains a JavaScript UI component inside it such as DataTables. This solution is quite flexible but it requires some good/advanced JS coding skills in order to integrate the custom table, link it with the form data and implement validators.
Cheers,
POZ
With a GWT CellTable its possible to add different columns that handle the click event in different ways.
For example lets say we have 3 columns:
an Avatar Image (ImageCell),
a name (TextCell),
checkbox (Checkbox
cell).
Then image adding these events:
When the ImageCell is clicked we can open a popup.
When the checkbox is clicked select the row.
When the name is clicked open the users profile.
With a CellTable it's straight forward to accomplish this.
However what if we wanted a view that doesn't look like a table. The CellTable is tied to a HTML Table for its implementation. Why not allow for a general HTML implementation of the CellTable (behavioral) API.
Using a CellList we can accomplish any view. But the API isn't as sophisticated as the CellTable. It would be cool if we could add something analogs to CellTable 'Columns' to a CellList.
Is there anyway to accomplish this with the current Cell Widgets? I might have over looked something.
Thanks!
I think there are two solutions:
Use a CellTable and style it so that it looks like a CellList. This should be quite straightforward and possible. However you would have to play with the CSS styles a little bit. Best approach would be to use Firebug to change the styles on the fly and see the results instantly
Use a CellList and create a custom cell which renders and handles events for your use case (Avatar, Name and Checkbox). This is more involved but there is a tutorial on the GWT page.
I would probably try to go with solution 2 because it also teaches you how to create custom Cells which might come in handy later on.
Update:
As Thomas suggested in the comments you can use a CompositeCell which wraps 3 different cells. That's probably the easiest way to implement it.
I'm using jqGrid on lot of pages, but on some pages, which are not using jqgrid I want to show Edit like form to maintain look and feel consistency.
This thread talks about something similar but those pages have jqgrid table.
Basically, I'm wondering if its possible to open jqGrid add/edit/view form (without defining full table) using my custom row data? Additionally, since these forms are on new pages, I want to show them as a regular form, not in modal.
Edit:
One possibility I see : I can create a dummy table and hide it and generate form but this would open form in a modal, I guess. Last option could be applying jqGrid css to my forms.
Because the form editing in a part of jqGrid I would recommend you, like you already mention in your question, to create a hidden jqGrid to use form editGridRow method. The data of the grid can be filled with respect of data parameter and the grid should has datatype:'local'. At least the structures like colModel, colNames and so on. To be more sure that your code will continue work in the next version of jqGrid creating a hidden grid is better as creating some dummy structures.
So the main question is "How to create add/edit/view form which are not modal?". To do this you can use the following Add/Edit/View options
jqModal:false,
afterShowForm:function(){
$("#lui_"+grid[0].id).hide(); // hide overlay like "#lui_list"
}
where grid is jQuery wrapper of your grid/table: var grid = $("#list").