We Keep Coding

angular-slickgrid, trigger the cell edit on select editor change event

I am using angular-silkgrid with angular 7. I am using inline editing feature. I am using single select editor for inline edit. Currently I want to achieve this functionality:
As soon as user click on the editable field , the select drop down will be visible.On select any option from select dropdown the inline mode should exist and column value should be updated.
currently I need to click on other field to exit from inline mode(I want to achieve this on select option select)
editor: {
// display checkmark icon when True
enableRenderHtml: true,
// tslint:disable-next-line:max-line-length
collection: [{
value: 1,
label: 'Sucessful'
}, {
value: 2,
label: 'Unsucessful'
}],
model: Editors.singleSelect, // CustomSelectEditor
elementOptions: {
autoAdjustDropPosition: false,
onClick: (event, rr) => {
// here i want to write some code which can trigger to grid to start update
}
}
}

Thanks All for the answers. I have solved my issue as below:
editor: {
enableRenderHtml: true,
collection: [{ value: CCLStaus.Sucessfull, label: 'Sucessful' }, { value: CCLStaus.UnSucessfull, label: 'Unsucessful' }],
model: Editors.singleSelect,// CustomSelectEditor
elementOptions: {
onClick: (event) => {
const updateItem = this.angularSilkGrid.gridService.getDataItemByRowIndex(this.rowInEditMode);
updateItem.status = +event.value;
this.angularSilkGrid.gridService.updateItem(updateItem, { highlightRow: false });
this.angularSilkGrid.gridService.renderGrid();
}
}
}

Generally,
grid.getEditorLock().commitCurrentEdit()
will commit and close the editor.
Also, any of
grid.navigateRight()
grid.navigateLeft()
grid.navigateDown()
grid.navigateUp()
grid.navigateNext()
grid.navigatePrev()
will commit and exit gracefully. In the select2 editor, you'll notice:
this.init = function () {
...
// Set focus back to select2 element on closing.
$input.on('select2:close', function (e) {
if ((e.params.originalSelect2Event && e.params.originalSelect2Event.data)
|| e.params.key === 9) {
// item was selected with ENTER or no selection with TAB
args.grid.navigateNext();
} else {
// closed with no selection
setTimeout(function () {
$input.select2('focus');
}, 100);
}
});
};
this.destroy = function () {
$input.select2('destroy');
$input.remove();
};
, noting that args.grid.navigateNext() will commit and close the editor, including calling the destroy() method at the appropriate time.

From the Angular-Slickgrid Editor Example there's a checkbox in the example to auto commit and that is a setting to you need to enable in your Grid Options
this.gridOptions = {
autoEdit: true,
autoCommitEdit: true,
}
The lib will internally call grid.getEditorLock().commitCurrentEdit() like Ben wrote in his answer, in Angular-Slickgrid you can just set the autoCommitEdit flag that I added.

Dragging windows

I did some research on this and still can't find a good solution for it. I wrote my app in ExtJS 4.1 and when I run it on an iPod the dragging functionality is disabled by default (which is what I want), but if I write the same app in ExtJS 6.2 all windows can be draggable which causes issues of visibility of the app. With that being said, Does anyone know how to disable window dragging when using Tablets (iPod, iPad, etc.)? I'm using ExtJS 6.2
Here's my working code that works great for a single window, but I want a general solution that will stop ALL windows from being dragged.
var win = Ext.create('Ext.Window', {
title: "My Window",
width: 500,
modal: true,
layout: 'fit',
items: form,
buttons: [{
text: 'Close',
handler: function() {
win.hide();
}
}]
});
win.show();
if(Ext.os.deviceType === 'Tablet') {
win.dd.disable();
}

A "global solution" sounds like you want to use an override to apply one of the other answers globally to your application:
Ext.define('MyAppName.override.Window', {
override: 'Ext.window.Window',
initComponent: function() {
this.callParent(arguments);
if(Ext.os.deviceType === 'Tablet') {
this.dd.disable();
}
}
})
or
Ext.define('MyAppName.override.Window', {
override: 'Ext.window.Window',
initComponent: function() {
if(Ext.os.deviceType === 'Tablet') {
this.draggable = false;
}
this.callParent(arguments);
}
})
To make the override work, put it into the file app/override/Window.js and add a reference to your requires array in Application.js:
requires: [
'MyAppName.override.Window'
],

