I have used gridComplete to show HTML buttons but it shows the HTML text instead of button and encoded HTML as title which does not look good. Kindly help me remove or change the title (tooltip) and show the buttons

The Output

When I inspect this cell then I could see the following in chrome tools -

<td role="gridcell" style="" title="&amp;lt;input type='button' value='Publish' onclick='publish(100)' /&amp;gt;" aria-describedby="list_actionBtn">&lt;input type='button' value='Publish' onclick='publish(100)' /&gt;</td>

The jqgrid Code

var myColModel = [ {
    name : "promoId",
    index : 'Promotionid',
    width : 60
}, {
    name : "promoCode",
    index : 'promotioncode',
    width : 110
}, {
    name : "name",
    index : 'name',
    width : 160
}, {
    name : "description",
    index : 'description',
    width : 250
}, {
    name : "distCode",
    index : 'distributor_code',
    width : 110
} , {
    name : "statusId",
    hidden : true
} , {
    name : "statusVal",
    index : 'status',
    width : 90
}, {
    name : "startDate",
    index : 'start_date',
    width : 100,
    sorttype : "date",
    align : "right"
}, {
    name : "endDate",
    index : 'end_date',
    width : 100,
    sorttype : "date",
    align : "right"
}, {
    name : "discount",
    index : 'discount',
    width : 80
}, {
    name : "extension",
    index : 'extension',
    width : 80
}, {
    name : "isDiscount",
    hidden : true
}, {
    name : "isExtension",
    hidden : true
}, {
    name : "actionBtn",
    width : 100
} ];
$(function() {
    $("#list")
            .jqGrid(
                    {
                        url : '/suiactcodegen/action/promotion/promolist',
                        datatype : "json",
                        mtype : "GET",
                        colNames : [ "Promo ID", "Promo Code", "Name",
                                "Description", "Distributor Code", "Stt Id",
                                "Status", "Start Date", "End Date",
                                "Discount", "Extension", "Is Disc", "isExtn", "" ],
                        colModel : myColModel,
                        pager : "#pager",
                        rowNum : 10,
                        rowList : [ 10, 20, 30 ],
                        sortname : "end_date",
                        sortorder : "asc",
                        viewrecords : true,
                        gridview : true,
                        rownumber : true,
                        autoencode : true,
                        width : '1000px',
                        height : 'auto',
                        caption : "Promotion Summary",
                        gridComplete: function() {
                            var ids = $("#list").jqGrid('getDataIDs');
                            for (var i = 0; i < ids.length; i++) {
                                var rowId = ids[i],
                                    statusId = $("#list").jqGrid ('getCell', rowId, 'statusId'),
                                    activeBtn = "";
                                    if (statusId == 0) { // Inactive
                                        activeBtn = "<input type='button' value='Publish' " +
                                           "onclick='publish(" + rowId + ")' />";
                                    }
                                    //else if (statusId == 1) { // Published
                                    //  activeBtn = "<input type='button' value='Expire' " +
                                    //       "onclick=\"expire(" + rowId + ");\" />";
                                    //} 
                                 $("#list").jqGrid('setRowData', rowId, { actionBtn: activeBtn });
                            }
                        } 
                        }).jqGrid('navGrid', '#pager', {
                add : false,
                edit : false,
                del : false,
                search : true,
                refresh : false
            }).jqGrid('navButtonAdd', '#pager', {
                caption : " Edit ",
                // buttonicon: "ui-icon-bookmark",
                onClickButton : editPromo,
                position : "last"
            });


});

-- Update -- I have already tried autoencode = false for this column but it didn't work

IMP Update The reason why it doesn't work I believe is because datatype is 'json' but button type is not json data type. How can I create it as a separate row? In case of 'local' data it works. See the fiddle /. Even tested it in my localhost

I have used gridComplete to show HTML buttons but it shows the HTML text instead of button and encoded HTML as title which does not look good. Kindly help me remove or change the title (tooltip) and show the buttons

The Output

When I inspect this cell then I could see the following in chrome tools -

<td role="gridcell" style="" title="&amp;lt;input type='button' value='Publish' onclick='publish(100)' /&amp;gt;" aria-describedby="list_actionBtn">&lt;input type='button' value='Publish' onclick='publish(100)' /&gt;</td>

The jqgrid Code

