Enable edit mode when user starts typing in input fields of detail template

2 posts, 0 answers
  1. David
    David avatar
    6 posts
    Member since:
    Sep 2015

    Posted 05 May Link to this post

    In my grid I have a details template that has input fields bound to a model.

    I want to enable the inline-edit mode of a grid ONLY when a user has a details list open and starts typing in an input filed. I tried the below method, but in order to enable the mode i need to call grid.editRow(grid.select()) twice, which makes no sense. Also, after the second editRow is called, i lose focus on the textbox i was typing in:

    // Detect input keyin event
            $('body').on('input', '.k-detail-cell .form-control:enabled', function () {
                var grid = $(this)
                            .parents('.k-grid')
                            .data("kendoGrid");

                // enable inline editing once typing has begun
                if ($(".k-grid-edit-row").length <= 0) {
                    //grid.editRow(grid.select());
                    //grid.editRow(grid.select());
                }
            });

  2. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 09 May Link to this post

    Hi David,

    Thank you for contacting us.

    A possible solution is to hook onkeypress client event of the input declarative and call editRow method once you enter some character. Please check out the following code snippet.
    columns.Bound(p => p.ProductName).ClientTemplate(
                "<input type=\"text\" class=\"templateInput\" onkeypress=\"putInEdit(this)\" />")
    .HeaderTemplate(@<text>Template</text>).Width(200);
    function putInEdit(e) {
        var grid = $("#grid").data("kendoGrid");
        grid.editRow($(e).closest("tr"))
    }

    i tried this approach and the row is put in edit mode after the first key you pressed. Regards your second question you can focus the cell for editing on edit event of the grid.
    .Events(e => e.Edit("editEvent"))
    function editEvent(e) {
        setTimeout(function () {
            e.container.find("td:eq(2) input").focus();
        });
    }

    If you still experience some issues I would appreciate if you can provide a small runnable sample which I can examine locally and provide you with alternative approach.

    I am looking forward to your reply.

    Regards,
    Kostadin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top