I am using cellEditing plugin to edit a particular cell in a grid. This serves my requirements really well from the UI point of view.
However, I want to add validations to the cell and prevent user from completing the edit event unless the value entered is valid. I am trying to achieve this through:
editor: {
allowBlank: false,
vtype:'customized vtype'
}
I am also implementing edit & beforeedit callback events. The error message & tooltip are shown correctly but even with an invalid value, you can still press enter and the callback method 'canceledit' is invoked. I do not want the edit event to be completed/canceled unless the value entered is valid.
However, if I use RowEditing plugin, the validation works as expected and edit event is not completed until the value entered is valid. This is what I need but the look and feel of cellEditing instead of RowEditing plugin more closely matches my requirements.
Is there a way I can have similar validation behavior in cellEditing?
I believe you should listen to validateedit editor event and do your stuff there. See validateedit in docs.
Related
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 am using angularui bootstrap typeahead module for my project.
I am unable to pre-populate the drop-down with predefined value.
Whenever user click on input text of typeahead, it should automatically show the typeahead suggestion dropdown(from a static JSON).
Whenever user starts typing, then the behaviour should be normal.
I tried this solution but unfortunately it stopped working when I upgraded my angularjs to version 1.3
So I essentially accomplished this by making a custom directive and making a minor modification to the ui bootstrap typeahead code. You have to trick the typeahead into thinking someone has typed something in it. I placed a little pulldown arrow to the right of the field so essentially it looked like a pulldown and clicking on that arrow would show ALL choices. You should be able to do it using onfocus.
Basically find the code in the bootstrap typeahead that binds to the key events and I changed it to check for a keydown event of 40
if(scope.matches.length === 0 && evt.which === 40) { // Added
// COMMENT OUT modelCtrl.$setViewValue(modelCtrl.$viewValue);
modelCtrl.$setViewValue(''); // Added
}
You'll also need to make sure the typeaheadMinLength is set to 0. Note in the code above it checks for the case of the user NOT having typed anything AND the special keydown event that I trigger. You should be able to change this to trigger on onfocus. I copied the bootstrap typeahead to mytypeahead.js and then modified it as above, along with a few other minor mods that you may or may not need depending on if the field is "required" or not.
I'm using a select that works with Drupal states. When a user selects certain a value it shows more information. It works fine with direct user interaction.
My problem is that when I make a change in the selector value programmatically nothing happens. I tried firing a change event in the selector, used prop, attr, click... nothing works.
How can I notify Drupal that I'm changing my select control so Drupal fires the appropiate state?
Thanks everyone.
You can find which event drupal listen to for every input type in this function ajax_pre_render_element($element)
for form selects it is the change event, firing it is dependent on your jquery version
try
$('#id').val("1");
or
$('#id').prop('selected', true);
or
$('#id').change();
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()
I am using Extjs4.2.2.
For a radiogroup I have a change listener in controller. I am changing radio selection several times progmatically but I don't want change events to fire in some cases. So I used suspendEvents before changing the selection as follows:
radio.suspendEvents();
//radio.suspendEvent('change');
radio.setValue({communication: 1}); // where communications is the name of radios
However this did not help and a change event is still fired.
How to stop that.
The suspendEvent event bug is there for comboboxes too. Here are the bug reports:
http://www.sencha.com/forum/showthread.php?171525-suspendEvents-did-not-affect-to-Ext.app.Controller.control
http://www.sencha.com/forum/showthread.php?232919-ComboBox-suspendEvents-doesn-t-work
I found a solution that fixes it for comboboxes. Maybe the solution works for radios too. It works in Ext JS 4.2.1. Maybe other versions too.
radio.suspendCheckChange++;
radio.setValue({communication: 1});
radio.suspendCheckChange--;