Need a GridView Control that works like Excel Sheet.

Page 1 of 2 12 LastLast
  1. #1

    Need a GridView Control that works like Excel Sheet.

    I found the following control that provides similar features I am looking for, but still too far from my requirements:

    http://demo.essentialobjects.com/Default.aspx?path=Grid

    I am now starting the program changes to convert a GridView to make work like Excel Sheet, or as close as possible. This is really urgent, and I need your help.

    As a matter of fact, I found many possible solutions, and I am facing issues taking one solution, either becuase the solution is too complex to implement or it does not meet the requirements.

    I will mention the requirements:

    1. Allow the user to update the GridView Content using the Keyboard Only. No need to use the mous.

    2. The user must be able to update on the same page (in-line editing).

    3. Use the arrow keys [up], [down], [left] and [right] to locate the required row/cell to be edited.

    4. Use the [enter] key to start editing. When [enter] is pressed, all the fields in the same row must become editable fields. Press [enter] again to switch to display mode.

    5. Use [esc] to cancel the edits made to the current cell. Use [esc] again to cancel the update made to the complete row.

    5. When in editing mode, use [tab] and [sihft-tab] to goto next/prev field in the same row.

    6. All updates to be cashed on the client.

    7. User can click on "Save" to update the changes on the server.

    8. User can click on "Cancel" to cancel all updates made on the client.

    9. The GridView or the Control providing the control features mentioned above, must connect bindable to a .NET Based Data Source like SqlDataSource or ObjectDataSource.

    I don't want to be too greedy, and if I can find a control from Coolite that can give me 70% of the above reuqirements, I will be very happy.

    I really appreciate your help on this.

    Tarek.
  2. #2

    RE: Need a GridView Control that works like Excel Sheet.

    All these items are possible, although would take some work to get the functionality running exactly how you have requrested.

    1. Allow the user to update the GridView Content using the Keyboard Only. No need to use the mouse.

    This is a general requirement. Much of the keyboard commands/navigation already exist, although other items would need to be added as per items below.

    2. The user must be able to update on the same page (in-line editing).

    Inline editing is possible by using the <Editor> inner property of each GridPanel Column.

    3. Use the arrow keys [up], [down], [left] and [right] to locate the required row/cell to be edited.

    Functionality already included with GridPanel. Would depend of SelectionModel used.


    If RowSelectionModel, then key [up][down] would select the entire Row.


    The Default SelectionModel would select just an individual Cell, and [up], [down], [left] and [right] would navigate to the individual cell.

    4. Use the [enter] key to start editing. When [enter] is pressed, all the fields in the same row must become editable fields. Press [enter] again to switch to display mode.

    Would require handling <KeyDown> Listener of GridPanel to start row or cell editing.


    For the [enter] to stop editing the Row, you would have to handle the [enter] <KeyDown> on each individual <Editor>, or use the [esc] key which already stops editing.

    [quote]5. Use [esc] to cancel the edits made to the current cell. Use [esc] again to cancel the update made to the complete row.[quote]


    The current functionality of [esc] is to cancel editing of the cell, although not cancel changes. You would have to handle the <KeyDown> listener for each individual cell <Editor> to override this functionality if both cancel editing and cancel changes is required.


    Either the whole row is editable, or the individual cell. The second part where you want to press the [esc] key again is probably not possible, or would require a lot of research to figure out how to make this happen.


    5. When in editing mode, use [tab] and [sihft-tab] to goto next/prev field in the same row.

    Functionality already included with GridPanel.

    6. All updates to be cashed on the client.

    Functionality already included with GridPanel and Store.

    7. User can click on "Save" to update the changes on the server.

    Functionality already included with GridPanel and Store. Just call .commitChanges() on the Store.

    8. User can click on "Cancel" to cancel all updates made on the client.

    Functionality already included with GridPanel and Store. Just call .rejectChanges() on the Store.

    9. The GridView or the Control providing the control features mentioned above, must connect bindable to a .NET Based Data Source like SqlDataSource or ObjectDataSource.

    Functionality alread included with Store. Ability to connect to any DataSource type Control is included.

    I don't want to be too greedy, and if I can find a control from Coolite that can give me 70% of the above reuqirements, I will be very happy.

    Looks like the majority of this functionality already exists.



    Hope this helps.


    Geoffrey McGill
    Founder
  3. #3

    RE: Need a GridView Control that works like Excel Sheet.

    Hi Geoffrey,


    I was developing a simple example with GridPanel under VS2008 ...

    I am following the SqlDataSource Update Example. I put a GridPanel inside a Panel control to simplify things.

    Some how, the [ENTER] key is not starting update/edit any more not on the examples web page nor on my prototype !

    I am 100% sure using [ENTER] key to start update/edit was working some where on GridPanel, I am not sure what happened ? Pls help.

    But, the good thing, is that I managed to have the GridPanel showup on the web page. This is a step forward.

    Tarek.
  4. #4

    RE: Need a GridView Control that works like Excel Sheet.

    Hi

    Check this sample
    https://examples1.ext.net/#/GridPane...etails_Window/

    It can do almost everything you want

    Start editing with enter key is missing and also go to next row/same column with enter key after editing is missing

    A sample wich show how to delete a row in the grid using the <delete> key
    https://examples1.ext.net/#/Keys/Pan...d_Rows_Delete/

    This has helped me a lot implementing keyboard usage in my grid/appl

    hth
  5. #5

    RE: Need a GridView Control that works like Excel Sheet.

    Thank you Peter.

    The Grid Panle/Detail Window example is not working in on-line mode. I am at work now and I will try the same sample from my Laptop.

    When I open the example, I get error "Load Failed", Status Code 200.

    The Grid Row Delete sample is greate, and its working.

    I appreciate it if some one can comment on the [ENTER] key issue.

    I remember when I first tried the example on-line, it was starting the edit mode when I hit the [ENTER] key. Now, it is only working when I double-click.

    May be I was dreaming of this feature, so that I thought it was real ! Or maybe it was working on one certain example, which I cannot remember now !

    Appreciate your feedback.

    Tarek.
  6. #6

    RE: Need a GridView Control that works like Excel Sheet.

    tarekahf (3/29/2010)
    The Grid Panle/Detail Window example is not working in on-line mode. I am at work now and I will try the same sample from my Laptop.
    Weird i have just tried with the link I have in my previous post and it's working like a charm

    I assume you get the error when you try to open the page using my direct link?

    Edit with Enter-key:
    I can also use this feature, I will have a look at it later today

    rgds
  7. #7

    RE: Need a GridView Control that works like Excel Sheet.

    I am still getting the error I reported earlier:

    http://lh5.ggpht.com/_Qhe6s0HOP8U/S7...iteError01.JPG

    What Explorer you are using ?

    The other example: Details_Window_Remote, is working like a charm. But, when I press [ENTER] nothing happens. I have to click the "Edit" icon. The idea is to provide the user with Quick Data Entry like using an old Green Screen Main Frame Application without using the mouse.

    Appreciate your help.

    Tarek.
  8. #8

    RE: Need a GridView Control that works like Excel Sheet.

    tarekahf (3/29/2010)
    What Explorer you are using ?
    IE7 with patches

  9. #9

    RE: Need a GridView Control that works like Excel Sheet.



    I tried the Detail Window Example form my Laptop at home and also under VS Express 2008. So, if you did not change anything, then the problem is form work internet connection.

    But still, I cannot enter the Edit Mode unless I double-click, which is really annoying.

    Ok, I remember now where I was able to start Edit Mode when I press [ENTER] key, it was in another place. For a while, I thought I was dreaming.

    Tarek.
  10. #10

    RE: Need a GridView Control that works like Excel Sheet.

    tarekahf (3/29/2010)
    I tried the Detail Window Example form my Laptop at home and also under VS Express 2008. So, if you did not change anything, then the problem is form work internet connection
    Huh? I am not able to change a single comma in that code
    I'm just an plain and simple user on the forums like yourself ...

    I have a minor piece of code for the enter key, it's q'n'd and needs some work/refinement before going into production

    using ext = Coolite.Ext.Web;
    (...)
    ext.Key keyEnter = new ext.Key();
    keyEnter.Code = ext.KeyCode.ENTER;
    
    ext.KeyBinding keyBinding = new ext.KeyBinding();
    keyBinding.Keys.Add(keyEnter);
    
    keyBinding.Listeners.Event.Handler =
        "if(#{gridPanel}.getSelectionModel().hasSelection()){ " +
            "var record = #{gridPanel}.getSelectionModel().getSelected(); " +
            "var rowIndex = #{gridPanel}.getStore().indexOf(record); " +
            "#{gridPanel}.startEditing(rowIndex,2) }";
    gridPanel.KeyMap.Add(keyBinding);
    The number "2" is the third column from left as the index is zero based

    I am mostly using codebehind, however moving it to markup should be fairly straightforward if you're familiar with the framework

    hth
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 24
    Last Post: Aug 06, 2012, 11:26 AM
  2. Replies: 0
    Last Post: Jul 13, 2012, 5:45 AM
  3. Replies: 0
    Last Post: Jul 09, 2012, 11:24 AM
  4. [CLOSED] Will FileUpload control works with Editable Grid Panel?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Dec 20, 2011, 9:33 PM
  5. Fill a GridView control from list
    By maruf.zaman in forum 1.x Help
    Replies: 1
    Last Post: Dec 11, 2011, 11:40 AM

Posting Permissions