jqGrid - Adding edit buttons to each row

Question

I'm trying to add a column to the grid with an Edit button on each row. The code I found on the Demo site works great for adding the button but I can't figure out how to add the item id (primary key) to the link. You'll notice in my example I have it hard coded in as "10" for testing the link. It works, but ss there a way to grab that ID in the loop to add to my link?

gridComplete: function(){
    var ids = $("#list").jqGrid('getDataIDs');
    for(var i=0;i < ids.length;i++){
        var cl = ids[i];

        be = "<input style='height:22px;' type='button' value='Edit' onclick=\"window.location.href='editItem.asp?ID=10'\"  />";

        $("#list").jqGrid('setRowData',ids[i],{act:be});
    }   
}

score 5 · Answer 1 · edited May 23 '17 at 12:25

5

I suppose what you need is the formatter:'actions'. See the answer where I explain how it works and included the demo which produced many alerts for demo purpose only. See also and the demo if you need only local editing of grid.

edited May 23 '17 at 12:25

Community

1
1

answered Apr 07 '11 at 14:10

Oleg

220,925
34
403
798

This is default action formatter. I want to the same edit option using button click. In the same time, I want to add more custom button's in each row. Can you tell me how will I achieve this? Thanks. – Ranjith Dec 22 '16 at 13:03
@Ranjith: The solution is easy if you use [free jqGrid](https://github.com/free-jqgrid/jqGrid) fork of jqGrid, which I develop since the end of 2014. It has many new features, for example, [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/CustomActionButton.htm) and [this one](http://www.ok-soft-gmbh.com/jqGrid/OK/CustomActionButton1.htm) show how one can define custom actions for the `formatter: "actions"` or `template: "actions"`. See [the old answer](http://stackoverflow.com/a/29735149/315935). – Oleg Dec 22 '16 at 13:11
Thanks for your quick and valuable response. I am using `template: "actions"`. So that default `edit` and `delete` actions are working and then I defined `iconSet: "fontAwesome",actionsNavOptions: { addUsericon: "fa-user-plus", addUsertitle: "Add user" }` which is not working. Can you help me? – Ranjith Dec 22 '16 at 13:29
FYI, I have included `` in my page. – Ranjith Dec 22 '16 at 13:30
@Ranjith: Look at the code of [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/CustomActionButton.htm). You need define `custom` property inside of `actionsNavOptions`, which has an element with `action: "addUser"`. For example `actionsNavOptions: { addUsericon: "fa-user-plus", addUsertitle: "Add user", custom: [{action: "addUser", position: "first", onClick: function (options) { alert("Add user, rowid=" + options.rowid); } }] }`. You can post new question, if something will be not clear. – Oleg Dec 22 '16 at 13:42
Are you meant to `actionsNavOptions` will work only on your [custom jQgrid](https://github.com/free-jqgrid/jqGrid) not default jQgrid? – Ranjith Dec 22 '16 at 13:43
@Ranjith: I think that you should hold the same terminology: forks and versions. After publishing 4.7.1 on https://github.com/tonytomov/jqGrid the license agreement and **the product name** was changed to Guriddo jqGrid JS (see [the post](http://www.trirand.com/blog/?p=1438)). The Guriddo can't be used for free (see [here](http://guriddo.net/?page_id=103334) the prices). Because of that I made **the fork** of jqGrid 4.7 and I continue the development under https://github.com/free-jqgrid/jqGrid. Thus one can speak about jqGrid till the version 4.7. – Oleg Dec 22 '16 at 16:05
@Ranjith: There are exist **Guriddo jqGrid JS** in versions 4.8, 4.8.1, 4.8.2, 5.0.0, ..., 5.2.0. **Guriddo jqGrid JS** is published under the same place on GitHub (https://github.com/tonytomov/jqGrid), where **jqGrid** was before. **Free jqGrid** the **fork** of jqGrid (starting with jqGrid 4.7). It's published under https://github.com/free-jqgrid/jqGrid. It's exist in versions 4.8.0, 4.9.0, ..., 4.13.5. It's compatible with the old jqGrid 4.7 (or other 4.x version). – Oleg Dec 22 '16 at 16:11
@Ranjith: Guriddo jqGrid JS is available either via download or via [bower](https://bower.io/search/). I publish free jqGrid not only in bower, but on [npm](https://www.npmjs.com/package/free-jqgrid), [NuGet](https://www.nuget.org/packages/free-jqGrid/4.13.5), [Maven Central](http://search.maven.org/#search%7Cga%7C1%7Cfree-jqgrid) and on two CDNs: [cdnjs](https://cdnjs.com/libraries/free-jqgrid) and [jsdelivr](https://www.jsdelivr.com/projects/free-jqgrid). See [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs). – Oleg Dec 22 '16 at 16:18
@Ranjith: There are no "custom jqGrid". To be able to use custom buttons, which you can define inside of `actionsNavOptions` option, you have to use **free jqGrid fork**. You can use it from any from above locations. The simplest and the recommended way to use free jqGrid is loading jqGrid files from CDN. You will need to modify only 3 lines on HTML code to load free jqGrid 4.13.5 instead of another version of jqGrid, which you use currently. See [here](https://free-jqgrid.github.io/getting-started/index.html) examples of usage free jqGrid, see readmes on GitHub and the Wiki on GitHub. – Oleg Dec 22 '16 at 16:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/131320/discussion-between-ranjith-and-oleg). – Ranjith Dec 23 '16 at 07:20
@Ranjith: Please, don't send the messages in old chats. I read your last message only occasionally. [The old answer](http://stackoverflow.com/a/6627201/315935), which I posted, shows the way how one can add custom action button in old jqGrid. You should understand that the old jqGrid is dead. jqGrid 4.6 isn't more supported. There are exist practically only two current produces, both based on jqGrid 4.6/4.7: "free jqGrid" and commercial "Guriddo jqGrid JS". I recommend you to inform your project manager about it and migrate to one from the forks or to an alternative grid product. – Oleg Dec 24 '16 at 14:12

score 1 · Accepted Answer · answered Apr 07 '11 at 14:03

1

Isn't that ID stored in your 'cl' variable?

be = "<input style='height:22px;' type='button' value='Edit' onclick=\"window.location.href='editItem.asp?ID="+cl+"'\"  />";

answered Apr 07 '11 at 14:03

Damb

14,410
6
47
49

dampe - the 'cl' is actually the row number not the item id. – Mark P. Apr 08 '11 at 13:25
I wasn't paying attention. You're right dampe, cl is right when you set the 'id' in the xmlReader to the proper id. Thanks to you too Oleg. – Mark P. Apr 08 '11 at 20:44

jqGrid - Adding edit buttons to each row

2 Answers2