Excel-like RadGrid

Thread is closed for posting
58 posts, 1 answers
  1. Answer
    Telerik Admin
    Telerik Admin avatar
    1501 posts
    Member since:
    Oct 2004

    Posted 27 Sep 2007 Link to this post

    Requirements

    RadGrid for ASP .NET version

    RadControls for ASP .NET AJAX version

    5.0.0 and later


    2011.1.519 and later     

    .NET version

    3.5 and later

    Visual Studio version

    2008 and later

    Programming language

    C#

    Browser support

    all supported by RadGrid for ASP .NET


    all browsers supported by RadControls for ASP .NET AJAX

     
    This code-library project is obsolete. For an updated version click here.

    PROJECT DESCRIPTION
    The sample project demonstrates an Excel-like RadGrid. This resembels entering data in an excel spreadsheet - once you click on a cell, you can enter data in it, without having to invoke the edit command in the standard way. If you scroll down, new items will be added to the control, which will also be in edit mode (inline edit mode).
    The control includes an Update link in the CommandItem, which will call the ItemCommand event handler, where you can include custom code, to update the database, with the values entered so far.

    UPDATED VERSION AVAILABLE BELLOW
    The following example extends the Excel-like RadGrid sample. It adds the "Tab" key navigation,  "Enter" key navigation, single cell click mode, double cell click mode and scroll bar which is always scrolled to the row with selected cell.

    Possible actions which users can perform:

    Mouse actions

    Single mouse click on a cell:
    Marks the cell as selected(single click selection mode). If the user starts writing the text, the content of the cell is replaced with the text entered from the user and the cell is set to the edit mode.
    Double mouse click on a cell:
    Marks the cell as selected in edit mode(double click selection mode). In this mode the user can edit the text into the cell.

    Keyboard navigation

    Left Arrow key is pressed:  
    • If the cell is in single click selection mode:  Selects the left cell.
    • If the cell is in double click selection mode: Moves the caret one position left.
    Right Arrow key is pressed:
    • If the cell is in single click selection mode:  Selects the right cell.
    • If the cell is in double click selection mode: Moves the caret one position right.
    Up Arrow key is pressed:
    • If the cell is in single click selection mode:  Selects the top cell.
    Down Arrow key is pressed:
    • If the cell is in single click selection mode:  Selects the bottom cell.
    "Tab" key is pressed:
    • Selects the right cell.
    "Enter" key is pressed:
    • If the cell is in double click selection mode, selects the bottom cell.
    "Shift" + "Enter" keys are pressed:
    • Selects the top cell.

    Adding rows and saving data

    Adding new row to the RadGrid:
    • Add new row by pressing the "Add New Row" link from the RadGrid Command  item.
    • When the most right and most bottom cell is selected and user press Left arrow or "Tab" key or "Enter" key.
    • When the RadGrid last row's cell is selected and user press Down arrow or "Enter" key.
    Saving the RadGrid data into the database:
    • Save data by pressing the "Save in Database" link from the Grid Command Item. The new inserted rows and the updated rows from the RadGrid are saved in the database.

  2. rtk
    rtk avatar
    46 posts
    Member since:
    Aug 2006

    Posted 19 Oct 2007 Link to this post

    Hei
    This is a great example. But i have a bit trouble to get the values on RadGrid1_ItemCommand. How do i get the values from every cell?

    And i would like to set the width of the columns. But it's not working if i use <Columns></Columns>

  3. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 19 Oct 2007 Link to this post

    Hi brajoh,

    To see more information on updating the records, please refer to the following article. Essentially, you can perform a batch update for all the items on the page.

    Kind regards,

    Yavor
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center

  4. rtk
    rtk avatar
    46 posts
    Member since:
    Aug 2006

    Posted 19 Oct 2007 Link to this post

    Thank you for your answer.
    But i get an error now:

    "Specified argument was out of the range of valid values.
    Parameter name: ItemHierarchicalIndex"

    I have a dropdownlist with postback. And my RadGrid1_NeedDataSource are based on selectedvalue in this dropdownlist.

    The first time the page loads it works fine, but if i change the value in the dropdownlist and push the updateAll button i get this error.

  5. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 22 Oct 2007 Link to this post

    Hi brajoh,

    In order yo properly assist you, I would suggest that you open a formal support ticket, and send us a small working project, showing the issue that you described. We will advise you further, as soon as we review it.

    Sincerely yours,
    Yavor
    the Telerik team


    Instantly find answers to your questions at the new Telerik Support Center

  6. slai
    slai avatar
    7 posts
    Member since:
    Jun 2007

    Posted 10 Jan 2008 Link to this post

    Is there any update on this thread? I'm having exactly the same problem.

  7. slai
    slai avatar
    7 posts
    Member since:
    Jun 2007

    Posted 10 Jan 2008 Link to this post

    nvm.
    found my answer.
    http://www.telerik.com/community/forums/thread/b311D-bacmba.aspx

  8. Paul Haines
    Paul Haines avatar
    68 posts
    Member since:
    Jun 2007

    Posted 23 Jan 2008 Link to this post

    Just thought I'd point out that, you really should check for not being in a postback before updating each GridItem's edit mode. Otherwise, if you have event handlers for the grid's edit controls, the user's selections will be lost on postback.

    Simply wrap the update code in the 'Page_PreRender' routine in the following;
    if (!this.IsPostBack)
    {
        // Original code...
    }

    Hope this helps.
    Paul

  9. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 24 Jan 2008 Link to this post

    Hello Paul,

    Thank you for the suggestion. As the focus of the sample is a little different, we have not considered any similar optimizations. As for the suggestion, this would make a nice addition to the code, however including this option would prevent the items from being put in edit mode, after an update.

    Sincerely yours,
    Yavor
    the Telerik team


    Instantly find answers to your questions at the new Telerik Support Center

  10. Joe
    Joe avatar
    4 posts
    Member since:
    Aug 2007

    Posted 31 Jan 2008 Link to this post

    I'm interested in a version of this that:

    a.  works with a limited number of columns

    b. works like a windows grid, ie; upon tab off of the last cell in the last row, a new row is automatically added.  the new row is selected and the user may update the cells on the new row.

    c. supports different control types - dropdowns, checkboxes, textboxes.

    If there is anything like this or examples approaching it, please let me know.

  11. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 01 Feb 2008 Link to this post

    Hi Bert,

    Onto your questions:

    1. You can easily limit the number of rows and columns in the control. The logic remains to put all the items in edit mode.
    2. With respect to the second functionality set forth, there is no out-of-the-box solution. You can use the client side api of the control, and use the OnKeyPress event for the control. From within the handler for this event, you can make an AjaxRequest, and get back to the server. From within the server code, you can directly add a new row to the underlying datasource.
    3. The control can include any types of columns, including dropdowns. The main logic remains in updating the underlying database. For more information on similar updates, you can find in the following sample.

    I hope this information helps.

    Kind regards,
    Yavor
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center

  12. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 10 Mar 2008 Link to this post

    Hi,

    Attached to this thread is an update of the sample, with the latest Prometheus version of the grid.

    Best wishes,
    Yavor
    the Telerik team


    Instantly find answers to your questions at the new Telerik Support Center

  13. Billu
    Billu avatar
    9 posts
    Member since:
    Aug 2007

    Posted 03 May 2008 Link to this post

    Hi all,

    Can u provide me with a sample project of using checkboxes in place of textboxes?

  14. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 07 May 2008 Link to this post

    Hello Billu,

    Actually there will not be much difference in the scenario. You will need to add a checkbox column. Additional information on this, you will find in the following example, which also has updates enabled.

    All the best,
    Yavor
    the Telerik team


    Instantly find answers to your questions at the new Telerik Support Center

  15. Nate
    Nate avatar
    3 posts
    Member since:
    Jun 2008

    Posted 05 Jan 2009 Link to this post

    I am using radgrid version 2008.3.1125.35 and the code from this thread for an excel-like grid.


    Is there a way to navigate the grid using the arrow keys (up/down/left/right) like in excel?

    My grid will handle numbers only so I would like to use the GridNumericColumn which generates RadNumericTextBox's for each cell in the grid. I tried using the OnKeyPress event of RadNumericTextBox but it does not raise events for arrow keys, delete, alt, etc...

    Thanks - Nate

  16. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 06 Jan 2009 Link to this post

    Hello Nate,

    You can use the onKeyPress client side event handler for the grid control, and set focus on the next edited item.

    Kind regards,
    Yavor
    the Telerik team


    Check out Telerik Trainer, the state of the art learning tool for Telerik products.

  17. John
    John avatar
    7 posts
    Member since:
    Jun 2009

    Posted 05 Jun 2009 Link to this post

    One thing that I am struggling with.  If a user opens more that 1 record and then does anything like sort or group or switch pages, the row comes out of edit mode and thier changes are lost.  Is there a way to stop the rebind for edit rows only and 2 how to remeber values on another page.
    Thanks in advance,
    John

  18. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 08 Jun 2009 Link to this post

    Hello John,

    Indeed, in such a setup the changes will be lost.
    One possible option in this case would be to attach to the ItemCommand event handler, and when a sort command is issued, you can save all the values in the underlying database, and then put the control in edit mode again. In this way, the changes will be persisted.
    I hope this suggestion helps.

    Kind regards,
    Yavor
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

  19. Tony Sun
    Tony Sun avatar
    5 posts
    Member since:
    Jun 2009

    Posted 13 Jun 2009 Link to this post

    Hi,

    I am newbie to both ASP.NET and Telerik Rad Controls for ASP.NET AJAX.

    With the code.zip, after I unzip there's no solution file I can open.

    I am using VS.NET 3.5 and SQL2005.

    Can someone please give me a instruction on how to open this properly?

    Many thanks.

  20. Sebastian
    Admin
    Sebastian avatar
    9807 posts
    Member since:
    Sep 2012

    Posted 15 Jun 2009 Link to this post

    Hello Tony,

    You can choose the File->Open -> Web site option from your VS 2008 and point to the root folder of the example after unzipping it to open the sample in Visual Studio and examine it.

    Best,
    Sebastian
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

  21. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 23 Jun 2009 Link to this post

    Hi,

    Attached to this message, is an updated version of the sample, with the latest version of the controls, which adds additional functionality, such as navigation through the cells with the arrow keys, and adding additional rows when tabbing out of the last row.

    Greetings,
    Yavor
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

  22. Andy Lo
    Andy Lo avatar
    3 posts
    Member since:
    Jun 2009

    Posted 26 Jun 2009 Link to this post

    Hi,

    Thanks for supplying the sample. But it got some bugs.

    In Deafult.aspx.cs, it dies on Line 42:

    CategoryID.Attributes.Add(

    "onkeydown", "setFocus('" + (RadGrid1.MasterTableView.Items[dataItem.ItemIndex - 1]["CategoryID"].Controls[0] as TextBox).ClientID + "','" + (RadGrid1.MasterTableView.Items[dataItem.ItemIndex + 1]["CategoryID"].Controls[0] as TextBox).ClientID + "','" + "noControl" + "','" + (RadGrid1.MasterTableView.Items[dataItem.ItemIndex]["CategoryName"].Controls[0] as TextBox).ClientID + "');");

    The error message is: Specified argument was out of the range of valid values.
    Parameter name: index

    Can you please let us know how to fix this ASAP? Many thanks

     

  23. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 26 Jun 2009 Link to this post

    Hello Andy Lo,

    I just downloaded the sample and re-tested it, and it worked as expected. Did you perform any special steps to replicate the issue? What is the VS version and browser version?

    Greetings,
    Yavor
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

  24. Elliott
    Elliott avatar
    2 posts
    Member since:
    Jun 2009

    Posted 29 Jun 2009 Link to this post

    Tabbing past the last row does create a new row. But the focus is not on that row.

  25. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 30 Jun 2009 Link to this post

    Hi Elliott,

    You can extend the code, to set the focus on the last, newly added record, when the control renders. In this way, when the newly added record is rendered, the focus will be on the last cell, or the first one, depending on your requirements.
    Let me know how this approach works.

    All the best,
    Yavor
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

  26. Myriam
    Myriam avatar
    153 posts
    Member since:
    Sep 2008

    Posted 03 Aug 2009 Link to this post

    How can I enter my columns please?
    Thank you

    Edited: Forgot it! I forgot to add the vb code...Sorry about that

  27. Rob Kieft
    Rob Kieft avatar
    2 posts
    Member since:
    Sep 2009

    Posted 25 Sep 2009 Link to this post

    Could you tell me what version of the RadControls you are using for this example (excel-like-grid.zip)?  I am using VS2005 with RadControls Q2 2008 and am having a bit of an issue.  Your example works fine, but... I can use the arrow keys and change the values, but the values are not holding (updating the database).  I have a webpage, built very similarly to this Excel-like RadGrid example and it is doing the same thing (not updating the database).

    There is a "sub" called RadAjaxManager_AjaxRequest, which seems to be what controls the "update"?  This could never seems to be getting "triggered" to run.  I put a couple "flags" in that sub to see if it was ever called, and it's not.

    Everything else is working perfectly and exactly how I need it to, except getting what's on the Grid on the screen to update the database table.  I am really stuck on this, so any suggestions you can provide would be much appreciated...

    THANKS!

    -Rob

  28. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 28 Sep 2009 Link to this post

    Hi Rob,

    There may be an issue with the update logic used in your particular example. However, to track this, please open a formal support ticket, and submit a small project, demonstrating the issue. We will review it and advise you further.

    All the best,
    Yavor
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

  29. Rob Kieft
    Rob Kieft avatar
    2 posts
    Member since:
    Sep 2009

    Posted 28 Sep 2009 Link to this post

    Hello Yavor...

    I am using the example that was posted here called "135847_excel-like-grid.zip".  This example does almost exactly the same thing I need to go which is be able to use the arrow keys to "key up" and key down" between different records.  That part works perfectly.  I can change the values in the fields, but the changes are not updating the database (In the example I downloaded from this posting site, it uses a backend "access database" ("Nwind.mdb", table named "Categories").  I can run the app, which brings up the default.aspx page just fine.  I can click on any of fields, change the values, arrow down/up without any problem... But the changes do not seem to be updating the database table "Categories".  There's a routine, RadAjaxManager_AjaxRequest that appears to be what runs the "update" process back to the database.  This does not appear to be getting triggered/fired to run.  I put some additional code in that routine just to let me know if it is being called, and it's not.

    So my question is... Which version of the Telerik RadControls should this example work with?  Which Visual Studio version?  I am using VS2005 with RadControls Q2 2008.  If I could just get your example ("135847_excel-like-grid.zip") working so that the "update" back to the database works, my project should also work without a problem.

    Any help would be greatly appreciated...

    THANKS!

    -Rob

  30. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 30 Sep 2009 Link to this post

    Hi Rob Kieft,

    In the sampe, the ajax request was properly raised. I tested it both with the original and the latest verion of the control. Attached to this message, is a screenshot with a few rows added. Please, take a look at it and verify the information. Also, please keep in mind that the update routine is triggered when the user loses focus of the last cell in the last item of the grid, but this logic can be extended for any other event as needed.

    Greetings,
    Yavor
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

Back to Top