Text from button to TextArea Javascript - 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 !

Related

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...
}
}
});

Kendo UI Grid - Custom command button disabled depending on boolean property

How can I set the class to disabled for a custom command on a Kendo grid depending on the boolean value of a property?
I want to use this approach to make the button disabled:
https://docs.telerik.com/kendo-ui/knowledge-base/disable-the-grid-command-buttons
Javascript:
{ command: { name: "custom", text: "Exclude", click: excludeCategorization }, title: " ", width: "60px" }
I want to add a condition like this using the property IsEnabled but if possible using the k-state-disabled class
#= IsEnabled ? disabled="disabled" : "" #
I don't believe you can assign classes conditionally through a template, however you can use the dataBound event to crawl through the rows and manipulate the classes. I would start with all of them disabled and then enable the ones that need to be active, but you can build your own logic. Here's an example:
<div id="grid"></div>
<script>
var grid;
$("#grid").kendoGrid({
dataBound:function(e){
var grid = $("#grid").data("kendoGrid");
var items = e.sender.items();
items.each(function (index) {
var dataItem = grid.dataItem(this);
$("tr[data-uid='" + dataItem.uid + "']").find(".excludeCategorization").each(function( index ) {
if(dataItem.isEnabled)
{
$(this).removeClass('k-state-disabled')
}
});
})
},
columns: [
{ field: "name" },
{ field: "enabled" },
{ command: [{ className: "k-state-disabled excludeCategorization", name: "destroy", text: "Remove" },{ className: "k-state-disabled", name: "edit", text: "Edit" }] }
],
editable: true,
dataSource: [ { name: "Jane Doe", isEnabled: false },{ name: "John Smith", isEnabled: true } ]
});
</script>
Here's a link to a Dojo: https://dojo.telerik.com/ubuneWOB

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

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.

Kendo UI Grid: if I make changes and save them, I can still cancel them afterwards. How to lock them in?

I have a Kendo UI Grid bound to a local data source. If I make some changes and click on "Save changes", and then I click on "Cancel changes", the changes are rolled back. I expected them to be "locked in" because I saved them.
Furthermore, if I make a change, save it, make another change, save again and finally cancel, both changes are rolled back.
See UPDATED fiddle, with problem and solution:
http://jsfiddle.net/q24ennne/7/
My HTML:
<div id="grid"></div>
My JavaScript:
window.gridData = [
{ id: 1, text: "Uno" },
{ id: 2, text: "Dos" },
{ id: 3, text: "Tres" },
{ id: 14, text: "Catorce" },
];
(function() {
$('#grid').kendoGrid({
toolbar: ["save", "cancel"],
editable: true,
saveChanges: function(e) {
gridData = $('#grid').getKendoGrid().dataSource.data();
$('#grid').getKendoGrid().refresh();
console.log("gridData:");
console.log(gridData);
},
columns: [{
field: "text",
title: "No."
}],
dataSource: {
data: gridData,
}
});
})();
Thanks!
You need to include a schema for your datasource that specifies which property is the id of each item. In your case this happens to also be called "id" so add this:
dataSource: {
data: gridData,
schema: {
model: { id: "id" }
}
}
The grid will then correctly track and keep your saved changes.

Adding options programmatically to plugin function

Say I had the following code:
framework7.actions([
// First buttons group
[
// Group Label
{
text: 'Here comes some optional description or warning for actions below',
label: true
},
// First button
{
text: 'Alert',
onClick: function () {
framework7.alert('He Hoou!');
}
},
// Another red button
{
text: 'Nice Red Button ',
red: true,
onClick: function () {
framework7.alert('You have clicked red button!');
}
},
],
// Second group
[
{
text: 'Cancel',
bold: true
}
]
]);
In the above instance, how would I only add the option/code for "First button" if a certain condition was true. eg (if (need_first_button) {} ). If the condition is false then we don't pass that button to the plugin.
And the same goes for "Another red button". How could I only include that option when ( if (need_red_button) {} ) was true?
Hope that makes sense.
Thanks.
Create the argument first, then modify it as needed, finally pass it to the framework function:
var params = [
// First buttons group
[
// Group Label
{
text: 'Here comes some optional description or warning for actions below',
label: true
}
],
// Second group
[
{
text: 'Cancel',
bold: true
}
]
];
if(needFirstButton){
params[0].push({
text: 'Alert',
onClick: function () {
framework7.alert('He Hoou!');
}
});
}
if(needRedButton){
params[0].push({
text: 'Nice Red Button ',
red: true,
onClick: function () {
framework7.alert('You have clicked red button!');
}
});
}
framework7.actions(params);
You can easily add new groups, just by pushing an array to params instead of params[x]
params.push([
{
text: 'New group button 1',
red: true,
onClick: function () {
framework7.alert('You have clicked red button!');
}
}
]);
The above adds a new group containing one button, but you could add more buttons to it by comma separating the objects.

Categories