You are looking for Ext.os class.
More precisely Ext.os.is method, according to the docs it has all the values you would need.
I am not sure why you want to block only iPads and not tables in general. If you wan tablets than you can use if(Ext.os.deviceType === 'Tablet') {...}
Otherwise if(Ext.os.is.iPad) {...}.
UPDATE Solution:
If you want to force anything across all classes in the ExtJS you would use Ext.override.
So the solution would be to put at the beginning of the app this code:
if (Ext.os.deviceType === 'Tablet') {
Ext.override('Ext.Window', {
privates: {
initDraggable: function(){}
}
})
}
FYI You can check the Ext.Window source code. I had to override this method, the default value draggable: false doesn't work.
https://fiddle.sencha.com/#view/editor&fiddle/2iqi
To test it, just press F12 switch to table mode.
But this solution has 1 drawback:
If the target is a class declared using Ext.define, the override
method of that class is called
Which means this solution don't work when you use Ext.create('Ext.Window',{})
Solution for that would be to define our own Ext.Window class and than inside the app when you are using Ext.create('Ext.Window' you would use Ext.create('Fiddle.view.MyWindow', and when we have our own function already we don't need to use override but can put if directly into the class definition like this:
Ext.define('Fiddle.view.MyWindow', {
extend: 'Ext.Window',
alias: 'widget.mywindow',
draggable: (function(){
if (Ext.os.deviceType === 'Tablet') {
return false;
} else {
return true;
}
})()
});
https://fiddle.sencha.com/#view/editor&fiddle/2iqj
I don't know how to override it for Ext.create('Ext.Window' if you still insists on using it. One solution would be to re-write Ext.create or simply edit the framework source itself but I highly discourage from that.

Why you are not using draggable: false in window config
Here is some code in FIDDLE
var win = Ext.create('Fiddle.view.MyWindow', {
title: "My Window",
width: 500,
draggable: false,
modal: true,
layout: 'fit',
buttons: [{
text: 'Close',
handler: function() {
win.hide();
}
}]
});
win.show();

Extjs 4.2.3 Add/Remove Container

im faceing a weird issue here,
i have a viewport - borderlayout,
my west region extends tab.panel, in the first run i have components added to the west region as tabs,
one container has a gridpanel in it, removing this container from the west region and adding it back work perfectly BUT, the grid inside it is not functional anymore, i cant select and click,listeners are not working
here is how im adding panels
thisControl.add({
title: title,
xtype: widgetName,
//items:[{xtype: widgetName}],
closable: true,
//autoScroll: true,
listeners: {
'beforeclose': function(pnl, eOpts) {
if (pnl.closeMe) {
pnl.closeMe = false;
return true;
}
Ext.Msg.show({
title: 'Close confirmation',
msg: 'Really close? <br />It will delete all related Information/Windows and Map Results',
icon: Ext.Msg.QUESTION,
buttons: Ext.Msg.YESNO,
animateTarget: this,
callback: function(btn) {
if ('yes' === btn) {
pnl.closeMe = true;
//console.log('closing..' + widgetName);
_this.ClosePanelSetup(pnl.xtype)
_this.getPnlWestPanel().remove(pnl, true);
WSAVL.app.getController('WSAVL.controller.Main.WestPanel.FunctionsGridPanelWindow').DeSelectRow(pnl.xtype);
}
}
});
return false;
},
close: function(panel, eOpts) {
console.log('Closing..');
}
}
});
and im removing the panels like that
_this.getPnlWestPanel().remove(pnl,true);
pnl.removeAll(false);
after re-adding the removed container, the gird's selection is never clear as if it is still loading the old one, and all listeners are not working and i cant select rows
thank you for any help/suggestions

sencha touch hide and show a component on tab of a button

I have created an app with some views and also there is a list button on the top left corner to display and hide list on tap event.
some how I am able to hide it on tab but don't know how to display it again. By default it should be hidden but on tap of that button it should hide and show it self depending on current property.
iconCls: 'list',
iconMask: true,
ui: 'plain',
handler: function() {
Ext.getCmp('ext-ListNavigation-1').hide();
}
And list view code
Ext.define('ov_app.store.NavigationItems', {
extend: 'Ext.data.Store',
config:{
model: 'ov_app.model.Items',
data:[
{ items:"Services"},
{ items:"Solutions"},
{ items:"About Us"},
{ items:"Why Singapore"},
{ items:"Contact Us"}
]
}
});
the user inter phase looks something like this
As you can see i what to hide and show this (services,solution, etc.. )
on tap of the list button above the list.

var list = Ext.getCmp('ext-ListNavigation-1');
if (list.isHidden()) {
list.show();
}
else {
list.hide();
}

ExtJS mask a TreePanel without toolbar

Im trying to mask a tree panel without the toolbar so that the user can keep typing as the panel is masked. This seems to be harder than I thought so some suggestions would be great!
Although its prob not necessary, Here is my (stripped down) base tree panel:
Ext.tree.TreePanel({
id:'quicksearch_panel',
root:{
nodeType:'async',
preloadChildren:false
},
loader: new Ext.tree.TreeLoader({
dataUrl:'...',
baseParams:{}
}),
tbar:['Quicksearch:', {
xtype:'textfield',
id:'quicksearch_combo',
emptyText: 'search...',
listeners:{
keyup:{buffer:400, fn:function(field, e) {
// Mask Panel and not Combo HERE
}}
}
}]
});

I think you can try to mask the body of the TreePanel? The Element body is an element in all components that inherits Panel, and the Toolbar is in fact out of this body element so you probably could just mask the body, your toolbar will be out of the masking overlay.
Try this:
var tree = Ext.tree.TreePanel({
//......
tbar: ['Quicksearch:', {
xtype:'textfield',
emptyText: 'search...',
enableKeyEvents: true, //you need this for key events
listeners:{
keyup:{
buffer:400,
fn:function(field, e) {
tree.body.mask();
//When the searching done, unmask it
//tree.body.unmask();
}
}
}
}]
});
Do update us if it works :)