Excel look and feel for RadGrid

Thread is closed for posting
5 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 16 May 2013 Link to this post

    Requirements

    RadControls version

     Q1 2013 SP2 (2013.1.417) and later

    .NET version

     4.0 and later

    Visual Studio version

     2010 and later

    programming language

     C#, VB.NET

    browser support

    all browsers supported by RadControls

                                                                
    • PROJECT DESCRIPTION
      The sample project demonstrates an Excel-like RadGrid. This resembles entering data in an excel spreadsheet - once you double 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 and press the down arrow or enter keys, new items will be added to the control, which will also be in edit mode (inline edit mode).
      The control includes an Save in DataBase link in the CommandItem, which will call the ItemCommand event handler that will call the appropriate method which will handle the update to the database. Also the project illustrates the usage of row-context menu which gives the ability to insert an item before the current item, insert after the current item, delete the item, save the changes in the temporary data source, synch the changes to database, and discard the changes made so far. Additionally, there is support for sorting and filtering the Grid. The Grid could be filtered with the built-in filtering control and with a RadComboBox control which allows multiple selections of the distinct values from the column. It allows 5 column types to be used - GridBoundColumn, GridDropDownColumn, GridNumericColumn, GridMaskedColumn, and GridDateTimeColumn. Keyboard navigation is enabled for the GridDateTime column editors, thus you may display the picker control and navigate solely with the keyboard. However, please note that the keyboard navigation of the picker works only when you focus the date input with the keyboard. Otherwise the focus will be put on the Grid and you will need to manually focus the picker. Almost any column editor allows the editing process to be performed without the usage of the mouse.
          


    Possible actions which users can perform:

    Mouse actions

    Single mouse click on a cell:
    Marks the cell as selected (single click selection 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.
      • If this is the left most cell and EnableCircularNavigation property is set to true, the cursor will be moved the above row and the right most column, unless this is the left most column of the first row.

    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.
      • If this is the right most cell and EnableCircularNavigation property is set to true, the cursor will be moved the next row and the left  most column, unless this is the right most column of the last row, then the user will be asked whether a new row to be inserted.

    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.
      • If the EnableCircularNavigation property is set to true and the focus is on the right most column the focus is move to the left most column of the next row.

    "Enter" key is pressed:

      • Selects the cell below the current one.

    "Shift" + "Enter" keys are pressed:

      • Selects the cell above the current one.

    "Spacebar" key is pressed:

      • Selects/shows the content of the editor control.

    "Esc key is pressed:

      • Returns the cell/editor to single select mode.
      • If the Esc key is pressed second time it asks the user whether he/she want to discard the changes that were made to the temporary data source.

    Context menu key is pressed:

    o   Opens the row-context menu that allows you to insert, delete, save, and discard the changes.



    Adding rows and saving data

    Adding new row to 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 presses the  Right arrow or "Tab" or "Enter" keys.
      • When the RadGrid last row's cell is selected and user press Down arrow or "Enter" keys.
      • When the “InsertBefore” or “InsertAfter” option is selected from the row-context menu. Note that these options are only applicable until you discard the changes or refresh the page. If you refresh the page the order of the inserted items won’t be persisted and most probably they will appear at the bottom of the Grid. 

    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.
      • From the row-context menu there are two options that could be used to save the data:
        • Save – saves the changes to the temporary data source.
        • Synch Database – saves the changes to the permanent data source.
      • Prior any operation requiring rebinding of the Grid, the data is saved to the temporary data source(DataTable object). Thus, there will be no loss of data.

    Current Limitations

    o   Once you are in the filter item you need to return to the data portion of the Grid using the mouse.

    o   Inside the DropDownColumn you need to click twice, one time to focus the cell and the second time to expand the dropdown. Due to the specific type of input the DropDownList could not be opened with the keyboard, however, the values could be changed with the up and down arrows after the spacebar key is pressed.

    o   When you are in double selected mode you need either to press the Enter or the Esc keys in order to proceed with the navigation.

    o   If you focus the date input with the mouse you will need to bring the focus to another cell with the mouse in order to continue navigating the cells with the keyboard.

    o   Does not support copying of rows and columns from and to Excel or any other table based control or source.

     

  2. Bill Battaglia
    Bill Battaglia avatar
    9 posts
    Member since:
    Oct 2009

    Posted 11 Jun 2013 Link to this post

    Can we have the filter option in the header like we have in excel with the checkbox to display the selected list in the grid, this is really needed feature. Do we have this type of functionality in the RadGrid?
  3. Andrey
    Admin
    Andrey avatar
    836 posts

    Posted 14 Jun 2013 Link to this post

    Hi,

    May be you mean the implemented functionality in the EmployeeID column? There we are using RadComboBox control to filter the column. Please download the project and check whether the provided solution suite your needs.

    Regards,
    Andrey
    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.
  4. Rohit
    Rohit avatar
    12 posts
    Member since:
    Feb 2009

    Posted 18 Jun 2013 Link to this post

    Is there a demo URL for the same?
  5. Andrey
    Admin
    Andrey avatar
    836 posts

    Posted 19 Jun 2013 Link to this post

    Hi,

    I was referring this code-library project.

    Please, if you have questions regarding this code-library project, open a support ticket and put your questions there along with any necessary information.

    Regards,
    Andrey
    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.
Back to Top