This is a migrated thread and some comments may be shown as answers.

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

1 Answer 117 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 05 May 2016, 09:05 PM

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

1 Answer, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 09 May 2016, 10:11 AM
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
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
Share this question
or