Radgrid: is it possible to do Excel like Editing

23 posts, 0 answers
  1. Meva
    Meva avatar
    1 posts
    Member since:
    Jun 2012

    Posted 19 Jun 2012 Link to this post

    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)
  2. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 25 Jun 2012 Link to this post

    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!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 28 Jun 2012 Link to this post

    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.
  5. Thierry
    Thierry avatar
    14 posts
    Member since:
    Feb 2011

    Posted 10 Aug 2012 Link to this post

    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
  6. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 14 Aug 2012 Link to this post

    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
    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.
  7. Sheeraz
    Sheeraz avatar
    27 posts
    Member since:
    Nov 2012

    Posted 27 Mar 2013 Link to this post

    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


  8. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 29 Mar 2013 Link to this post

    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
    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.
  9. Sheeraz
    Sheeraz avatar
    27 posts
    Member since:
    Nov 2012

    Posted 29 Mar 2013 Link to this post

    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
  10. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 03 Apr 2013 Link to this post

    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
    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.
  11. Sheeraz
    Sheeraz avatar
    27 posts
    Member since:
    Nov 2012

    Posted 12 Apr 2013 Link to this post

    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

  12. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 16 Apr 2013 Link to this post

    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
    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.
  13. Sheeraz
    Sheeraz avatar
    27 posts
    Member since:
    Nov 2012

    Posted 16 Apr 2013 Link to this post

    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

  14. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 18 Apr 2013 Link to this post

    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
    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.
  15. Sheeraz
    Sheeraz avatar
    27 posts
    Member since:
    Nov 2012

    Posted 20 May 2013 Link to this post

    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
  16. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 22 May 2013 Link to this post

    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
    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.
  17. Jorge
    Jorge avatar
    12 posts
    Member since:
    Jun 2013

    Posted 23 Jun 2013 Link to this post

    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
  18. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 23 Jun 2013 Link to this post

    Hi Jorge,

    Here is the new link for Batch Editing.

    Thanks,
    Princy
  19. Jorge
    Jorge avatar
    12 posts
    Member since:
    Jun 2013

    Posted 24 Jun 2013 Link to this post

    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
  20. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 26 Jun 2013 Link to this post

    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
    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 the blog feed now.
  21. Steve
    Steve avatar
    1 posts
    Member since:
    Jun 2013

    Posted 14 Aug 2013 Link to this post

    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
  22. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 16 Aug 2013 Link to this post

    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
    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 the blog feed now.
  23. Wissal
    Wissal avatar
    2 posts
    Member since:
    Feb 2014

    Posted 28 May 2015 Link to this post

    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.

  24. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 01 Jun 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017