I have a multipage form with more than 40 fields spread over multiple tabs, and grouped in collapsible fieldsets.
Now I have the case that upon form submission, a field is detected as invalid, and I want to find the field for the user, bring it into the visible area and focus it. So I have to switch to the right tab, open the fieldset if applicable, scroll the field into the visible area and focus it.
I would guess ExtJS has a function for this, but I don't find one. My code:
// Get first invalid field. C&P from Ext.form.Basic.isValid function
var invalidField = me.getForm().getFields().findBy(function(f) {return !f.isValid();});
if(invalidField) {
// TODO: Bring the field to front.
// Now focus the field:
invalidField.focus();
Is there a builtin function available?
Ext JS does not provide a built-in method for doing this specifically, but it does provide all of the necessary utility methods and supports animations. At a minimum, ensuring the form is configured as scrollable, setting the active tab, and focusing on the invalid field is enough to scroll to correct position. I created a fiddle example demonstrating a solution.
Sencha Fiddle: An Example of Scrolling to an Invalid Field in a Tab
tabPanel.items.each(function(tab) {
var formPanel = tab.down('form');
formPanel.getForm().getFields().each(function(field, index, length) {
if (!field.isValid()) {
tabPanel.setActiveTab(tab);
// Focusing an element will set the correct scroll position.
// However, an animation can help the user follow along.
formPanel.setScrollY(field.getPosition()[1], true);
field.focus();
return false;
}
return true;
});
});
http://docs.sencha.com/extjs/6.2.0/classic/Ext.Component.html#method-getPosition
http://docs.sencha.com/extjs/6.2.0/classic/Ext.Component.html#method-setScrollY
Related
I am working on an editable table in Angular application with ag-grid library. I would like to keep editing cells (in full row edit mode) until I finish with it and then close the editors manually via API. The problem is that the editor is closing on other cell click/focus (on some other line) as described here:
The grid will stop editing when any of the following happen:
Other Cell Focus: If focus in the grid goes to another cell, the editing will stop.
I cannot figure out how to disable this, if it is possible. Installing the onCellMouseDown() hook does not help, because the cellFocused event is fired before cellMouseDown. Therefore, the editing stops before I have a chance to intercept the mousedown event.
Here is my stackblitz little extract with related pieces of code.
The need for such scenario is that I want to validate the entry and not to allow a used to quit the editing if the form is not valid. The only workaround I found so far is that on any click outside of editing cells when the editor closing I reopen it right away in onRowEditingStopped() hook unless the editor has been closed via 'OK' button.
After all, I have managed to provide a custom solution that fits exactly into this problem which I was facing also.
First thing is to disable pointer events to non edited rows when a specific row is currently being edited. On Ag-grid's 'cellEditingStarted' callback I have added the following code:
public cellEditingStarted(event: any): void {
//not all rows are on dom ag-grid takes care of it
const nonSelectedGridRows = document.querySelectorAll('.ag-grid-custom-row:not(.ag-row-selected):not(.ag-row-editing):not(.pointer-events-none)');
forEach(nonSelectedGridRows, row => {
row.classList.add("pointer-events-none");
});
}
Because not all rows exist on dom (Ag-grid creates and destroys while you are scrolling )when a specific cell is being edited, I have also added a rowClassRule which is applied when rows are being created:
this.rowClassRules = {
'pointer-events-none': params => {
if (params.api.getEditingCells().length > 0) {
return true;
}
return false;
}
};
scss:
.pointer-events-none {
pointer-events: none
}
By disabling pointer events, when you click on a non edited cell the cell won't get focus and thus the currently edited cell will stil remain on edit mode. You can provide your own custom validation solution and close the editor manually through API. When you are done, you have to enable pointer events to all grid rows back again:
private enablePointerEvents(): void {
//not all rows are on dom ag-grid takes care of it
const nonSelectedGridRows = document.querySelectorAll('.ag-grid-custom-row.pointer-events-none');
forEach(nonSelectedGridRows, row => {
row.classList.remove("pointer-events-none");
});
}
I implemented the same above approach in Ag-Grid React.
I used getRowStyle callback for adding the css pointerEvents: none on dynemic basis.
It seems to be working for me fine.
Please refer the below code
const getRowStyle = (params) => {
// this is not initialized in read mode
// condition for me ==> currentEditRowIndex.current !== null && params.node.rowIndex !== currentEditRowIndex.current
if (someCondition for Row other than inline edit row) {
return { pointerEvents: "none" };
}
return null;
};
After adding this whenver you start the editing..You will need to call redrawRows so that css changes can be applied.
Hope this will help. Thank You!!
Thought I would share another solution that has been working out okay for me so far.
Using 'pointer-events-none' as suggested in the other answer is flawed because the Enter key can also close the editor.
In my case, I want to prevent the editor from closing when client side validation has failed and the data is invalid. When my conditions are met, I call stopPropagation() on the events to prevent the editor close from happening in the first place. It still has potential problems:
It cancels mousedown, dblclick, keydown, focusout and click for all elements that have a class name starting with ag- so if you happen to use this class prefix for other controls on the page, it could interfere. It also means any controls within the grid (sorting, resizing, etc.) don't work while the condition is met.
Calling stopPropagation() could potentially interfere with your own custom controls. So far I've been okay if I dont use the ag- prefix within the markup from my own custom cell editors and renderers
I hope they can add a proper API function to cancel the row/cell stopEditing function in the future.
["mousedown", "dblclick", "keydown", "focusout", "click"].forEach(function (eventName) {
document.addEventListener(eventName, function (e) {
if ( conditionForCancelingIsMet() ) {
// this appears to cancel some events in agGrid, it works for
// preventing editor closing on clicking other cells for example.
// It would be ideal if this worked for all ag-grid specific events
// and had a proper public API to use!
e["__ag_Grid_Stop_Propagation"] = true;
}
// convert element classList to normal js array so we can use some()
var classArray = [].slice.apply(e.target.classList);
if ( conditionForCancelingIsMet() && classArray.some(c => c.startsWith("ag-")) ) {
// unfortunately some events like pressing the 'enter' key still
// require stopPropagation() and could potentially interfere with unrelated controls
e.stopPropagation();
}
}, true);
});
I am using DOJO datagrid version 1.10 What I want is on tab indexing the row in the grid should get highlighted so that user will be able to know on which row the focus is. But I am not getting the row focus.
You could listen on the dojox.grid.DataGrid::onCellFocus event. The event arguments are the focused cell-Object itself and the corresponding rowIndex.
function onCellFocus(cell, rowIndex) {
// first clear selection
grid.selection.clear();
// select the focused row
grid.selection.setSelected(rowIndex, true);
// invoke manually the render method
grid.render();
}
I've created a working fiddle for you, which can be found here.
What am I trying to do?
I have an existing page (generated by system automatically and I don't have any control on it) in which I am injecting GWT code to modify the behaviour of the page after it loads based on certain columns and augment the functionality of the page. For example after adding my GWT code, cells in one of the table columns become clickable and when the user clicks it, additional information is displayed to the user in a pop-up panel. All that is working fine.
What is the issue?
The generic page in which I am injecting my code has paginated table which shows 15 rows at a time. Now, when I load/refresh the page, my GWT code kicks in and sinks events in the specific column which adds functionality (described above) to the cells. However, when the user uses the left and right buttons to navigate the paginated result, the page does not refresh as it is an asynchronous call. The specific column in the new set of 15 rows is now without the sunk events as the GWT code does not know that the page changed.
I am trying to find a way to tell my GWT code that page has changed and it should sink events to the cells of specific column for the new 15 rows but unable to find any method or mechanism to help me capture a DOM/Document change event. I tried doing this but did not help:
new ChangeHandler(){
#Override
public void onChange(ChangeEvent event) {
Window.alert("Something Changed");
}
It is possible I am missing something very obvious. Posting this question to know if there is an easy way to figure out DOM changes in GWT. Have searched for DOM/Document change/mutation/ etc. without luck.
If anyone knows how to detect DOM changes in GWT would really appreciate otherwise would go ahead writing native code using native mutation observers.
You can try something like this:
First get the input elements with:
InputElement goOn = DOM.getElementById("IdOfGoOnButton").cast();
InputElement goBack = DOM.getElementById("IdOfGoBackButton").cast();
Next add a native EventHandler:
Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
#Override
public void onPreviewNativeEvent(Event.NativePreviewEvent event) {
if (event.getTypeInt() == Event.ONCLICK) {
if (event.getNativeEvent()
.getEventTarget() != null) {
Element as = Element.as(event.getNativeEvent()
.getEventTarget());
if (as.getTagName()
.toLowerCase()
.equals("input")) {
InputElement clickedElement = as.cast();
if (clickedElement.getId().equals(goOn.getId()) ||
clickedElement.getId().equals(goBack.getId())) {
// one of the paging button is pressed
}
}
}
}
}
});
Hope that helps.
I've faced up with the following problem:
I have a scroll area which contains list of input text fields.
I use
ontouchmove = function(e){ e. preventDefault(); }
to prevent global scroll of the page. It works fine except cases when gesture begins from input field.
How can I prevent global scroll of the page when first touch traps to the input field?
Thanks.
I believe you want to capture the touchmove event using the addEventListener function so that the even doesn't "bubble". Try this:
/* This code prevents users from dragging the page */
var preventDefaultScroll = function(event) {
event.preventDefault();
window.scroll(0,0);
return false;
};
document.addEventListener('touchmove', preventDefaultScroll, false);
this might help
the section "MORE SPECIALIZED SOLUTION" might be what you are looking for.
I have a long webpage with a form at the bottom. The form has several inputs and one of them is required="true". After the parser parses all the inputs and dojoifies them, it scrolls down to that required field - which of cours is not what I want the visitors to see first since the important things are at the top of the page. This scrolling behaviour might be smart in some cases - but in my case it totally sucks.
How do I tell dojo to stop scrolling to the required text input?
Thanks to all the dojo gurus out there!
The base widget dijit.form._FormWidget has scrollOnFocus property that is inherited by descendant widgets.
Set it to false. It helped me to prevent scrolling to buttons.
That won't work because the dijit.Form contains the logic that focuses the first invalid field.The quickest solution I can think of is adding a patch that would override validate method of dijit.form._FormMixin. You'll need to require the patch on those pages where you want new behavior.
dojo.provide("your.namespace.FormPatch");
dojo.extend(dijit.form._FormMixin, {
validate: function() { /* your implementation here */ }
});
You can also define a new widget that would inherit from dijit.Form.