Accessing ckeditor function from a dialog html element without using "onOk" - javascript

I'm trying to create my own plugin and dialog with an html element. When the html element is clicked I would like some text added to the editor. I can't find a way to bypass the onOk function.
If I use editor.insertHtml(' some code ') inside the onOk function the text is added, but if I want to use it outside I get Uncaught TypeError: Cannot read property 'editor' of undefined(…) error.
What is the right way to get to the editor?
CKEDITOR.dialog.add( 'smiley2', function( editor ) {
return {
title: 'Abbreviation Properties',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'html',
id: '2',
label: 'Explanation',
html: "<div onclick=\"editor.insertHtml(' some code ')\">add code</a></div></div>"
}
]
}
],
onShow : function()
{
document.getElementById(this.getButton('ok').domId).style.display='none'; // disapper ok btn
},
onOk: function() {
editor.insertHtml(' abbr ');
}
};
});

CKEDITOR.dialog.add( 'smiley2', function( editor ) {
var onChoice = function(evt) {
var target;
target = new CKEDITOR.dom.element(evt);
editor.insertHtml("SMILEY YES!");
CKEDITOR.dialog.getCurrent().hide();
};
var onClick = CKEDITOR.tools.addFunction(onChoice);
return {
title: 'Abbreviation Properties',
minWidth: 400,
minHeight: 200,
buttons: [CKEDITOR.dialog.cancelButton],
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'html',
id: '2',
label: 'Explana22tion',
html: "<div onclick=\"CKEDITOR.tools.callFunction(" + onClick +", this); return false;\" >111111</a></div></div>"
}
]
}
]
};
});

