Ive got a working grid, using in-line editing thanks to this example
https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-row-click/
What I need to do now, is force the saving upon a user hitting the enter key, instead of clicking away onto another row or away from the current row. I suppose I could add a "save" button in the header?
You could probably use cellClose event in your html (cellClose)="cellCloseHandler($event)" - API Documentation
You could then write your own code (in typescript) in cellCloseHandler() to modify and save the updated items accordingly.
From Kendo UI for Angular Documentation:
In-Cell Editing
You could capture the Enter key hits and force executing cellCloseHandler() like that:
#HostListener('keydown', ['$event'])
public keydown(event: any): void {
console.log("keydown event", event);
if (event.keyCode === 13) {
this.cellCloseHandler();
}
}
Similar to Giannis answer but with small modifications:
Add keydown event to kendo-grid tag.
Call grid.closeCell() instead of calling the closeHander directly.
Template
<kendo-grid #grid
[data]="data$ | async"
(cellClose)="cellCloseHandler($event)"
(keydown)="onKeydown(grid, $event)"
>
Class
onKeydown(grid: GridComponent, e: KeyboardEvent) {
if (e.key === 'Enter') {
grid.closeCell();
}
}
cellCloseHandler(args: CellCloseEvent) {
const { formGroup, dataItem } = args;
// save to backend etc
}
Calling grid.closeCell(); will make the grid to call cellCloseHandler
You dont have to implement a HostListener for Keydown by yourself. If you set the input navigable to true, the cellClose event will get triggered when pressing Enter while editing a cell or row. This way you get the data of the row in your cellCloseHandler aswell for saving it.
<kendo-grid [navigable]="true" (cellClose)="cellCloseHandler($event)"></kendo-grid>
Related
I am working on CRM 2011.
On Form_onLoad event I am presetting the value of a field.
mdg.PreSetField("address1_line1","Amsterdam");
but after clicking on save button my field address1_line1 is blank.
To check I put a alert on Form_onsave function.
alert("address =" + (Xrm.Page.getAttribute("address1_line1").getValue()));
In alert,I get the value of address1_line1 field but finally address1_line1 is blank.
mdg.PresetField function is as follows
mdg.PreSetField = function(attributeName, value) {
var attribute;
if (attributeName.setSubmitMode) {
attribute = attributeName;
}
else {
attribute = Xrm.Page.getAttribute(attributeName);
}
attribute.setSubmitMode('never');
attribute.setValue(value);
attribute.addOnChange(function() {
attribute.setSubmitMode('always');
});
};
I solved it..
in my custom mdg.PresetField function earlier code was
attribute.setSubmitMode('never');
I changed never to always and now it is working..
mdg.PreSetField("address1_line1","Amsterdam");
This code is not part of the CRM JavaScript API so I assume it's a custom library? Have you added this script to the list of webresources available on the form? Also make sure it comes before the script you are trying to use it in.
I have a xpage that loads a Bootstrap modal window (see picture). I need to validate the data only the user pushes the 'Add New' button. I do not want the validators to run when 'Save and Continue' or 'Previous' buttons are pressed.
The modal dialog is a custom control used many times throughout the application. I cannot change the buttons to disable validators because most of the time I want to validate. The center content is stored in its own custom control.
My question is can I add code to the button to get a handle to each control, and set the disableValidators to true. I haven't been able to figure out how to do this. I have already tried computing the disableValidators but was totally unsuccessful. The fields are all bound to scoped variables.
I know that I can use clientside validation here, but the rest of the application uses server-side and I want to be consistent + this is a responsive app, and clientside on mobile is annoying.
Rather than adding code to button to and setting disableValidators for each control I would suggest the other way round. For each control set the required property only if user pushes 'Add New' button.
This blog post by Tommy Valand describes it in detail. The below function lets you test if a specific component triggered an update.
// Used to check which if a component triggered an update
function submittedBy( componentId ){
try {
var eventHandlerClientId = param.get( '$$xspsubmitid' );
var eventHandlerId = #RightBack( eventHandlerClientId, ':' );
var eventHandler = getComponent( eventHandlerId );
if( !eventHandler ){ return false; }
var parentComponent = eventHandler.getParent();
if( !parentComponent ){ return false; }
return ( parentComponent.getId() === componentId );
} catch( e ){ /*Debug.logException( e );*/ }
}
So if you want the validation to run only when the user clicks a specific 'Add New' button then write this in all the required-attributes:
return submittedBy('id-of-add-new-button')
I did subscribe an event on data table as follows (YUI data table):
myDataTable.subscribe("cellClickEvent", this.myDataTable.onEventShowCellEditor);
how can I achieve as follows?
If (condition)
show cell editor
else
remove or hide cell editor
Thanks in Adv.
onEventShowCellEditor is nothing really special, it simply calls method showCellEditor. So can you. Instead of setting a listener for the event and pass it straight through to onEventShowCellEditor put your own listener there instead and decide prior to calling showCellEditor:
myDataTable.subscribe('cellClickEvent', function (oArgs) {
if (condition) {
myDataTable.showCellEditor(oArgs.target);
} else {
...whatever
}
});
I have a flash movie I am making that has a search box and a search button. The button has this code:
on (release, keyPress "<Enter>") {
searchbox.execute();
/*the function above processes searches*/
}
Clicking on the button works just fine. Pressing Enter doesn't do a bean! Does anyone know why this is, and any ways I can work around it? I'd prefer not to use listeners if I can possibly avoid it at all.
Using on() is a deprecated AS1 practice, so maybe you should just stop using it. Thanks to the onKeyDown event handler of the MovieClip class, it is possible to use proper code to do it without listeners, so you don't have to worry about them. ;)
Anyway, on with the code. Type this into the timeline which contains the button:
//Enable focus for and set focus to your button
searchButton.focusEnabled = true;
Selection.setFocus(searchButton);
//The onRelease handler for the button
searchButton.onRelease = function(){
//You need this._parent this code belongs to the button
this._parent.searchbox.execute();
}
//The onKeyDown handler for the button
searchButton.onKeyDown = function(){
//Key.getCode() returns the key code of the last key press
//Key.ENTER is a constant equal to the key code of the enter key
if(Key.getCode() == Key.ENTER){
this._parent.searchbox.execute();
}
}
I want to be able to add an onBlur/onkeypress/onChange events to all TypeAhead fields on the form rather than have a developer select every one in the Designer client. The only thing I cannot get a handle on is the onChange event.
When the user selects something in the TypeAhead the onChange event is triggered when adding the code directly to the event in the Domino Designer - so I should be able to replicate that capability with code.
If my typeAhead field is called inputText2 I thought I would be able to do the following
var widget = dojo.byId("#{id:inputText2}")
dojo.connect(widget, 'onChange', function (){
alert('1')
});
However this doesn't appear to work...
I tried lowercase onchange
var widget = dojo.byId("#{id:inputText2}")
dojo.connect(widget, 'onchange', function (){
alert('1')
});
no luck there either
I tried
var widget = dijit.byId("#{id:inputText2}");
but that failed to event select the element entirely
So what do I need to do to trigger the onchange event when selecting an option in the typeAhead?
I found a solution.....not ideal but it worked for the moment - not generic though, but a start
Copying the way XPages does it....add this to the page
function view__id1__id2__id31__id50_clientSide_onchange(thisEvent) {
alert('me')
}
and then
dojo.addOnLoad(function(){
XSP.addOnLoad(function() {
XSP.attachEvent("X1","view:_id1:_id2:_id31:inputText2", "onchange", view__id1__id2__id31__id50_clientSide_onchange, false, 2);
});
});
});
X1 must be unique but everything else can be calculated
Thanks to Serdar Basegmez