Batch Mode Enter Key

[jonathan]

I have a radgrid in batch mode and would like to make it so when the enter key is pressed in a certain column it will go to the next row (same column) .  Much like you would do in Excel only we don't want to save changes till the user says too.  Is this possible? 

[jonathan]

rephrase to hopefully get help....

So I have figured out how to catch the keypress (I assume this has to be done in javascript),  stop it from doing stuff automatically,  get the current row and column. 
How do I go to the same field in the next row and get it to give me a little batch mode red flag on the just edited field.

Here is what I have so far.

​ function KeyPress(sender, eventArgs) {
var kp = eventArgs.get_keyCode();

if (kp == "13") {

var e = eventArgs.get_domEvent().rawEvent;
e.returnValue = false;
e.cancelBubble = true;

if (e.stopPropagation) {
e.preventDefault();
e.stopPropagation();
}
var masterTableView = $find("<%= ordergrid.ClientID %>").get_masterTableView();
var cindex = sender._batchEditing._currentlyEditedCellInfo.cell.cellIndex; //index of the current column
var rindex = sender._batchEditing._currentlyEditedCellInfo.row.rowIndex;
var columns = masterTableView.get_columns();
var uniqueName = columns[cindex].get_uniqueName();
}

}

[Konstantin Dikov]

Hello Jonathan,

Although RadGrid does not provide any built-in functionality for achieving such requirement, for your convenience, following is a simple example which should result in moving to the next row's cell on pressing the Enter key:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var grid;

        function pageLoad() {
            grid = $find("<%=RadGrid1.ClientID%>");
        }

        function keyDown(sender, ev) {
            if (ev.keyCode == "13") {
                var grid = $find(sender.id);
                var dataItems = grid.get_masterTableView().get_dataItems();
                var batchManager = grid.get_batchEditingManager();
                var currentCell = batchManager.get_currentlyEditedCell();
                if (currentCell) {
                    var cellIndex = currentCell.cellIndex;
                    var currentDataItem = $find(currentCell.parentElement.id);
                    var currentRowIndex = currentDataItem.get_itemIndexHierarchical();
                    if (currentRowIndex < dataItems.length - 1 && dataItems[parseInt(currentRowIndex) + 1]) {
                        var nextCell = dataItems[parseInt(currentRowIndex) + 1].get_element().cells[cellIndex];
                        batchManager.openCellForEdit(nextCell);
                    } else {
                        batchManager._tryCloseEdits(grid.get_masterTableView());
                    }
                }

                if (ev.preventDefault) {
                    ev.preventDefault();
                    ev.stopPropagation();
                }
                else {
                    ev.cancelBubble = true;
                    event.returnValue = false;
                }
            }
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" Width="500px" onkeydown="keyDown(this, event)">
    <MasterTableView EditMode="Batch" CommandItemDisplay="Top">
    </MasterTableView>
</telerik:RadGrid>

And the dummy data:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("FirstName", typeof(string));
    table.Columns.Add("LastName", typeof(string));
    table.Columns.Add("Percentage", typeof(double));
    table.Columns.Add("BoolValue", typeof(Boolean));
    for (int i = 0; i < 5; i++)
    {
        table.Rows.Add(i, "FirstName" + i, "LastName" + i, 20 + i, i % 2 == 0);
    }

    (sender as RadGrid).DataSource = table;
}

Hope this meets your exact requirements.


Regards,
Konstantin Dikov
Telerik

 

 

[dlogix]

Hello Konstantin,

 I have implemented the above solution and it is working fine except when I change the value in a cell and press enter it reverts back to original value.

[Konstantin Dikov]

Hi,

Can you please try with the following modification of the code and see if it will resolve the issue on your side too:

if (currentCell) {
    var cellIndex = currentCell.cellIndex;
    var currentDataItem = $find(currentCell.parentElement.id);
    var currentRowIndex = currentDataItem.get_itemIndexHierarchical();
    batchManager._tryCloseEdits(grid.get_masterTableView());
    if (currentRowIndex < dataItems.length - 1 && dataItems[parseInt(currentRowIndex) + 1]) {
        var nextCell = dataItems[parseInt(currentRowIndex) + 1].get_element().cells[cellIndex];
        batchManager.openCellForEdit(nextCell);
    }
}

I am looking forward to your reply with the result.


Regards,
Konstantin Dikov
Telerik

[dlogix]

Hello Konstantin,

I tried with modified code but it did not fix the issue. I am creating the grid programmatically in code with custom classes for GridTemplateColumn, ItemTemplate and EditItemTemplate.

Thanks

Kashif

[Konstantin Dikov]

Hello Kashif,

The private _tryCloseEdits method will force the grid to close the currently edited cells and will persist the changes. Can you please confirm that the values are persisted if you change a value and manually close the cell by clicking on a different cell with the mouse? If the same issue is observed in that scenario I would suggest that you revise your GridTemplateColumn.

However, if clicking on another cell with the mouse persists the changes, I could suggest that you try the following code:

if (currentCell) {
    var cellIndex = currentCell.cellIndex;
    var currentDataItem = $find(currentCell.parentElement.id);
    var currentRowIndex = currentDataItem.get_itemIndexHierarchical();
    batchManager._tryCloseEdits(grid.get_masterTableView());
    if (currentRowIndex < dataItems.length - 1 && dataItems[parseInt(currentRowIndex) + 1]) {
        var nextCell = dataItems[parseInt(currentRowIndex) + 1].get_element().cells[cellIndex];
        setTimeout(function(){
            batchManager.openCellForEdit(nextCell);
        })
    }
}

If any further assistance is needed on this matter, I would recommend that you open a regular support ticket and attach a sample, runnable project (preferably with dummy data), so we can test it locally.



Kind Regards,
Konstantin Dikov
Telerik