jQuery Grid - Add "Delete" Button

Question

I am using jqgrid to display a nice grid that is filled over a php script. Now I only see the navigation bar, how can I add a "Delete-Button" to the left of my bar, so the user can select and delete custom entries (and the jqGrid notifies a php script to delete the selection)?

I only want a delete button, no "Add" button.

Thanks :)

EDIT:

This code is not working. Where's my error?

/* List for Update Commands */
  jQuery("#updatelist").jqGrid({
    url:'index.php?list=update',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['ID','URL', 'Limit','Executed','Version'],
    colModel :[ 
      {name:'id', index:'id', width:30}, 
      {name:'url', index:'url', width:290}, 
      {name:'limit', index:'limit', width:50, align:'right'}, 
      {name:'executed', index:'executed', width:70, align:'right'}, 
      {name:'note', index:'note', width:150, sortable:false} 
    ],
    pager: '#updatepager',
    rowNum: 10,
    height:'100%', 
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: 'desc',
    viewrecords: true
  });

jQuery("#updatelist").navGrid('#updatepager',{
        edit:false,add:false,del:false,search:false
      }).navButtonAdd('#updatepager',{
        caption:"Add", buttonimg:"js/style/row-insert-under.gif", onClickButton: function(){ 
        var datarow = {name1: value1, name2: value2', ...}; 
        var su=jQuery("#updatelist").addRowData("X",datarow,"last"); 
        if(su) { jQuery("#updatelist").setSelection('X') };   }, position:"last"
        });

do you only want a single delete button in the nav bar at or a delete button for each row? — Bobby Borszich
– Bobby Borszich, Commented Nov 16, 2009 at 22:04

John · Accepted Answer · 2009-11-08 20:22:53Z

Try something like this:

        /* List for Update Commands */
      jQuery("#updatelist").jqGrid({
        url:'index.php?list=update',
        datatype: 'xml',
        mtype: 'GET',
        colNames:['ID','URL', 'Limit','Executed','Version'],
        colModel :[ 
          {name:'id', index:'id', width:30}, 
          {name:'url', index:'url', width:290}, 
          {name:'limit', index:'limit', width:50, align:'right'}, 
          {name:'executed', index:'executed', width:70, align:'right'}, 
          {name:'note', index:'note', width:150, sortable:false} 
        ],
        pager: '#updatepager',
        rowNum: 10,
        height:'100%', 
        rowList:[10,20,30],
        sortname: 'id',
        sortorder: 'desc',
        viewrecords: true
      }).navGrid('#pjmap',{view:true,edit:false,add:false,del:false,search:false})
        .navButtonAdd('#updatepager',{
        caption:"",
        title:"Create new log entry", 
        buttonicon:"ui-icon-plus", 
        onClickButton: function(row_id){ 
            alert("You can add your function here");
        },
        position:"first"
  });

John · Accepted Answer · 2009-11-02 04:17:52Z

0

Take a look at: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons. There is an example of what you are looking to do.

answered Nov 2, 2009 at 4:17

John

212 bronze badges

2 Comments

maxedmelon Over a year ago

tried it, not working. updated my post with problem description.

John Over a year ago

BTW - the example I left below is for an add button, but you can easily change it to only a delete button.

Collectives™ on Stack Overflow

jQuery Grid - Add "Delete" Button

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related