I am developing a data grid using Kendo Angular 2 Grid.
I have written a grid event listener as
(dblclick)="dblClickEvent($event)".
and handler as
dblClickEvent(event) {
console.log(event);
}
Now after running in Chrome the emitting event is MouseEvent but in IE 11 it is PointerEvent
How to handle this.
Also I want to check the source of this events, is it a row or other than row (like columnHeader row)
I have found answer to this question earlier but i forgot to post here.
DblClick(event: MouseEvent)
{
if (event.srcElement instanceof HTMLTableCellElement)
{
if (event.srcElement.outerHTML.toLocaleUpperCase().indexOf("KENDOGRIDCELL") != -1)
{
//Your code here
}
}
}
Above it the workaround for my scenario
Related
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>
I am using the Kendo UI grid to edit records.
I have a load data function:
private loadData(): void {
this.gridView = {
data: this.data.slice(this.skip, this.skip + this.pageSize),
total: this.data.length
};
}
and I have a service that updates the data and stores it in this.data content:
this.dataservice.update().then(res => this.loadData());
However, the UI does not update. How should I update the grid UI?
If the grid is not updated, I suppose that changes in the loadData() method are not detected.
A simple test in a plunker shows that such simplified approach works just fine:
Plunker Demo
As a side note, if you are not seeing changes in the a specific row template, then this is a known issue logged here:
Kendo Grid for Angular 2 Issue
During some code is running in loop to update datagird and user click their mouse on data grid suddenly while data is processing.Can i handle their selection while loop is running and then back to the loop;
public void procesData()
{
for(int i = 0;i<=1000000;i++)
{
if(Mousedown or something like this)
{
//do stuff or handle mousedown event
}
//do something
}
}
How to detect their clicking?
You should handle the click event in a event handler of the grid, and then set a flag to true.
The you can check the value of that flag in the loop.
Also, in the event handler you should get the row or cell the user has clicked on.
It might happen that you do not get the event because the UI thread is busy updating the grid with the new values.
I'm using Telerik's MVC grid, and I would like to submit batch edit mode changes with some out of grid values. According to this telerik forum I can call the grid's submitChanges function and supply non-grid values inside the OnSubmitChanges event. This function only gets called if the grid has changes. There can be a case when values are changed outside of the grid but grid values are not saved. Is it possible to force the submission so that non-grid values can be submitted?
Good thing Telerik MVC Extensions are open source. I figured out the answer the following way:
function SaveCriteriaChanges() {
var grid = $("#MyGridId").data("tGrid");
//don't submit if grid fails validation
if (!grid.validate())
return false;
if (grid.hasChanges()) {
grid.submitChanges();
} else { //no grid changes to process so force submission
var additionalValues = {};
if(!$.telerik.trigger(grid.element, 'submitChanges', { values: additionalValues })) {
grid.sendValues($.extend({}, additionalValues), 'updateUrl', 'submitChanges');
}
}
return true;
}
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