Add a delete button in each row of an ExtJS data grid

For usability reasons it is usually a good idea to add a delete button to each row of a data grid. If the user clicks on such a button, the whole row that contained the button will be deleted.

The data grid of ExtJS does not contain such a feature by default, but it could be implemented by adding a special column to the column model. Using this extension, it could be easily done like this:

Note that the itemDeleter instance must be added to the ColumnModel and set as selModel to work properly.

  • Animal

    Looks great. Except that the line

    grid.getView().refresh();

    is not necessary. It will automatically update the View. This is how the GridPanel works. It subscribes to events of the Store.

    Also, perhaps some kind of “invitation” to click when the mouse is over the delete “button” would be good. cursor: pointer would help, but possibly also some kind of image switching rollover.

  • Marcus Schiesser

    Thank you for the improvement ideas. If you like you can participate, you can find the code at extensive – Have fun, Marcus

  • hahaha ! this is good shit

  • Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

  • saurabh dwivedi

    hi,
    the above provided code is a great one but that only removes record from view not from the server. means if you refresh the page after doing delete the record will reappear. how can i delete the server side record using the same script

  • ?? ????? ????? ????? ???? ???????????,?????? ????? ??? ?????? ??????????,???? ?????? ??????????.

  • Dash Ravindranath

    Hi-
    This is awesome. I just have one question, my grid has 5 columns and this delete icon always occupies the 3rd column. Is there a way I can position this in the last?

    Thanks,
    Dash

  • San

    Hi ,

    How to add the multiple button in multiple columns. Please can u help me.

    Thanks,
    San

  • Hi Marcus,
    is it possible to add 2 ways to remove things in Ext js grid?
    1) the delete icon as you say.
    2) the row selection to select multipe rows and delete selection with one icon click? see http://www.extjs.com/deploy/dev/examples/grid/grid-plugins.html

  • Pingback: ??????? ??? ExtJS « Developer’s Notes()

  • premkumar

    i need full files

  • Jean

    I’m using Ext.grid.EditorGridPanel but it doesn’t work ;(

  • Desay

    Could we use one ItemDeleter for 2 different grids?

  • Jaffar

    Good Work :)

  • Jaffar

    Really helped a lot of people

  • Jai

    Good idea !!! how can i delete selected row with single button?

  • Great, thanks, this is really useful.

    If anyone is wondering why no image shows up, you have to add the following CSS:
    .extensive-remove {
    background-image: url(path_to_16x16_delete_icon.png);
    }

  • Szeki

    Extensive is not defined !!

    Where can I find it?

    Thanks
    M.

  • Marcus Schiesser
  • Felipe

    Awesome, thanks, this is really useful

  • Any chance that you can get this working for EXT JS 4 ?

  • Marcus Schiesser

    sorry, but right now i don’t work with ExtJS – maybe anyone reading my blog?

  • Hi Marcus!!!!!!!! I have to create a child rows under the rows of Ext Grid. I am not telling about grouping because in case of grouping we can’t edit the row w.r.t which we will do grouping… If any idea please mail me

  • Kat Unverdi

    Thanks for the JS file. I used it with EditorGridPanel and it works great.

  • yud

    hello i’m new to ext js and i need this functionality in my table..its not working for me. can you send me a working example?

  • wujy

    used it but Can not be set ” sm: new Ext.grid.RowSelectionModel ({singleSelect: true}),”