Enter Key Client Side

[Lance]

Hi,
Our user base requires single column grids for data entry purposes. The requirement is that once they click the first row in the radgrid, they can type in the value, hit enter, and focus moves to the next cell (in this case, the next row because there is only one cell per row), where the cell is then automatically in edit mode and the user can start typing it's value... they hit enter, it moves focus to the next row, etc. They need to be able to use the enter key for this functionality, not the tab key. I've seen some excel-like controls out there that may do this, but we have spent the money on this suite already and I am hopeful that you can provide me the needed guidance.
I have already written code to save changes once all of the client side data has been entered. This is a master-content page setup.

Thanks
​

[Lance]

Is this site not maintained by support people anymore? 

[Konstantin Dikov]

Hello Lance,

Depending on your exact scenario and the EditMode that you are using, the implementation will differ..

However, since you need to have this behavior on client-side only, the best approach will be to use Batch Editing, to enable the keyboard navigation of the grid and handle the OnBatchEditClosed event to move to the next row. 

Following is a simple example with Batch Editing:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function editClosed(sender, args) {
            var row = args.get_row();
            var batchManager = sender.get_batchEditingManager();
            var nextRow = row.parentElement.rows[row.rowIndex];
            if (nextRow) {
                setTimeout(function () {
                    batchManager.openCellForEdit(nextRow.cells[0]);
                })
            }
        }

    </script>
</telerik:RadCodeBlock>

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" Width="300px">
    <MasterTableView EditMode="Batch">
    </MasterTableView>
    <ClientSettings AllowKeyboardNavigation="true">
        <ClientEvents OnBatchEditClosed="editClosed"/>
    </ClientSettings>
</telerik:RadGrid>

And the code-behind:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("Value", typeof(int));
    for (int i = 0; i < 5; i++)
    {
        table.Rows.Add(i);
    }

    (sender as RadGrid).DataSource = table;
}

On a side note, the forum is not an official support channel, but we are doing our best to handle all posts in a timely manner. If you need a 24h response time, you could always open a regular support ticket.


Regards,
Konstantin Dikov
Telerik

 

 

[Lance]

Oh I see, Konstantin. My apologies for the misunderstanding. Yes I am using batchedit mode.
I will implement this solution on a grid now and test. Is there a client side object model reference which I can see all of the available client side events, methods and properties for each of those objects, such as the batchManager and the masterdataview?
Thank you for your help. 

[Konstantin Dikov]

Hi Lance,

Detailed information for the BatchEditingManager and the GridTableView client-side objects could be found in the following help articles:

• RadGrid - BatchEditingManager 
• GridTableView class members

Best Regards,
Konstantin Dikov
Telerik