Radgrid: is it possible to do Excel like Editing

[Meva]

hi all,

we want to allow user to edit any cell on single click and automatic save on "Lost Focus" kind of thing.
user should be able to do COPY PATE in more than one cell or More than one rows at a time. is this possible using RadGrid control

Kindly revert how i can make enable these features in telerik Grid control.

thanks in advance,
meva makwana
(OBASPL)

[TonyG]

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!

[Radoslav]

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

[Daiki]

Having an Excel-like behaviour when editing data in RadGrid would be a killer feature and help cut down data input time VERY significantly in our web app.

What would be needed is:
- Navigate between ""cells"" using the arrow keys
- Allow edit of records on focus (no need to click an Update button or press the ENTER key

Is there a place in the forum where requests/ideas are made?

Thierry

[Radoslav]

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

[Sheeraz]

Hi Radoslav,

Thanks for the reference, I have tested that sample project its working fine. But could you please help me out in deletion of a row in that excel behavior of rad grid. Please post code for this operation.

Regards
Sheeraz Raza

[Radoslav]

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

[Sheeraz]

Dear,

Thanks for your reply. 
but i could find the way DataKey of a particular row using firecommand. could you please explain?
secondly default behavior of delete button is to delete cell value.
I want to select the row and then press delete button from key board to delete the row.


regards
Sheeraz Raza

[Radoslav]

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

[Sheeraz]

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

[Radoslav]

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

[Sheeraz]

Hi Radoslav

Thanks for your quick response. I have tried the following steps but Its not working.
selectedCellId has nothing in it. On ItemCommand event it always return ID = 1.

I have used the following settings 
<ClientSettings>

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

</ClientSettings>

but its not allowing me to select any row. 

Regards
Sheeraz Raza

[Radoslav]

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

[Sheeraz]

Hi Radoslav,

Your solution is working perfectly. its great.
I have another query about RadGrid customization. 
Could you please guide how can I add template columns like checkbox, radcombobox, numerictextbox ?
I want to use these controls in the example which you have sent me in last reply.
Could you please arrange any example for this?

Regards
Sheeraz Raza

[Radoslav]

Hi Sheeraz,

We have uploaded a new Code Library for excel-like-grid. The new example has a ton of new cool features and full support for the major RadGrid columns types.  Please check it out and let me know if it helps you.

Regards,
Radoslav
Telerik

[Jorge]

The following link is not working for me:

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

Can you please provide me with a new link?

Thanks.


Jorge

[Princy]

Hi Jorge,

Here is the new link for Batch Editing.

Thanks,
Princy

[Jorge]

Thanks for the working link. I was wondering if you had a sample using Entity Framework and doing a manual batch update? I have 3 tables that I must join and bind to the grid. I'd like the users to make changes to any cell by clicking and then after they make all their changes they can save them all. 

Thanks again.

Jorge

[Radoslav]

Hello Jorge,

The mentioned demo works with SqlDataSource however you can just replace the SqlDataSource with EntityDataSource control with enabled CRUD operations and it will work as expected. Please give it try and let me know if you experience any problems.

Regards,
Radoslav
Telerik

[Steve]

Is there a way to edit multiple cells on a RadGrid simultaneously like in Excel.   In excel i can copy from a single cell and paste across multiple cells.   Does Telerik support this type of open edit functionality or is it only one cell at a time?

Steve

[Radoslav]

Hi Steve,

Please check out the following code library and let me know if it helps you:
http://www.telerik.com/community/code-library/aspnet-ajax/grid/excel-look-and-feel-for-radgrid.aspx

Looking forward for your reply.

Regards,
Radoslav
Telerik

[Wissal]

Hi,

I have tested this sample project :

http://www.telerik.com/support/code-library/excel-look-and-feel-for-radgrid#adJwLKu2M0WPVLzvcS8kDA

its working fine. Now , I wont to implement a functionality similar to the one in Excel where user can select a cell and drag mouse left to copy its value to all selected rows (drag and repeat values).

Could you please help me?

Thanks.

[Radoslav]

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

[Harsha]

Hi,

 

I am getting error - Error13The name 'RadGrid1' does not exist in the current context.

 

22 errors on Building the code. Have added the same Telerik dll's as reference as mentioned in solution folder., still facing this issue.

Kindly assist.