Quick Batch Edit with 1 Editable Column

[Liz]

In the Grid I'm looking for a way to do a batch edit for all the fields in 1 column (the only editable field).  I've turned on Batch Edit, In Cell Editing, and Navigateable for keyboard Navigation.
Since this is a 10 key function for the most part, ideally I would like tab go to the next editable cell, which is the next row.  (As designed, tab goes to next cell - regardless of being editable)  In other applications, tab goes to the next editable cell. If all cells editable showed as a textbox in Batch Edit, that would be an option as well.

I've tried to capture the current cell, then after saving set the cell below to be editable.  But the grid synchronization isn't complete or grid is refreshing or something and the first cell in grid is selected.
Would be better if this could be connected to a Tab key from the cell being edited.

For the Save Event:
.Events(events =>
                           {
                               events.Save(
                                   @<text>
                                        function (e) {
                                            var currentCell = $("#AreaPhysicalCountGrid_active_cell");
                                            setTimeout(function () {
                                                
                                                $("#AreaPhysicalCountGrid" + @ViewBag.CycleCountID).data("kendoGrid").dataSource.sync();
                                                SelectNextEditableCell(currentCell);
                                            });
                                        }
                                    </text>);     
                           })

My function for changing to the next editable cell.
function SelectNextEditableCell(currentCell) {
    var grid = $("#AreaPhysicalCountGrid").data("kendoGrid");
    //var currentCell = $("#AreaPhysicalCountGrid_active_cell");
    
    //Get index of the td (2)
    var currCellIndex = currentCell.index();
    var cellBelow = currentCell.closest("tr").next().children().eq(currCellIndex);
    
    grid.editCell(cellBelow); //Put the cell into editMode in grid
    //grid.editRow(currentCell.parent().next());
}

Attached is a visual of the grid, the yellow cells are the only one's being edited.
Any help would be great.

[Dimiter Madjarov]

Hi Liz,


The reason for this behavior is that the Grid is rebinding when the sync method of the dataSource is called. So when you try to focus the cell from the next row it actually does no exists anymore. I would suggest you the following solution - on tab key press, save the index of the last row that was edited and bind to the dataBound event where you could focus the cell from the next row. I am adding a sample implementation.

E.g.

var isTabPressed = false;
var lastEditedRow;
var cellIndex;

$('#Grid tbody').on('keydown', 'td', function (e) {
    if (e.keyCode == 9 && $(this).hasClass("k-edit-cell")) {
        cellIndex = $(this).index();
        lastEditedRow = $(this).closest("tr").index();
        isTabPressed = true;

        var grid = $("#Grid").data("kendoGrid");
        grid.dataSource.sync();
    }
})

function dataBound(e) {
    if (isTabPressed) {
        var row = $(this.tbody).find("tr").eq(lastEditedRow + 1);
        var cell = $(row).find("td").eq(cellIndex);
        var grid = $("#Grid").data("kendoGrid");
        grid.editCell(cell);

        isTabPressed = false;
    }
}

Please let me know if this solution covers your scenario. Wish you a great day!

 

Greetings,
Dimiter Madjarov
the Telerik team

[Liz]

The keydown isn't detected, so the sync doesn't happen, and so forth.
I tried adding some alerts and nothing is detected.  I found out nothing is detected in IE 8.
Tested in Firefox and and it works there once I changed the nextrow to use next().  Otherwise the row index was coming up as 11, when editing the first row (like appending 1 instead of adding 1).
Also to note, if the cell has not changed it's value and you tab, databound is still called, but the wrong cell gets selected.

<script type="text/javascript">
    var isTabPressed = false;
    var lastEditedRow;
    var cellIndex;

    $("#AreaPhysicalCountGrid" + @ViewBag.CycleCountID + " tbody").on('keydown', 'td', function (e) {
        if (e.keyCode == 9 && $(this).hasClass("k-edit-cell")) {
            cellIndex = $(this).index();
            lastEditedRow = $(this).closest("tr").index();
            isTabPressed = true;

            alert("CellIndex= " + cellIndex);

            var grid = $("#AreaPhysicalCountGrid" + @ViewBag.CycleCountID).data("kendoGrid");
            grid.dataSource.sync();
        }
    });
</script>

.Events(events =>
          {
          events.DataBound(
                @<text>
                  function (e) {
                     alert("Databound - isTabPressed= "+ isTabPressed);
                     if(isTabPressed) {

                        //var nextrow = $(this.tbody).find("tr").eq(lastEditedRow + 1);
                        nextrow = $(this.tbody).find("tr").eq(lastEditedRow).next();
                        var cell = $(nextrow).find("td").eq(cellIndex);
                        alert("NextRow =" + nextrow.index() );

                        var grid = $("#AreaPhysicalCountGrid"+ @ViewBag.CycleCountID).data("kendoGrid");
                        grid.editCell(cell);

                        isTabPressed = false;

                     }
           }
           </text>);
})

How do I get it working for IE 8? 
BTW: My Grid is within a tab, and each tab can have a grid of it's own.  Which is why I attach an ID to the GridName.

[Liz]

After more troubleshooting I have this mostly working in both browsers.
I changed the dynamic event to use table instead of tbody and attach to the class ".k-edit-cell" instead of td.

$("#AreaPhysicalCountGrid" + @ViewBag.CycleCountID + " table").on('keydown', '.k-edit-cell', function (e) {

The save then was using the last value and not the current inputted value, so I read somewhere to wrap that with a setTimeout.

var grid = $("#AreaPhysicalCountGrid" + @ViewBag.CycleCountID).data("kendoGrid");
setTimeout(function() {
    grid.dataSource.sync();
});

Now it works in both IE8 and Firefox.
The part not working is multiple tabs, if no changes are made.  My assumption is since no data has changed, nothing needs to be saved, and the grid doesn't need to be refreshed.

Thanks for getting me mostly there.

[Dimiter Madjarov]

Hi Liz,

I am glad that you managed to solve the issue. If you need further assistance, please send us a sample project, so we could test it locally and assist you further.

Wish you a great day!
 

All the best,
Dimiter Madjarov
the Telerik team