Does anyone know how to change text of custom button in Kendo UI, when it is defined like:
c.Command(command =>
{command.Custom("custom").Click("Action").Text("Text");
})
in order to after click on that button, the text could change.
thanks in advance for answers.
Using your sample code,
The "custom" parameter is useless/ignored by the parser (leaving nothing means "custom")
the Click("") parameter is the name of a Javascript function that will be executed upon a click
The Text("") parameter is the default text (when Razor is executed/page loads)
c.Command(command =>{command.Custom("custom").Click("Action").Text("Text");})
you'd need a function like:
function Action(e) {
e.target[0].innerText = "Some new text for the button"
}
Related
I am having a weird problem with my v-combobox that is hard to explain but I will try my best.
When i start typing in the combobox the "list" gets filtered and if i click one of the items in the dropdown menu everything is fine.
The problem hapens if i click an item and then add another letter and directly press the send button in my form, the new charachters in my combo box is not passed to my axios request. If i instead change to another field all the information in my combobox is passed to the axios.post request.
But the weirdest part is that if i put:
console.log(this.shortname)
The output contains all characters in the combobox but not in the axios.post request.
Below is my code.
// TEMPLATE
<v-combobox v-model="shortname" color="forms" :items="shortnames" autocomplete="off"></v-combobox>
// SCRIPT
sendForm(){
console.log(this.shortname)
axios.post('/endpoint, {
shortname: this.shortname
})
.then((response) => {})
}
So in the sendForm() function if i type "Richa" in the combobox and click the "Richard" listitem the
console.log(this.shortname) // outputs "Richard" and so will axios request
But if i type "Richa" and click the "Richard" listitem and then ADD "sdf" (Richardsdf)
the
console.log(this.shortname) // outputs "Richardsdf" but axios request is still "Richard"
However if i change fields after I add "sdf" axios.post will have "Richardsdf"
Im using vuetify version 2.4.2 and same behaviour on chrome and safari
My question is if there is a way to be able to get all added info into the combobox without having to change input fields?
// Best regards.
Found the solution.
I added id="targetInput" and #update:search-input="updateTargetInput" and removed the v-model to combobox
<v-combobox id="targetInput" #update:search-input="updateTargetInput" :items="shortnames" outlined :rules="shortnameRules"></v-combobox>
and in the methods i added
methods: {
updateTargetInput(currentValue){
this.shortnameone = currentValue
console.log(this.shortnameone)
},
}
Credits go to PradeepNooney
https://github.com/vuetifyjs/vuetify/issues/4679#issuecomment-682456398
I'm trying to create a kendo prompt dialog box, that can take a large text with 200 characters.
The kendo prompt's are predefined with an <input> box. How can I change it from input to textarea?
Yes, you can but you have to hack it a bit.
I wanted to use a Kendo Prompt box to enter a generic "comments" field and the stock text input wasn't optimal due to the size of my comments field, 250 bytes.
Here's how I did it.
In my JavaScript file I defined the prompt as such:
function editComments(comments) {
return $("<div></div>").kendoPrompt({
title: 'Image Comments',
value: comments,
content: "<textarea class='k-textbox editComments' maxlength='250'>" + comments + "</textarea>",
}).data("kendoPrompt").open().result;
}
Then when a user presses my comments button, I execute the widget like so:
if (buttonActionType === 'Comments') {
var comments = clickedItem[0].children[1].innerText;
window.editComments(comments).then(function (data) {
console.log(data);
}, function () {
alert("Cancel entering value.");
});
}
You will need to hide the regular text input element that this widget defaults to, otherwise you'll see the textarea input above a text input.
In CSS:
.k-prompt-container .k-textbox {
display: none;
}
Yes you can. Here is an example with a treeview instead of the normal text input
https://demos.telerik.com/kendo-ui/dialog/treeview-integration.
In this example the property content: does the trick.
You can't. You have to create your own dialog and provide the textarea by yourself. The shortcut kendo.prompt() is meant to be as simple as possible, there is no room for customizations.
Besides: It is perfectly possible to enter more than 200 characters. It's not very nice in an input but possible.
I am using kendo grid and its build-in functionality for creating and updating items.
I'm looking for a way to change Editor labels (title and buttons Update/Cancel).
I found an answer here (Change Button text in Kendo Ui Grid Popup Window) where OnaBei explains how to change title.
However, I still cannot figure out the way to change button names based on whether item is being added or being edited. The same with title, is it a way to change it based on "create"/"update" state?
I assume that it can be done with javascript, but it will probably be a hack and dirty solution.
This can be done in the edit event of the grid. The model event argument has a isNew method which will return true in "create" state. Here is some sample code:
edit: function(e) {
var title = "Edit mode";
if (e.model.isNew()) {
title = "Insert mode";
}
var wnd = e.container.data("kendoWindow");
wnd.title(title);
}
And a live demo: http://jsbin.com/USUpAZUT/1/edit
I'm using CKEditor and I wrote a plugin that pops up a the CKEditor dialog.
I need to re design the ok button and add to the footer more elements like textbox and checkbox but it's seems to be to complicated to do so, so I've hide the footer part and created a uiElement in the dialog content with all what I need but now what I want is to trigger the okButton in the hidden footer but I can't find a way to do it..
Anyone?!
There may be a better way, but here's how I'm doing it:
var ckDialog = window.CKEDITOR.dialog.getCurrent(),
ckCancel = ckDialog._.buttons['cancel'],
ckOk = ckDialog._.buttons['ok'];
ckOK.click();
The trick is to get the button and then use the CKEditor Button API to simulate the click. For some reason, I was unable to call dialog.getButton('ok') because getButton is undefined for some reason. My method digs into the private data, which I doubt is the best way to do it.
From the onShow event (when defining the dialog), I was able to get the ok button like the docs indicate:
onShow: function () {
var okBtn = this.getButton('ok');
...
}
Here's the Button API: http://docs.ckeditor.com/#!/api/CKEDITOR.ui.dialog.button, and you can access the dialog API there too (I'm assuming you've already been there!!!)
You might try to add this line in your plugin.js.
var dialog = this.getDialog();
document.getElementById(dialog.getButton('ok').domId).click();
In my custom plugin, i just hide the "ok" button instead of the whole footer.
Below is a part of my plugin.js statements.
{
type : 'fileButton',
id : 'uploadButton',
label : 'Upload file',
'for' : [ 'tab1', 'upload' ],
filebrowser :
{
action : 'QuickUpload',
onSelect : function(fileUrl, data){
var dialog = this.getDialog();
dialog.getContentElement('tab1','urlTxt').setValue(fileUrl);
document.getElementById(dialog.getButton('ok').domId).click();
}
}
}
btw, i'm using CKEditor 4.0 (revision 769d96134b)
I need to be able to make the URL input field in the Link Dialog window readonly or disable it. The field gets populated when the user selects a file from the server.
Another user posted this link as a solution, http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.uiElement.html#disable but there is no example and I can't figure out how to implement it.
In the onLoad handler of the dialog you can disable it this way:
this.getContentElement("info", "url").disable();
this is what I ended up doing. I wrote it in my js file instead of the plugin file, but I dont think that would make a difference. I am using inline ckeditor version 4.0.2
CKEDITOR.on('dialogDefinition', function(event) {
var dialogName = event.data.name;
var dialogDefinition = event.data.definition;
//some code here
if(dialogName == 'flash'){ // flash dialog box name
//some code here
dialogDefinition.onShow = function () {
this.getContentElement("info","width").disable(); // info is the name of the tab and width is the id of the element inside the tab
this.getContentElement("info","height").disable();
}
}
});
You can disable url field by just one line
CKEDITOR.dialog.getCurrent().getContentElement('info','txtUrl').disable()
I got it. I added this.getInputElement().setAttribute( 'readOnly', true ); to the onload funciton in ckeditor\plugins\links\dialogs\link.js. Before I was adding it to ckeditor\_source\plugins\links\dialogs\link.js. I'd still like an example of how to use the CKEDITOR.ui.dialog.uiElement disable feature, if anyone has one.