We Keep Coding

PostMessage Issues Using IFrame in JS

I have two buttons that work differently. The first one is when you click the reload button, it should reload the page. The second one is when you click it, it will show the alert on the page.
I'm using postMessage because its inside the iframe. I'm not sure why the two buttons are not working but I already implemented the postMessage and window.onmessage
CODESANDBOX
PARENT WINDOW
CHILD PAGE
CODE
function reloadPage() {
window.parent.postMessage({ reload: true }, 'https://8beu4h.csb.app');
}
function alertPage() {
window.parent.postMessage({ alert: true }, 'https://8beu4h.csb.app');
}
window.onmessage = (event) => {
const { data, origin, source } = event;
if (source == frameToListen.contentWindow) {
try {
if (data.reload) {
window.location.reload();
}
} catch (e) {
console.error(e);
}
}
};
window.onmessage = (event) => {
const { data, origin, source } = event;
if (source == frameToListen.contentWindow) {
try {
if (data.alert) {
alert("HI");
}
} catch (e) {
console.error(e);
}
}
};

The second argument to Window.postMessage() is the target origin, not the source one.
Change
postMessage({ reload: true }, 'https://8beu4h.csb.app');
to
postMessage({ reload: true }, 'https://eq0o2y.csb.app');
Also, onmessage can only set one handler at a time. Your second one will remove the previous one. Either you merge both handlers in a single function, either you use addEventListener()

Parent Window
window.addEventListener(
"message",
function (event) {
const { data, source } = event;
console.log(source);
if (source == frameToListen.contentWindow) {
if (data.reload) window.location.reload();
if (data.alert) alert("HI");
}
},
false
);
CHILD WINDOW
function reloadPage() {
window.parent.postMessage({ reload: true }, 'https://eq0o2y.csb.app/');
}
function alertPage() {
window.parent.postMessage({ alert: true }, 'https://eq0o2y.csb.app/');
}

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.

How to prevent deleting , editing and dragging records in tree. Extjs

In Ext.tree.Panel, editing records is done by rowediting plugin.
How to prevent deleting or editing the topmost Root record?
And how to prohibit dragging the top records except childNodes?
Dragging is done using the treeviewdragdrop plugin.
Below is the plugin code.
...
plugins: [{
ptype: 'rowediting',
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
afteredit : function (editor, context, eOpts ){
context.store.reload();
},
canceledit : function ( editor, context, eOpts ){
context.store.reload();
}
}
}],
viewConfig: {
plugins: [{
ptype: 'treeviewdragdrop',
containerScroll: true
}]
},
...
Example in fiddle , on file app/view/QuestionTree.js

Just to add to the solution, to prevent the drag on topmost records you could also use:
listeners: {
viewready: function (tree) {
var view = tree.getView(),
dd = view.findPlugin('treeviewdragdrop');
dd.dragZone.onBeforeDrag = function (data, e) {
var rec = view.getRecord(e.getTarget(view.itemSelector));
return rec.isLeaf();
};
}
}

For preventing editing you can use beforeedit event where you can return false and cancel the operation. Same way you can use beforedrop for preventing drop. Here's the FIDDLE (in QuestionTree.js)
beforeedit: function (editor, context) {
return !context.record.isRoot();
}
listeners: {
beforedrop: function (node, data, overModel, dropPosition) {
return data.records[0].isLeaf();
}
},

onCollapse set parent as selected node, if child/grandchild is already selected (bootstrap treeView)

I have working bootstrap tree view. I want add one feature in this.
https://jsfiddle.net/evk9yfum/
https://github.com/jonmiles/bootstrap-treeview (plugin used)
Eg: onNodeCollapsed: if collapsed node's child/grandChild already selected. then current collpased node should be shown as selected node.
Then on expand of this same node. it should show its/last selected or child/grandChild node.
onNodeCollapsed: function(event, node) {
$.each(node.nodes, function() {
if (this.state.selected) {
$('#treeview-selectable').treeview('selectNode', [node.nodeId, {
silent: true
}]);
return;
}
});
}

Use this var slectedNodeId, hasSelect=false, nodeIdList=[] three global variable and then do like the code below. Hope this will help you.
onNodeExpanded:function(event, node){
$.each(node.nodes, function(){
if((this.nodeId==slectedNodeId || nodeIdList.indexOf(this.nodeId)>-1)
&& hasSelect)
{
$('#treeview-selectable').treeview('selectNode',
[ this.nodeId, { silent: true } ]);
}
});
},
onNodeCollapsed:function(event, node){
nodeIdList.push(node.nodeId);
$.each(node.nodes, function(){
if(this.state.selected){
$('#treeview-selectable').treeview('selectNode',
[nodeIdList[0], { silent: true } ]);
hasSelect=true;
}
});
},
onNodeSelected: function (event, node) {
slectedNodeId=node.nodeId;
nodeIdList=[];
hasSelect=false;
$(this).treeview('unselectNode', [ node.nodeId, { silent: false } ]);
},
onNodeUnselected: function (event, node) {
$(this).treeview('selectNode', [ node.nodeId, { silent: true } ]);
}
Updated Fiddle here: https://jsfiddle.net/evk9yfum/24/

ExtJS and this.control query

I have an issue with the next code block:
run: function(e, row){
var me = this;
var container = Ext.getCmp('centercontainer');
try {
container.removeAll();
} catch(e) { }
// This block is called from another file, I just put it here to show you.
me.panels = [{
xtype: 'tabpanel',
id: 'containertabpanel',
items: [{
itemId: 'package',
title: me.PackageTitle
},{
itemId: 'excursion',
title: me.ExcursionTitle
}]
}];
// Reset
container.setTitle(me.EditDestinationTitle + row.data.name);
container.add(me.panels);
me.tabs = container.getComponent('containertabpanel');
// console.log(Ext.ComponentQuery.query('#containertabpanel > #package'))
me.control({
// Work with
// 'tab': {
// Doesn't work
'containertabpanel > package': {
mouseover: me.doPackage
}
})
},
Anyone knows how do I get to catch the click event of "package" item of tabpanel component?
I saw when I use just "tab" selector on this.control query, that work, but I can't get only "package" tab component.
Thank you in advance.

In your definition of your tabpanel you can specify -
listeners:{
click:{
fn: function(){
//click handling code goes here
}
}
}

If I understood correctly this is controller code and you are trying to catch an item click on the panel which is one of many in a tabpanel
What you can do is identify your panel by any property that is unique to it via the component query syntax like this: button[myprop=blah]
This syntax will match any buttons on the page with the following config:
{
xtype:'button'
myprop:'blah'
}
In your case you can try tab[itemId=package]
What you also need to be careful about is controller can listening only for events that are fired by the components. Make sure the event you are listening for is fired (check the docs). You can always fire custom events if necessary.

You need to do this
me.control({
// Work with
// 'tab': {
// Doesn't work
'containertabpanel > #package': {
mouseover: me.doPackage
}
})