Editing mode for kendogrid selected cell

Question

I have a kendo grid with 1 editable column, when I execute a certain javascript function I want to enable editing for the currently selected cell. The point is that this happens programmatically and not by clicking the cell. What the code currently does is select the cell that needs to be set to editing mode but doesn't enable the editing mode itself.

Edit (fix):

I had to change the index to the cell selection to +1 while the row selection stayed the same (probably because the header counts as a cell or something). There were also functions that took away the focus from the editing field which closed it instantly.

JS:

$('#txtBarcode').keydown(function (e) {
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    if (key == 13) {

        var grid = $("#PickListDetailGrid").data("kendoGrid");
        var dataSource = $("#PickListDetailGrid").data("kendoGrid").dataSource;
        var allData = dataSource.data();
        var code = this.value;

        $.each(allData, function (index, item) {
            if (item.ArticleID == code) {
                console.log("index :" + index);                    
                var cell = grid.select("tr:eq(" + index + ") td:eq(" + (5) + ")");
                grid.editCell(cell); 
            }
        })
    }
});

Grid:

    @(Html.Kendo().Grid<TelerikMvcApp1.Models.PickListLineViewModel>()
                        .Name("PickListDetailGrid")
                        .Columns(columns =>
                        {
                            columns.Bound(c => c.ArticleName);
                            columns.Bound(c => c.ArticleID);
                            columns.Bound(c => c.PickID);
                            columns.Bound(c => c.LineNum);
                            columns.Bound(c => c.Quantity);
                            columns.Bound(c => c.PickedQuantity).HtmlAttributes(new { @id = "test" });
                            columns.Bound(c => c.Status);
                        })
                        .Editable(editable => editable.Mode(GridEditMode.InCell))
                        .HtmlAttributes(new { style = "height: 75%;" })
                        .Scrollable()
                        .Groupable()
                        .Sortable()
                        .Selectable()
                        .RowAction(row =>
                        {
                            if (row.DataItem.Quantity == row.DataItem.PickedQuantity)
                            {
                                row.HtmlAttributes["class"] = "k-state-selected";
                            }
                        })
                        .ToolBar(toolbar =>
                        {
                            toolbar.Custom().Text("Return to Picklists")
                            .HtmlAttributes(new { @style = "color:black; width:100%; height:50%;" })
                            .Action("Picklist", "PickList");
                        })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Events(events => events.Error("error"))
                .Model(model => model.Id(i => i.PickID))
                .Model(model =>
                {
                    model.Field(f => f.PickID).Editable(false);
                    model.Field(f => f.ArticleID).Editable(false);
                    model.Field(f => f.LineNum).Editable(false);
                    model.Field(f => f.Quantity).Editable(false);
                    model.Field(f => f.ArticleName).Editable(false);
                    model.Field(f => f.Status).Editable(false);
                    model.Field(f => f.PickedQuantity).Editable(true);
                })
                .Read(read => read.Action("PickLines_Read", "PickList", new { name = "id", id = Model.FirstOrDefault().PickID }))
                .Update(update => update.Action("submitPickList", "PickList"))
        )
      .Events(events => events
        .Change("onChange")
        .Edit("onEdit")
        .Save("onSave"))
    )

On Edit:

function onEdit(e) {
    e.container.find("input").bind("focus", function () {
        if (this.style.display != "none") {
            var element = this;
            setTimeout(function () {
                element.select();
            })
        }
    })

    setTimeout(function () {
        document.activeElement.select();
    })
}

Przemysław Kleszcz Przemysław Kleszcz · Accepted Answer · 2017-09-11T12:08:15

Instead:

var cell = grid.select("tr:eq(" + index + ") td:eq(" + (5) + ")");
grid.editCell(cell);

Try:

grid.editCell("tr:eq(" + index + ") td:eq(" + (5) + ")");

Editing mode for kendogrid selected cell

1 Answers