How to change input to textarea in popup editor

5 posts, 0 answers
  1. Connections Academy Developer
    Connections Academy Developer avatar
    63 posts
    Member since:
    May 2005

    Posted 27 Feb 2013 Link to this post

    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?
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 28 Feb 2013 Link to this post

    Hello,

    You can use a custom editor.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Connections Academy Developer
    Connections Academy Developer avatar
    63 posts
    Member since:
    May 2005

    Posted 28 Feb 2013 Link to this post

    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?
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 01 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Piyush Bhatt
    Piyush Bhatt avatar
    17 posts
    Member since:
    Oct 2014

    Posted 20 Oct 2014 Link to this post

    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);};
Back to Top
Kendo UI is VS 2017 Ready