welcome to my space
Jan
6
[Grid] Checkbox selection / row number
jack in xn--fjqr0i.com edit
  • Hi,

    Currently, using ctrl+click to multiple select rows works fine if the user only select a few items.

    For instance if there’re 50 rows and one wants to select #1, #11, #21, #31 than you might need to click #1, scroll a little (with #1 out of view) and ctrl-click #11 and so on.

    However, this is very error-prone because it’s easy to screw up ctrl-click with a single click which will unselect all but the current row.

    Here’s one way to solve it with checkboxes:

    http://www.activewidgets.com/grid.howto.selections/selecting-rows-with-checkboxes.html

    Click on the link “Show example” and then the button [Show me] to see it in action.


    Another usability enhancement is to prepend a row number column to each row (persists after sorting on other columns). This helps the user to identify row and also when you scroll you can still tell where you are.

    Here’s an example

    http://www.activewidgets.com/grid.howto.selectors/row-numbers.html


    Last but not least, as many of the users have requested, a virtual paging mode will be a much welcome addition. This will enable the grid to support many many rows without using a paging toobar.

    http://www.activewidgets.com/examples/2.0/virtual.htm


    I hope this makes sense :-)

    Thanks for considering!


  • Just found out that the row number column is rather easy to implement with a custom column renderer:


    {header: "#", width: 30, sortable: false, locked:true,
    renderer:function(v, p, r, rowIndex, i, ds){return '' + (rowIndex+1)}},


    Ext's framework is really neat :D


  • Yep. I've done that. In some cases, row selection using a checkbox, and "current selected row" are different things.

    The classic case is the email example. You can select a row which will display that email in a preview window, and check several rows to apply a delete or move action to.


  • {header: "#", width: 30, sortable: false, locked:true,
    renderer:function(v, p, r, rowIndex, i, ds){return '' + (rowIndex+1)}},

    It turns out that I need more work than just the above to get it work properly.

    Specifically, if you add /delete rows to the ds, the grid view only repaint the new row, while other "shifted" entries will be untouched.

    The row number in that case will be inconsistent after a delete.

    To refresh the whole grid is too expensive, so I ended up writing some code to redraw the number column when needed.


  • It's just as easy to include checkboxes... in the renderer you simply return something like:
    return '';







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about [Grid] Checkbox selection / row number , Please add it free.