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

Radgrid: is it possible to do Excel like Editing

23 Answers 985 Views

Grid

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

23 Answers, 1 is accepted

answered on 25 Jun 2012, 11:16 PM

It's amazing that you should have this question now, as I've been struggling with this on and off for during this same week.

We have a grid where only some rows are have null cells, so we want to put them into edit mode one by one, moving on to the next row that requires attention when the last cell has lost focus.

So for example: row 5 has three cells with a RadDatePicker in each. The user enters a date in the first and we do an onBlur or LostFocus kind of event to go to the second, then on to the third. When the user enters data in the third cell and hits tab, we want the cursor to go to maybe row 11, first cell, to repeat the entry.

Now, I didn't want to do it like this but my client is insisting on it. I'd maintain this isn't standard. But when the user says they want it to work like Excel, it's tough to argue. I was originally doing this with EditMode=PopUp and EditForms. It worked great "functionally", but the user admin doesn't want to click Update on every row, he wants the entry to flow from one row to the next like Excel, without needing to click Update or to click each row.

My approach so far is to put a row into edit mode on double click using EditMode InPlace. But I don't know how to get each date picker to move on to the next when focus is lost. I'm thinking I should use the SelectedDateChanged event, and then set the next picker.Focus(). On the last one, essentially force a grid_UpdateCommand, and then put the next eligible row into edit mode.

If this doesn't work, I might put all eligible rows into edit mode, have the last picker in row X set focus to the first picker in row Y, and do that until the last row in the grid. After the user gets down to the last row, the focus will reset back up to the first eligible row. They can click a submit button (which is available all the time anyway). I don't know if that will create the user experience that the client wants.

So Meva, does that describe your scenario as well?

And for anyone here, do you have an alternative solution to the above?

Thanks!

answered on 28 Jun 2012, 10:52 AM

Hello Meva,

Please check out the following online example which demonstrates RadGrid edited with batch server updates:
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/clienteditbatchupdates/defaultcs.aspx

Also you could check out the excel-like grid implementation demonstrated on the following link, however it does not support the copy & paste functionality. The example only demonstrates the basic functionality for showing cells and navigate between them like in MS excel. Also all functionalities is achieved by custom code and it has some limitations.
To achieve the desired functionality you could try selecting all textboxes' text, from the rows and paste selection into the textbox where you can paste the text(or examine what's available on the clipboard), then you could update datasource with a new data and refresh the RadGrid after that.
Also you could check out the following article:
http://ericphan.info/blog/2010/1/25/cross-browser-copy-and-paste-with-zeroclipboard-updated.html
However note that this is not a supported scenario.

I hope this helps.

Kind regards,
Radoslav
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 14 Aug 2012, 07:14 AM

Hi Thierry,

The excel-like RadGrid code library demonstrates how to achieve desired functionality concerning navigation between cells using the arrow keys, however for the second requirement edit of records on focus you need to implementing it by writing some custom logic, because the RadGrid does not support build-in the desired functionality. As a start point you could use the excel –like grid code library and the following example. Into the examples the update is performed on external button click or moving focus on another row, however in your case you could apply a similar logic when the cell loses its focus.

All the best,
Radoslav
the Telerik team

answered on 29 Mar 2013, 08:05 AM

Hello Sheeraz,

To achieve the desired functionality you need to fire command from the client side. You can do that via button with set CommandName or with the client side fireCommand function of the masterTableView.
Then on server side you can add additional check into the RadGrid1_ItemCommand for handling the delete command and execute sql query for deleting row.

protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)

{

saveDataInDataTable();

switch (e.CommandName)

{

…

case "Delete":

{

// Delete the row

}

break;

default:

break;

}

Please give it try and let me know if you experience any problems.

All the best,
Radoslav
the Telerik team

answered on 03 Apr 2013, 09:18 AM

Hi Sheeraz,

You can handle that the delete key is pressed into the onKeyDown client side function. You need to add an additional case into the switch statement which handle the delete button:

function onKeyDown(sender, eventArgs) {

var keyCode = eventArgs.keyCode;

switch (keyCode) {

// add case for delete button

...

}

Then you can find the grid row by iterating over DOM tree and get the corresponding grid DataItem by using $find(“IdOfTheRow”). Then you can use getDataKeyValue and fire the command to server with argument the founded value. Also please note that in order to use getDataKeyValue you need to add a key to the RadGrid.MasterTableView.ClientDataKeyNames. For example:

<telerik:RadGrid ID="RadGrid2" runat="server" …>

<MasterTableView ClientDataKeyNames="ID" ...

Then on server side into the ItemCommand you can perform delete operation over the database and delete the row with founded key.

I hope this helps.

All the best,
Radoslav
the Telerik team

answered on 12 Apr 2013, 06:31 AM

Hi Radoslav,

I tried to do that but its not working might be I am doing something wrong.
Also I could not find the selected row because grid is not allowing me to select row, only cell can be selected.
I need to know why its not allowing me to select complete row.

I want to select the row and then delete it.
I have written the Delete Function but not working.

function DeleteRow() {
var grid = $find(radGridId)
var id = grid.get_masterTableView().get_selectedItems()[0].row.getDataKeyValue("ID");
grid.get_masterTableView().fireCommand("DeleteRow", id);
}

Could you please send working example for handling delete key for deleting row.

Regards
Sheeraz Raza

answered on 16 Apr 2013, 07:13 AM

Hi Sheeraz,

The excel-like grid code library does not have implemented selection. However in a standard scenario to enable selection you need to set AllowRowSelect to "true":

<ClientSettings>

<Selecting AllowRowSelect="True"></Selecting>

</ClientSettings>

Into the excel-like grid in order to handle the delete key and to delete the entire row you need to perform following steps:
Handle the following case into the onKeyDown and fire command:

function onKeyDown(sender, eventArgs) {

var keyCode = eventArgs.keyCode;

switch (keyCode)

{

// the 46 is the code of delete key

case 46:

{

$find(radGridId).get_masterTableView().fireCommand("DeleteRow", selectedCellId);

}

case 8:

{

Add EmployeeID as a DataKeyNames of the MasterTableView:

<MasterTableView EditMode="InPlace" CommandItemDisplay="Top" AutoGenerateColumns="true" DataKeyNames="EmployeeID">

Into the RadGrid1_ItemCommand add following case which handles the DeleteRow fired when the delete key is pressed:

switch (e.CommandName)

{

case "DeleteRow":

{

int id = Convert.ToInt32((e.Item as GridDataItem).GetDataKeyValue("EmployeeID").ToString());

// delete row with ID = id

}

break;

case "InsertNewRow":

{

I hope this helps.

Kind regards,
Radoslav
the Telerik team

answered on 18 Apr 2013, 12:03 PM

Example.zip

Hello Sheeraz,

I am sending you a modified version of the excel-like code library example please check it out and let me know if it helps you.
To test the example just put the focus into some editor and press the delete key.

Also please note that into the excel-like grid example the RadGrid cannot be selected, because all columns are in edit mode and all editors are with 100% width.

Looking forward for your reply.

All the best,
Radoslav
the Telerik team

answered on 01 Jun 2015, 06:25 AM

Hi Wissal,

Unfortunately the desired functionality is not supported in the RadGrid control. You can try achieving it by using a custom logic based on the cell selection functionality:
http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/selecting/cell-selection/defaultcs.aspx
In this case you can select a cell and drag with mouse over the other cells. When client side OnCellSelected event is fired to add values into all selected cells. However please note that supporting custom scenarios is out of our support scope.

Regards,
Radoslav
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