Questions on Kendo UI for jQuery Forum

0 answers

94 views

A short way of applying a theme to the entire page

If I include a certain kedo ui theme like default or nova or uniform in my asp.net mvc view/web page that uses kendo ui, then what would be the quickest way to apply the kendo ui theme to everything on the asp.net mvc view i.e. to the textboxes, buttons etc.?

The asp.net mvc view/web page is always applying boostrap theme to the textboxes, buttons etc, but I want to change it so that the kendo ui theme gets automatically applied to these textboxes, buttons etc.

I know that I could execute jquery code on document ready event that looks for all elements in the web page and then changes each element to a corresponding kendo ui element (example code as below), but this would involve quite a bit of coding in jquery.

 $(document).ready(function () {
        let allElements = document.querySelectorAll("button,input,textarea");
        console.log("allElements length is " + allElements.length);
        for (let i=0; i < allElements.length; i++) {
            let emt  = allElements[i];
            emt.className = "";
            console.log("element tag name is " + emt.tagName);
             if (emt.tagName === "BUTTON") {
                 $(emt).kendoButton();
            } else if (emt.tagName === "INPUT" && (emt.getAttribute("type") === "text" || emt.getAttribute("type") === "password")) {
                 $(emt).kendoTextBox();
            } else  if (emt.tagName === "TEXTAREA" ) {
                 $(emt).kendoTextArea();
             }
        }
        $(".jumbotron").kendoResponsivePanel({breakpoint:769});
        });

It would be really cool if by simply removing bootstrap.css from the web page, the entire page would automatically have the kendo ui theme applied or a single method could be called on the global kendo ui object like kendo.applyTheme(<theme-name>).

Button

Checkbox

RadioButton

TextArea

TextBox

updated question on 16 Aug 2024

0 answers

89 views

Textarea changing the cols option value doesn't seem to show any discernable difference (no change evident).

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

TextArea

asked on 07 Mar 2024

1 answer

174 views

Dynamicaly add items to a Form and use Editor

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

Editor

Form

TextArea

answered on 19 May 2023

1 answer

503 views

TextArea weird behaviour when clearing

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

TextArea

answered on 17 Apr 2023

1 answer

523 views

Text area gaining multiple inner sections

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?

TextArea

answered on 15 Jun 2022

1 answer

402 views

Restrict User to Input Alphanumeric Values On Insert Link Pop Pop

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

Editor

TextArea

answered on 15 Dec 2021

0 answers

127 views

Cross Site Script prevention on Editor , createLink pop up.

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.

Editor

TextArea

asked on 09 Dec 2021

1 answer

133 views

Stop Table wizard popup from being draggable

The Table wizard popup opened while inserting table is by-default draggable, can we stop the popup from being draggable.

Drag and Drop

TextArea

answered on 11 Nov 2021

1 answer

428 views

How to remove sub element when widget or control remove from document

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?

answered on 19 Oct 2021