var myColModel = [ {
    name : "promoId",
    index : 'Promotionid',
    width : 60
}, {
    name : "promoCode",
    index : 'promotioncode',
    width : 110
}, {
    name : "name",
    index : 'name',
    width : 160
}, {
    name : "description",
    index : 'description',
    width : 250
}, {
    name : "distCode",
    index : 'distributor_code',
    width : 110
} , {
    name : "statusId",
    hidden : true
} , {
    name : "statusVal",
    index : 'status',
    width : 90
}, {
    name : "startDate",
    index : 'start_date',
    width : 100,
    sorttype : "date",
    align : "right"
}, {
    name : "endDate",
    index : 'end_date',
    width : 100,
    sorttype : "date",
    align : "right"
}, {
    name : "discount",
    index : 'discount',
    width : 80
}, {
    name : "extension",
    index : 'extension',
    width : 80
}, {
    name : "isDiscount",
    hidden : true
}, {
    name : "isExtension",
    hidden : true
}, {
    name : "actionBtn",
    width : 100
} ];
$(function() {
    $("#list")
            .jqGrid(
                    {
                        url : '/suiactcodegen/action/promotion/promolist',
                        datatype : "json",
                        mtype : "GET",
                        colNames : [ "Promo ID", "Promo Code", "Name",
                                "Description", "Distributor Code", "Stt Id",
                                "Status", "Start Date", "End Date",
                                "Discount", "Extension", "Is Disc", "isExtn", "" ],
                        colModel : myColModel,
                        pager : "#pager",
                        rowNum : 10,
                        rowList : [ 10, 20, 30 ],
                        sortname : "end_date",
                        sortorder : "asc",
                        viewrecords : true,
                        gridview : true,
                        rownumber : true,
                        autoencode : true,
                        width : '1000px',
                        height : 'auto',
                        caption : "Promotion Summary",
                        gridComplete: function() {
                            var ids = $("#list").jqGrid('getDataIDs');
                            for (var i = 0; i < ids.length; i++) {
                                var rowId = ids[i],
                                    statusId = $("#list").jqGrid ('getCell', rowId, 'statusId'),
                                    activeBtn = "";
                                    if (statusId == 0) { // Inactive
                                        activeBtn = "<input type='button' value='Publish' " +
                                           "onclick='publish(" + rowId + ")' />";
                                    }
                                    //else if (statusId == 1) { // Published
                                    //  activeBtn = "<input type='button' value='Expire' " +
                                    //       "onclick=\"expire(" + rowId + ");\" />";
                                    //} 
                                 $("#list").jqGrid('setRowData', rowId, { actionBtn: activeBtn });
                            }
                        } 
                        }).jqGrid('navGrid', '#pager', {
                add : false,
                edit : false,
                del : false,
                search : true,
                refresh : false
            }).jqGrid('navButtonAdd', '#pager', {
                caption : " Edit ",
                // buttonicon: "ui-icon-bookmark",
                onClickButton : editPromo,
                position : "last"
            });


});

-- Update -- I have already tried autoencode = false for this column but it didn't work

IMP Update The reason why it doesn't work I believe is because datatype is 'json' but button type is not json data type. How can I create it as a separate row? In case of 'local' data it works. See the fiddle http://jsfiddle/zpXCT/3/. Even tested it in my localhost

• javascript
• jquery
• html
• jqgrid

Share Follow edited Aug 3, 2013 at 11:18 abhihello123 asked Aug 2, 2013 at 6:19 abhihello123abhihello123 1,72811 gold badge2222 silver badges3939 bronze badges 4

• What version of jqGrid are you using? – Justin Ethier Commented Aug 2, 2013 at 13:46
• Justin, 4.3.2 version of jqGrid and jQuery 1.6.1 – abhihello123 Commented Aug 2, 2013 at 13:58
• Can you create a fiddle? – Salman Commented Aug 2, 2013 at 17:35
• @Salman, I created a sample fiddle with similar case except that the data is local and it works fine. But I am using server data and can't create a fiddle with server data. Have a look at jsfiddle/zpXCT/2 – abhihello123 Commented Aug 3, 2013 at 10:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Sry I copied the basic grid from JqGrid site and then edited that and didn't notice that autoencode:true for grid level. So even though I mentioned it for column level it wasn't working. Now it appears.

Set colmodel datatype = 'html'