How to change input to textarea in popup editor

[Connections Academy Developer]

I am using popup editing in my grid. By default the popup editor renders input type=text elements. Is it possible to change that so it would render textarea elements instead?

[Dimo]

Hello,

You can use a custom editor.

Greetings,
Dimo
the Telerik team

[Connections Academy Developer]

kendoOptions = {

    dataSource: {

        schema: {

            model: {

                id: 'id',

                fields: {

                    id: { editable: false },

                    name: { editable: false },

                    zipCodes: { editable: true }

                }

            }

        }

    },

    pageable: false,

    columns: [

        { field: 'id', hidden: true },

        { field: 'name', title: 'Location' },

        { field: 'zipCodes', title: 'Zip Codes', width: 250, editor: zipCodesEditor },

        { command: 'edit', width: 50, attributes: { style: 'text-align: center'} }

    ],

    editable: 'popup',

    sortable: true,

    scrollable: false

};

 

var zipCodesEditor = function (container, options) {

    $('<textarea data-bind="value: ' + options.field + '"></textarea>').appendTo(container);

};

This is my current implementation. 

All the examples I see are for inline editing. This isn't working for popup editing. Am I missing something?

[Dimo]

Hi,

Here is an example, which works, please compare with your implementation. It is based on the demo provided earlier and also works with inline and popup editing.

<div id="grid"></div>

$(document).ready(function () {
    var dataSource = new kendo.data.DataSource({
       pageSize: 20,
       data: products,
       autoSync: true,
       schema: {
           model: {
             id: "ProductID",
             fields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
                UnitPrice: { type: "number", validation: { required: true, min: 1} }
             }
           }
       }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 430,
        toolbar: ["create"],
        columns: [
            { field:"ProductName",title:"Product Name", width: "160px", editor: textareaEditor },
            { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
            { command: "destroy", title: " ", width: "90px" }],
        editable: true
    });
});

function textareaEditor(container, options) {
    $('<textarea data-bind="value: ' + options.field + '" cols="20" rows="4"></textarea>')
        .appendTo(container);
}

Regards,
Dimo
the Telerik team

[Piyush Bhatt]

Just to complete above thread -- in the textarea use 'name' property:


var textEditorInitialize = function(container, options) {    $('<textarea name="' + options.field + '" style="width: ' + container.width() + 'px;height:' + container.height() + 'px" />')    .appendTo(container);};

[Michael]

Hi,

I am trying to achieve something similar in MVC. How would I go about doing this for a single field while using the grid popup edit mode?

[Eyup]

 Thank you for writing to us.

Yes, this is pretty straightforward with the Grid's capability. All you need to do is to:

1. Create a custom Editor Template
2. Assign the UIHint() data attribute in your Model definition
3. Include a .Kendo().TextAreaFor(m=>m) in the template

All of these steps are implemented and demonstrated here:
https://demos.telerik.com/aspnet-mvc/grid/editing-custom