0

I am using a jqgrid with formatter 'actions', to display an 'edit' button on every row. It works well, but now I would like to display an 'Update' link instead of displaying the default edit button. Is that possible?

My colModel looks something like:

        colModel: [
            { name: 'Listname', formatter: displayListName, width: 270, sortable: false },
            { name: 'OrigListname', hidden: true, editable: true, editrules: {edithidden:true} },
            { name: 'NumOfContacts', hidden: true },
            { name: 'IsPrivate', hidden: true, editable: true, editrules: { edithidden: true }, edittype: 'checkbox' },
            { name: 'CanUpdate', hidden: true },
            { name: 'Recipients', formatter: displayRecipients, width: 100, sortable: false },
            { name: 'Update', formatter: 'actions', width: 100, sortable: false,
                formatoptions:{
                    keys: true,
                    editbutton: true,
                    editformbutton: true,
                    delbutton: false,
                    editOptions: {
                        closeOnEscape: true,
                        closeAfterAdd: true,
                        viewPagerButtons: false,
                        closeAfterEdit: true,
                        afterSubmit: function (response, postdata) {
                            var r = $.parseJSON(response.responseText);
                            return [r.success, r.Description, null];
                        }
                    };
                 }
            },                
            { name: 'Import', formatter: displayImport, width: 100, sortable: false },
            { name: 'Export', formatter: displayExport, width: 100, sortable: false }
        ]

Thank you in advance, Keren.

user2111091
  • 3
  • 1
  • 2
  • You wrote just that you want "to display 'Update' link". Additionally you wrote about "changing edit button style" in the title of the question. Could you describe more clear what you want? How should look modified style? How you define the "'Update' link"? Do you want just to have another text of Tooltip of the edit button or you need another modifications? – Oleg Feb 26 '13 at 12:33
  • Hi Oleg, thank you for you response! I will clarify my question - I would like to get rid of the button, and have only text instead, that says 'Update', with a link style (underlined), like a simple tag. And I need it to perform the same action of editing the row. Only instead of a button, I need to display it as a link... thanks again in advance! Keren. – user2111091 Feb 26 '13 at 12:41
  • Sorry Keren, but which advantages you will get? The width of the column will be wider. jqGrid uses *standard* jQuery UI icons which are language independent and intuitive understandable. [The full code](https://github.com/tonytomov/jqGrid/blob/v4.4.4/js/jquery.fmatter.js#L396-L506) of action formatter use permanently constructs like `div.ui-inline-edit` and so on. So the consequence of your requirements is that you will have to write your own code and you can't use `formatter: 'actions'` at all. Is it what you want? – Oleg Feb 26 '13 at 12:58
  • This is my design requirements. That it will show as a link. I would very much prefer not to have to write my own code.... alternatively, I can use a custom formatter to show the link, but then I don't know how to trigger the 'edit' dialog when the link is clicked. Is it possible to do that? to somehow call the standard "edit row" method from a custom button/link? – user2111091 Feb 26 '13 at 13:12

1 Answers1

0

One can't so easy to replace <div> used in formatter: "action" to a link (<a>). I think you have to use custom formatter to implement the requirements. I recommend you to look at the demo from the answer. I think that you can implement in close way your requirements.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thank you Oleg for your response. I know how to create a link and insert any javascript function under it. But my question is - is there a way to somehow call the method that opens the 'edit' form? I would very much like to use the built-in 'edit' functionality of jqgrid.... I know it is possible to trigger other actions, for example something like: $("#mylist").jqGrid('toggleSubGridRow', rowId); can I do something similar with opening the 'edit' dialog...? Thanks again. – user2111091 Feb 27 '13 at 06:56
  • @user2111091: You are welcome! To start form editing you can call [editGridRow](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow). Be carefull: jqGrid don't support form editing with *local* data. I hope the example [here](http://stackoverflow.com/a/4983690/315935) can help you. You don't post the grid definition so I don't understand why you need call `toggleSubGridRow`. – Oleg Feb 27 '13 at 07:32
  • thank you so much! this is exactly what I was missing, the call to 'editGridRow'...... now everything is working well. Regarding the 'toggleSubGridRow', this was just an example of some other call I've made somewhere else in my code. I tried voting for you but I'm new here so don't have any reputation.. maybe next time. Keren. – user2111091 Feb 27 '13 at 08:19