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

Batch Mode Enter Key

6 Answers 111 Views
Grid
This is a migrated thread and some comments may be shown as answers.
jonathan
Top achievements
Rank 1
jonathan asked on 08 Sep 2014, 07:39 PM
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? 

6 Answers, 1 is accepted

Sort by
0
jonathan
Top achievements
Rank 1
answered on 09 Sep 2014, 08:59 PM
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();
}

}
0
Konstantin Dikov
Telerik team
answered on 11 Sep 2014, 11:09 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
dlogix
Top achievements
Rank 1
answered on 08 Sep 2015, 09:16 PM

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.

0
Konstantin Dikov
Telerik team
answered on 11 Sep 2015, 08:53 AM
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
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
0
dlogix
Top achievements
Rank 1
answered on 11 Sep 2015, 12:46 PM

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

0
Konstantin Dikov
Telerik team
answered on 12 Sep 2015, 08:44 AM
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
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
jonathan
Top achievements
Rank 1
Answers by
jonathan
Top achievements
Rank 1
Konstantin Dikov
Telerik team
dlogix
Top achievements
Rank 1
Share this question
or