Given this code:
cols - API Reference - Kendo UI TextArea - Kendo UI for jQuery (telerik.com)
If I change the cols from 30 to 3 it doesn't seem to change the width of the textarea? Isn't the width of the textarea supposed to decrease?
<textarea id="description"></textarea>
<script>
$("#description").kendoTextArea({
rows:20,
cols:30,
resizable: "vertical"
})
</script>
Is this a bug?
Thanks!
George
Hi everyone,
I have a group of cascading Dropdownlists. After selecting the values I want to create a Form and add the choosen values as items to the form.
Some Items need to be a WYSIWYG-Editor, so I try to add the kendoEditor as custom editor:
var data = {};
var items = [];
sender.dataItem.content.forEach((content) => {
data[content.key] = content.text;
if (content.type == 'TextArea') {
items.push({
field: content.key,
label: content.displayName,
editor: function(container, options) {
$("<textarea class='k-textarea' name='" + content.key + "' required data-bind='value: " + content.key + "'></textarea>")
.appendTo(container)
.kendoEditor();
}
});
} else {
items.push({
id: sender.dataItem.name + '_' + content.key,
field: content.key,
label: content.displayName,
validation: { required: true},
editor: content.type
});
}
});
var validationSuccess = $("#validation-success");
$("#contentForm").kendoForm({
orientation: "horizontal",
formData: data,
items: {
type: "group",
label: sender.dataItem.displayName,
items: items
},
validateField: function (e) {
validationSuccess.html("");
},
submit: function (e) {
e.preventDefault();
validationSuccess.html("<div class='k-messagebox k-messagebox-success'>Änderungen gespeichert");
},
clear: function (e) {
validationSuccess.html("");
}
});
sender.dataItem looks like this:
{
"name": "maintenance",
"displayName": "Wartungsseite",
"content": [
{
"displayName": "Überschrift",
"key": "header",
"text": "Wartungsarbeiten",
"type": "TextBox"
},
{
"displayName": "Wartungstext",
"key": "text",
"text": "Wir arbeiten für Sie! <br /><br />Aktuell ist unser Kundenportal \"Meine WSW\" aufgrund von gesetzlichen Wartungsarbeiten für kurze Zeit offline.<br /><br />Gerne können Sie uns in der Zwischenzeit mit Angabe Ihrer Kunden- und Vertragskontonummer eine Email an <a href=\"mailto:meinewsw@wsw-online.de\">meinewsw(at)wsw-online.de</a> schreiben. <br /><br /> <br />Vielen Dank für Ihr Verständnis!<br /><br />Ihr WSW-Team",
"type": "TextArea"
}
]
}
Though the items are added to the form, the item for key "text" is a simple input of type text and no editor.
Kind regards
Timo Wied
Hi,
We've initialised a TextArea using the following code:
$("#textArea").kendoTextArea({
label: "Label",
rows: 4,
maxLength: 1000
});
And try to clear it using the following code:
const textArea = $("#textArea").kendoTextArea().data("kendoTextArea");
textArea.value("");
textArea.trigger("change");
It works but it looks like it resets any configuration you set like rows and maxLength and adds extra markup.
Here's the markup before the clear:
<span class="k-input k-textarea k-input-solid k-input-md k-rounded-md k-resize-none" style=""><textarea id="textbox-notes" data-role="textarea" aria-disabled="false" maxlength="1000" rows="4" class="!k-overflow-y-auto k-input-inner" autocomplete="off" style="width: 100%; resize: none;"></textarea></span>
And after:
<span class="k-input k-textarea k-input-solid k-input-md k-rounded-md k-resize-none" style=""><span class="k-input k-textarea !k-overflow-y-auto k-input-inner k-input-solid k-input-md k-rounded-md k-resize-none" style="width: 100%; resize: none;"><textarea id="textbox-notes" data-role="textarea" aria-disabled="false" rows="1" class="!k-overflow-y-auto k-input-inner" autocomplete="off" style="width: 100%; resize: none;"></textarea></span></span>
Note the rows have reset to 1 and maxlength is missing. Also, there is an extra SPAN around the original SPAN and TEXTAREA. We tried setting the properties manually after the change trigger using:
$("#textArea").prop("rows", "4");
$("#textArea").prop("maxlength", "1000");
This works okay but obviously doesn't fix the extra markup.
Is this the correct way to clear a TextArea? Or do we just reset the value in jQuery directly?
Thanks
I have a grid with an edit button which opens a modal window
Inside that modal window I have a text area
Each time I set the value, it indents
$("#mytextarea").kendoTextArea().data('kendoTextArea').value("A new comment here");
It starts to do this which each successive setting of the value.
<span class="k-input k-textarea k-input-solid k-input-md k-rounded-md" style="width: 100%;">
<span class="k-input k-textarea !k-overflow-y-auto k-input-inner k-input-solid k-input-md k-rounded-md" style="width: 100%; resize: none;">
<span class="k-input k-textarea !k-overflow-y-auto k-input-inner k-input-solid k-input-md k-rounded-md" style="width: 100%; resize: none;">
<span class="k-input k-textarea !k-overflow-y-auto k-input-inner k-input-solid k-input-md k-rounded-md" style="width: 100%; resize: none;">
<textarea id="setup-deliverymethod-dialog-comments-textarea" style="width: 100%; resize: none;" data-role="textarea" aria-disabled="false" rows="1" placeholder="Comments" class="!k-overflow-y-auto k-input-inner" autocomplete="off"></textarea>
</span>
</span>
</span>
</span>
Am I setting the textarea value incorrectly?
How to restrict user to input only Alphanumeric Values into the fields "Text", and "ToolTip" when user clicks "Insert Link" option on Kendo tool Editor (CK Editor).
Hi Team,
We recently ran security scan on our web application which using "https://kendo.cdn.telerik.com/2020.2.513" Version.
and we encountered one scenario where Cross Site script executed even though we implemented encode and decode.
Scenari: User opens editor -> Clicks Insert Link Option.
We filled URL, Text inputs and for Tooltip fields we input Cross Site Script i.e (">">">"><script>alert(document.cookie);</script>)
and we clicked INSERT.
Basically the Tooltip field will break the anchor tag title parameter and script will execute.
Though we have implemented HTML encode and Decode we still experiencing this alert popup with cookie data while encode and Save and also Decode and Show.
Thanks In Advance.
Please let us know is there any inbuilt functionality in Kendo to handle this type of issue.
I use Kendo UI for build my single page web application. My application will add a tab when user click some menu if this menu will not in a tab list. I have a problem with my application when i use app in a period of time, the app gradually slow and slower. I found the reason is because when i add a new tab (with some kendoUI widget), the document will create some sub element in the end of document and i close the tab the widget in tab removed but the sub element will alive so the size of document increase by time used.
Example 1 sub element:
<div class="k-list-container k-popup k-group k-reset" id="pfe6ef2c-9926-45e3-ac6d-8dcb5bb0855b-list" data-role="popup" style="display: none; position: absolute;" aria-hidden="true"><div class="k-group-header" style="display:none"></div><div class="k-list-scroller" unselectable="on"><ul unselectable="on" class="k-list k-reset" tabindex="-1" aria-hidden="true" id="pfe6ef2c-9926-45e3-ac6d-8dcb5bb0855b_listbox" aria-live="off" data-role="staticlist" role="listbox"><li tabindex="-1" role="option" unselectable="on" class="k-item k-state-focused" aria-selected="false" data-offset-index="0" id="dd8303f9-e1d7-4a3a-8e57-fb1478a5d9e0">20</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="1">35</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="2">50</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="3">100</li></ul></div><div class="k-nodata" style="display:none"><div>No data found.</div></div></div>
Is there any solution to when remove the widget from document, the sub element removed too?