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()
Related
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 use AgGrid Enterprise, and allow users to edit an entire row so all cells switch to edit mode.
I also have an event listener to save the row in database when the user put the focus on a new line or outside the grid.
In the first column of my grid, i have a custom cell displaying a combo.
When the user select a value, it should update the cell AND 3 other cells in the row.
So i use the API to refresh the 3 cells.
Doing so put the cell in view mode, i loose the edit mode and the save event is triggered.
Is there a way in edit mode, to update cell content without loosing the edit mode ??
Thanks a lot.
You said your are try to entire row and and also have custom cell with combo
but ag-grid does not work any popup editor with full row edit.
You have to remove ag-grid property editType: 'fullRow' and it will work.
https://www.ag-grid.com/javascript-grid-cell-editing/#gsc.tab=0
I'm using ExtJS 5.1.3, I have a grid which is loaded from a store which has a model. The grid is set to use plugin roweditor, so I edit a cell and give it a new value, at this point the red tick is shown that the cell has been changed.
I have a Save button which when clicked gets the store.getModifiedRecords() and passes these off to a ajax request, upon success of this request a few things happen and the last action I do is to load the grid store again which then populates the grid again with the latest version of the data, this is fine and seems to be working as expected.
As this is a multi page application I also have a check when a user navigates away from this page, this is to catch any unsaved grid changes, so basically I get any form from the page and verify the isDirty() value, this is where I am finding my issue, the roweditor is being returned as dirty, this is because some columns have an editor and ExtJS uses form validation on these fields,
I can't understand why the store loading again has not cleared any dirty fields associated with the grid columns? I've tried a number of things such as clearing the store prior to ajax request along with refreshing the grid view, I've tried committing the store changes prior to doing the ajax request but each time I try navigate away from the page after a grid save I pick up the roweditor as having dirty fields :( any help is greatly appreciated.
EDIT: managed to replicate on a simple fiddle
https://fiddle.sencha.com/#view/editor&fiddle/1rmf
The fiddle is basic, to replicate follow these steps;
edit first row age, change age to 13
click Save (i'm forcing the store to load data which has the change we've made)
click 'Check roweditor is Dirty() value' button to see the value of the roweditor isDirty() function, this will return true
if you look at the button handler, you can drill into forms[0].items.items[2] and see that this field has dirty: true which is why isDirty() is returning true.
SOLUTION
As explained in accepted answer, the roweditor is not affected by the store edit/cancel or load in my case. What I did when clicking on 'Save' was to get the grid, then the editor and it's form and called reset() on this so effectively sync everything again.
grid.editingPlugin.getEditor().form.reset();
you can also get access to plugins via grid.getPlugins() which returns an arrary
updated fiddle to show it working
https://fiddle.sencha.com/#view/editor&fiddle/1rmr
During the editing process grid will eventually call loadRecord on the editor's form. However the editor's form is not cleared upon editing success or canceling. That is why your check for dirtyness returns false.
Grid reloading the data is not destroying the editors. It is an optimisation. Editors are created only once and they are destroyed along with the grid.
I'll try to answer regarding to an experience of mine with an all ExtJS desktop application.
By the way looking quickly over your description, you may have to call the Store.sync() method that refreshes your store.
Looking more deeply, there are many way to make CRUD using ExtJs.
I've been made using the "instance" of store but at certain point I had to change it to static calls like MyApp.store.Model.save() etc. That makes you have only one instance of the store avoiding dirty data.
Here's my project folder if you need
https://github.com/guilhermeribeirodev/grizzlyboilerplate/tree/master/src/main/webapp/js/MyApp
I'm displaying an ng-grid and I would like to change a particular cell's content based on an update. I don't want to make the cell editable. I'm instead popping up a dialog when they click on a Row. When they submit the data, I update the db using ajax, but I don't want to refresh the page. I'd like to update the cell to say something like "Updated". I haven't found anything in documentation or examples that would allow me to modify a particular cell on the fly. Anybody wanna point me in a right direction?
I do something similar with my data. Use a row or cell template to show your dialog using ng-click and pass a reference to the row.entity to your dialog. Then you can just update the data on the row.
I created an example below where I have a cell template that has an event to capture the row, column, and cell data. Then I allow for the user to update the value, and on the button click I update the row with the new value.
Plunkr here:
http://plnkr.co/edit/JQ7mtD?p=preview
I have a requirement to create a custom form field that is basically an extjs grid. The user should be able to click a result in the grid. This clicked result should then become the fields value. Also, this field needs to extend Ext.form.field. Here's what I got:
Ext.define('MyApp.field.Grid', {
alias: 'widget.GriedField',
extend: 'Ext.form.field.Base',
I'm a lot of confused on how to add a grid to form field base. Looks like form field base's template expects HTML. How do I get it accept a component?
If you just need to select a value from a list of items. Why not use a combobox?
If you need to select multiple items. There is an example of how to use the MultiSelect ux component in the documentation examples.
http://docs.sencha.com/ext-js/4-1/#!/example/multiselect/multiselect-demo.html
If you really must use a grid. Then I wouldn't bother with trying to create a field type and cause yourself grief.
Add a listener to your grids selectionchange event and update a hidden field in your form with the value you want from the grid. Job done.
I ended up putting the grid on a form indirectly through creation of dependencies on my model.
My model has master-detail, which the detail is just a store reference. I found that using associations did not work for me.
So, in adding a field to a form, I have something that manages changed events for the model (master record) and the detail stores.