phoenixTine
phoenixTine

Reputation: 15

Kendo-prompt: Can you change the kendo prompt popup to display a text area instead of a <input>

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?

Upvotes: 1

Views: 2511

Answers (3)

deaddancer
deaddancer

Reputation: 564

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

Upvotes: 2

CMartins
CMartins

Reputation: 3293

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.

Upvotes: 1

Carsten Franke
Carsten Franke

Reputation: 1669

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.

Upvotes: -1

Related Questions