When you click the div element in your sample, editor isn't in your scope. You need to get your editor object and use its insertHtml method like this;
CKEDITOR.instances.editor1.insertHtml('your text`)
This example assumes your textarea id is editor1.

Related

Binding array of object to Kendo grid popup multiselect

I'm trying to bind an array of id-value pairs to a kendo grid popup editor.
Got everything to work for creating a new record. Popup editor loads the custom editor and successfully submits the data to the controller.
The problem is when I try to edit records. The records displays properly in the row, but when I try to edit it, the multiselect does not hold the values.
Grid Markup
$("#ProjectSites-SubContract-grid").kendoGrid({
dataSource: {
type: "json",
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
DateOfContract: { type: 'date', editable: true },
DateOfCompletion: { type: 'date', editable: true },
AmountOfContract: { type: 'number', editable: true },
Contractor: { defaultValue: { id: "", name: "" } }
}
}
},
},
columns: [
{
field: "ScopeOfWork",
title: "Scope of Work",
template: "#=parseScopeOfWork(ScopeOfWork)#",
editor: scopeOfWorkEditor
},
]
});
});
Scope of Work editor
function scopeOfWorkEditor(container, options) {
$('<input data-text-field="name" data-value-field="id" data-bind="value:ScopeOfWork"/>')
.appendTo(container)
.kendoMultiSelect({
dataSource: {
data: [
#foreach (var scopeOfWork in Model.AvailableScopeOfWork)
{
<text>{ id : "#scopeOfWork.Value", name : "#scopeOfWork.Text" },</text>
},
]
}
});
parseScopeOfWork -
this method guys iterates through the object list and concats the name.
function parseScopeOfWork(scopeOfWork) {
var result = "";
for (var i = 0; i < scopeOfWork.length; i++) {
result += scopeOfWork[i].Name;
if (i < scopeOfWork.length - 1)
{
result += ", <br/>";
}
}
return result;
}
Here's a screenshot:
You're binding the SpaceOfWork to the new widget, but how that widget knows your Model ? I mean, just using data-bind doens't binds the model to the widget, it can't figure that by itself. I have two suggestions:
Set the value in the widget's initialization:
.kendoMultiSelect({
value: options.model.ScopeOfWork
Demo
Bind the model to the widget for good:
let $multiSelect = $('<input data-text-field="name" data-value-field="id" data-bind="value:ScopeOfWork"/>');
kendo.bind($multiSelect, options.model);
$multiSelect
.appendTo(container)
.kendoMultiSelect({ ...
Demo
Note: Edit the category cell in both demos to see the changes.

Href link is not rendering properly

I am using Kendo Menu bar to call javascript function on the click of Menu Item. But url of Kendo Menu is not rendering properly. Below is the code
function kendoMenu() {
$('#menu').kendoMenu({
//orientation: "vertical",
dataSource: [
{
text: "Export",
value: "newtransaction",
items: [
{
text: " Managers",
value: "managers",
url: "javascript:ImportExport('OFD')"
},
{
text: " Terms",
value: "terms",
url: "javascript:doImportExport('OFI')"
},
]
},
],
// select: onKendoMenuselect
});
}
But when i run the program, on the html side it is rendering as
<a class="k-link" href="javascript:ImportExport(" ofi')'=""> Terms</a>
But i want href to be rendered as:
<a class="k-link" href="javascript:ImportExport('ofi')"> Terms</a>
What should be the best approach?
Thanks for the help in advance.
Escape quotes inside string using backslash (\)
url: "javascript:ImportExport(\"OFD\")"
url: "javascript:doImportExport(\"OFI\")"
you can do that in select event try the code below.
$('#menu').kendoMenu({
//orientation: "vertical",
dataSource: [
{
text: "Export",
value: "newtransaction",
items: [
{
text: " Managers",
value: "managers"
},
{
text: " Terms",
value: "terms"
},
]
},
],
function onMenuSelect(ev) {
var selected=ev.item.textContent;
if(selected == "Managers"){
window.location.href='your url here';
}
else
{
and so on...
}
}
});

I am getting an error since I tried to move into this function csvDownload

I am trying to download the file from the grid.
when I click open first window link a popup opens.
in that popup you will see a grid.
but right now I am getting an error since I tried to move into this function
csvDownload Uncaught SyntaxError: Unexpected token <.
I am trying to download the file like the sample prototype fiddle.
can you guys tell me how to fix it providing my code below
sample prototype
http://jsfiddle.net/khfL1jsh/
Uncaught SyntaxError: Unexpected token < not working
http://jsfiddle.net/2s79mnq5/
template: function csvDownload() {
//return "testing" + that.FinancialDocuments.ImageType(model);
<a id=\"sportsDataPlayer\" download=\"download.csv\" type=\"text\/csv\">#= FileName.substring(FileName.lastIndexOf('/')+1) #</a>"
var csv = "a,b,c\n1,2,3\n";
var data = new Blob([csv]);
var a2 = document.getElementById("sportsDataPlayer");
alert("I am here");
a2.href = URL.createObjectURL(data);
}
I have modified the JS file a bit and now at least is not firing the error.
Take a look:
$("#open1").click(function() {
$("#win1").show().kendoWindow({
width: "500px",
height: "500px",
modal: true,
title: "Window 1"
});
});
//debugger;
$("#open2").click(function() {
$("#win2").show().kendoWindow({
width: "500px",
height: "500px",
modal: true,
title: "Window 2"
}).data("kendoWindow").center();
});
$("#close2").click(function() {
$("#win2").data("kendoWindow").close();
});
$(document).ready(function() {
$('.pai-del-menu').hide();
var cnt = 0;
var grid = $("#grid").kendoGrid({
dataSource: {
data: [{
FileName: '1 Download CSV (via btoa)',
ThreeDots: 'ThreeDots1'
}, {
FileName: '2 Download CSV (via btoa)',
ThreeDots: 'ThreeDots2'
}, {
FileName: '3 Download CSV (via btoa)',
ThreeDots: 'ThreeDots3'
}, {
FileName: '4 Download CSV (via btoa)',
ThreeDots: 'ThreeDots4'
}, {
FileName: '5 Download CSV (via btoa)',
ThreeDots: 'ThreeDots4'
}],
schema: {
model: {
fields: {
FileName: {
type: "string"
},
ThreeDots: {
type: "string"
}
}
}
},
sort: {
field: "FileName",
dir: "asc"
},
pageSize: 10
},
height: 500,
scrollable: true,
sortable: true,
selectable: true,
filterable: true,
pageable: true,
columns: [{
field: "FileName",
title: "File Name",
//template: "<a id=\"sportsDataPlayer\" download=\"download.csv\" type=\"text\/csv\">#= FileName.substring(FileName.lastIndexOf('/')+1) #</a>"
template: function csvDownload() {
//return "testing" + that.FinancialDocuments.ImageType(model);
var htmlString = "<a id=\'sportsDataPlayer\' download=\'download.csv\' type=\'text\/csv\'>#= FileName.substring(FileName.lastIndexOf('/')+1) #</a>"
var csv = "a,b,c\n1,2,3\n";
var data = new Blob([csv]);
var a2 = document.getElementById("sportsDataPlayer");
alert("I am here");
a2.href = URL.createObjectURL(data);
},
field: "ThreeDots",
title: "Last Name",
template: "<span class='deleteRow'>ThreeDots</span>"
}]
}).data("kendoGrid");
//var csv = "a,b,c\n1,2,3\n";
//var data = new Blob([csv]);
//debugger;
//var a2 = document.getElementById("sportsDataPlayer");
//alert("I am here");
//a2.href = URL.createObjectURL(data);
// grid.tbody.parents(".k-grid-content").eq(0).kendoScroller({ useOnDesktop: false });
// Start by hiding the confirmation
$('.testingConfirmation').hide();
// Create a persistent value for the window
var testingWindowVal;
// Listen to save button click
$("#save").click(function() {
// Set the persistent value
testingWindowVal = $("#fname").val();
// Show the dialog
if (testingWindowVal) {
$('.testingConfirmation').show();
}
});
// Listen to yes from the confirmation
$('#deleteDocumentYes').click(function() {
// Update necessary things
grid.dataSource.add({
"FileName": testingWindowVal,
"ThreeDots": "Last Name"
});
$("#fname").val('');
// Remove the value
testingWindowVal = null;
// Hide the dialog
$('.testingConfirmation').hide();
});
// Listen to no from the confirmation
$('#deleteDocumentNo').click(function() {
// Remove the value
testingWindowVal = null;
// Reset the #fname
$("#fname").val('');
// Hide the dialog
$('.testingConfirmation').hide();
});
});
This is the updated fiddle:
http://jsfiddle.net/2s79mnq5/#&togetherjs=CVveJp1NKp

Text from button to TextArea Javascript

So i have a button which sets the value of a textBox. My problem is that i want this text to be added , not to be set, so i can keep pressing the button while the already written text is not erased.
contents: [
{
id: 'something',
elements: [
{
id: 'something2',
type: 'textarea', }
{ id: 'testbutton',
type: 'button',
button: 'button',
label: 'Button1',
onClick: function() {
this._.dialog.setValueOf("something","something2","Text was set ");
}
},]
onClick: function() {
var curVal = this._.dialog.getValueOf( "something","something2" )
this._.dialog.setValueOf("something","something2", curVal + "Text was set ");
}
Try this solution, i hope it will help you !

How to do the same without using Ext.getCmp in this code?

This is the code im using and im firing button click event once the window show event is called. this works fine. but how to do the same without using Ext.getCmp
this is the line
Ext.getCmp('recent_refresh').fireEvent('click');
this is the code
Ext.create('widget.window', {
title: 'Activity',
closable: true,
closeAction: 'hide',
width: 250,
height: 300,
bodyBorder: true,
tbar: {
xtype: 'toolbar',
ui: 'plain',
items: [{
iconCls:'refresh',
id: 'recent_refresh',
listeners: {
click: function(){
Ext.Ajax.request({
url: 'control.php',
params: {
'case': '18'
},
success: function(response){
var json = Ext.decode(response.responseText);
}
});
}
}
},
'->',
{
xtype: 'displayfield',
name: 'act_date',
id: 'act_date',
value: new Date(),
formatValue: Ext.util.Format.dateRenderer('Y-m-d')
}]
},
layout:'accordion',
border: false,
items: [ grid1, grid2, grid3 ],
listeners: {
show: function() { Ext.getCmp('recent_refresh').fireEvent('click'); }
}
}).show();
Regards
There are many ways to do this. One way is to make an assignment with the Ext.create call since Ext.create returns such a reference. The app namespace in the example below is a filler since any namespaces you are using are unknown from your text. Once you have the variable reference to the widget, you can get use it to get a reference to the top toolbar and then get a reference to the item you want inside of the toolbar.
Ext.ns('app');
app.activityWin = Ext.create('widget.window', {...}
app.activityWin.getTopToolbar().get('recent_refresh').fireEvent('click');
Use the ref property.. I don't know if it has been carried forward to Ext JS 4, but here's how we do it in Ext Js 3.3
var win = new Ext.Window({
..config..
buttons : [{
text : 'save'
ref : 'saveButton'
}],
listeners : {
show : function(win){
win.saveButton.fireEvent('click'); //saveButton here is the same as used in ref above.
}
}
});
ref can now been used directly and no need to use Ext.getCmp
check the correct usage of ref in your case and implement it..
Cheers.

Categories