Add custom button to row

Jan 29, 2013 at 11:58 AM
Edited Jan 29, 2013 at 12:02 PM

I want to add custom button to each row (column buttons). I have add action columns:


.AddActionsColumn("actions", editButton:false,deleteButton:false)


but, how can I add my own button (image with text and just image) ?


Also, I tryed to create property in my model and set formatter:


public string Button { get; set; }

just insert anchor tag:


$.customFormatter = function (cellvalue, options, rowObject) {
            return "<a href='#'>Details</a>";


but, I get the empty input.


Jan 29, 2013 at 1:37 PM

The 'actions column' does not allow for adding custom buttons (this is limitation within the jqGrid itself). You are forced to use custom formatter here. Now the most probably reason for your formatter not being used is not passing data for the column you have added. jqGrid fires the formatter only if there are data to format, so you need to put some dummy values there.

Jan 30, 2013 at 3:29 AM
TPeczek wrote:

The 'actions column' does not allow for adding custom buttons (this is limitation within the jqGrid itself)

I have found the demo where button is added to actions: demo

TPeczek wrote: you need to put some dummy values there.

I added some text to this column, but it's empty anyway.



Jan 30, 2013 at 9:59 AM
sharok9 wrote:

I have found the demo where button is added to actions: demo

This demo (despite it's overall good quality as everything which Oleg does regarding jqGrid) isn't using any built in API to add this button (because as I wrote there is none), it simply iterates through generated actions columns and injects the HTML for the button inside. This is something you can always do because it is "outside" of the scope of jqGrid and the helper. You just need to add the JavaScript function for 'LoadComplete' event, similiar to the one from Oleg demo:

function () {
    var iCol = getColumnIndexByName(grid, 'act');
    $(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")
        .each(function() {
", { title: "Custom", mouseover: function() { $(this).addClass('ui-state-hover'); }, mouseout: function() { $(this).removeClass('ui-state-hover'); }, click: function(e) { alert("'Custom' button is clicked in the rowis="+ $("tr.jqgrow").attr("id") +" !"); } } ).css({"margin-right": "5px", float: "left", cursor: "pointer"}) .addClass("ui-pg-div ui-inline-custom") .append('') .prependTo($(this).children("div")); }); }

Now if it ocmes to the formatter, there must be some issue with your model or data passed backed in the request. I will be happy to look at this if you can send me a simplified project with reproduced issue.

Jan 30, 2013 at 10:20 AM
Edited Jan 30, 2013 at 10:33 AM

Thanks for reply. 

Yes, I tryed the similar code (found on StackOverflow), but not working. I have delete this code, but there are gets all ID and adds custom html to the column. The code is located in loadComplete, but loadCompete fires when data still not loaded (grid is empty). I also tryed gridComplete, result is the same. I'm using POST method and loadOnce : true


The model is simple:


[LocalizedDisplayName("ColumnOrderNumber", NameResourceType = typeof(CabinetViewModelsStrings))]
        [JqGridColumnSearchable(true, SearchType = JqGridColumnSearchTypes.Text, SearchOperators = JqGridSearchOperators.Cn)]
        [HiddenInput(DisplayValue = false)]
        public string OrderNumber { get; set; }

        public string Button { get; set; }


This is js code:


$.customButton = function() {
 return "<a>Details</a>"


Some details what is exactly not working: when my page opens in the first time then column is empty, but if I refresh page link is appear.

Jan 30, 2013 at 10:56 AM

Well I have just retested the solution with loadComplete and gridComplete and they seem to be fine (gridComplete is probably better in case of loadOnce: true), maybe you haven't adapted the code to your case? For example in the sample above the line:

var iCol = getColumnIndexByName(grid, 'act');

Always need to be changed with following pattern:

var iCol = getColumnIndexByName($('#<grid id>', '<actions column name>'); 

So assuming you have passed 'orders' as the id parameter to JqGridHelper constructor and 'actions' as the name parameter to AddActionColumn method, this line should look like this:

var iCol = getColumnIndexByName($('#orders'), 'actions');

Of course the getColumnIndexByName is also custom function wirtten by Oleg (I hope you did inspect the actual source of the sample he provided, not only the effect):

var getColumnIndexByName = function (grid, columnName) {
    var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
    for (i = 0; i < l; i++) {
        if (cm[i].name === columnName) {
            return i; // return the index
    return -1;

If it comes to the formatter, I will test that once again to make sure, but it seems like something specific to your project so if you could send an entire sample which reproduces the issue it would help a lot, so far I was unable to reproduce the problem you are having.

Jan 30, 2013 at 10:59 AM

I will try you code later.


About formatter, now I create again property and js code. And all works. I don't know why it's not work early, Sorry for the inconvenience.