Adding hyperlink to grid cell value and need to edit that cell on edit operation

Question

I had displayed the data in jqgrid by formatting the values as below

GroupName | GroupDesc | Action

---

Hari              | desc1         |   Edit

---

below my code which i tried up-to now

{
    $("#group_details").jqGrid({

        datatype : "local",
        data : groupdataMod,
        autoheight : true,
        autowidth : true,
        shrinkToFit : true,
        jsonReader : {
            repeatitems : false
        },
        colNames : groupColNames,
        colModel : [ {
            name : 'userGroupName',
            index : 'userGroupName',
            sorttype : "text",
            align : "left",
            sortable : true,
            editable : true,
            formatter: function (cellvalue, options, rowObject) {
                return "<a href='javascript:void(0);' class='anchor usergroup_name link'>" +
                       cellvalue + '</a>';
            }
        }, {
            name : 'userGroupDesc',
            index : 'userGroupDesc',
            sorttype : "text",
            align : "text",
            editable : true
        }, {
            name : 'action',
            index : 'action'
        } ],
        search : true,
        pager : '#pager_group',
        rowNum : 13,
        height : "auto",
        multiselect : true,
        imgpath : 'css/images/',
        rowList : [ 13, 26, 39, 52 ],
        sortname : 'id',
        sortorder : 'asc',
        viewrecords : true,
        loadComplete : function() {
            ModifyGridDefaultStyles_group();
        },
        onCellSelect: function(rowid, iCol, cellcontent){ 
            if(cellcontent=="Edit"){
                grid.jqGrid('editRow',rowid);
            } 

        }
    });
}

Here i am formatting the groupName value with the formatter option and adding hyperlink to the value. But when editing the row again, its showing the entire anchor tag in the cell input box as below edit row
But i want to see only value of the cell input box while editing. Could anyone help how to display only value in the row while editing without anchor tag.

Answer 1

I got the solution for this problem according to my functionality. Here is my code to achieve it.

var reqPar;
var grid;
var selRowId, celValue;
var groupdataMod;
var jsonResponse;
var groupColNames = [ "GROUP NAME", "GROUP DESCRIPTION", "ACTION", "GROUP ID" ];
function GroupDisplay(groupdata) {
    var groupDetails = JSON.parse(groupdata.toString());
    groupdataMod = groupDetails.userGroupDetails;

    $(document).ready(function() {
        grid = $("#group_details");

        $("#group_details").jqGrid({

            datatype : "local",
            data : groupdataMod,
            autoheight : true,
            autowidth : true,
            shrinkToFit : true,
            jsonReader : {
                repeatitems : false
            },
            colNames : groupColNames,
            colModel : [ {
                name : 'userGroupName',
                index : 'userGroupName',
                sorttype : "text",
                align : "left",
                sortable : true,
                editable : true,
                edittype:'custom',
                formatter: function (cellvalue, options, rowObject) {
                    return "<a href='javascript:void(0);' class='anchor usergroup_name link'>" +
                           cellvalue + '</a>';
                },
                editoptions:{custom_element: myelem,custom_value:myvalue11}
            }, {
                name : 'userGroupDesc',
                index : 'userGroupDesc',
                sorttype : "text",
                align : "text",
                editable : true
            }, {
                name : 'action',
                index : 'action'
            },{
                name : 'userGroupId',
                index : 'userGroupId',
                hidden:true,
                editable: true,
                editrules:{edithidden:false,disabled: true}
            } ],
            search : true,
            pager : '#pager_group',
            rowNum : 13,
            height : "auto",
            multiselect : true,
            imgpath : 'css/images/',
            rowList : [ 13, 26, 39, 52 ],
            sortname : 'id',
            sortorder : 'asc',
            viewrecords : true,
            loadComplete : function() {
                ModifyGridDefaultStyles_group();
            },gridComplete: function(){
                var ids = grid.jqGrid('getDataIDs');
                for(var i=0;i < ids.length;i++){
                    var cl = ids[i];
                    be = "<input style='height:22px;width:auto;' type='button' value='Edit' onclick=\"grid.jqGrid('editRow','"+cl+"');\"  />";
                    se = "<input style='height:22px;width:auto;' type='button' value='Save' onclick=\"grid.saveRow('"+cl+"',editparameters);myvalEdit('"+cl+"');\"  />"; 
                    ce = "<input style='height:22px;width:auto;' type='button' value='Clear' onclick=\"grid.restoreRow('"+cl+"');\" />";
                    grid.jqGrid('setRowData',ids[i],{action:be+se+ce});
                }   
            },
            onCellSelect: function(rowid, iCol, cellcontent){ 
                if(cellcontent=="Edit"){      
                    grid.jqGrid('editRow',rowid);
                }
            },
            editurl: "Oper.htm",
            mtype:"POST",
            editData: function (){
                var sel_id = grid.jqGrid('getGridParam', 'selrow');
                //alert("sel_id >>>>"+sel_id);
            }
        });
        $("#grid").jqGrid('setGridParam', {
            ondblClickRow : function(rowid, iRow, iCol, e) {
                alert('double clicked');
            }
        });
        $("#group_details").jqGrid('navGrid', '#pager_group', {
            search : true,
            refresh : true,
            add : false,
            edit : false,
            del : false,
            view: true
        },{
            beforeShowForm: function(form){
                var elm = form.find('#userGroupName');
                elm.val($(elm.val()).text());
        }
        });
        grid.jqGrid('inlineNav',"#pager_group",{edit:false,add:true,del:false});

    });
}
function sendMail() {
    var link = 'mailto:noReply@aig.com?subject=Message from '
            + document.getElementById('email_address').value + '&body='
            + document.getElementById('email_address').value;
    window.location.href = link;
}
function ModifyGridDefaultStyles_group() {
    $('#' + "group_details" + ' tr').removeClass("ui-widget-content");
    $('#' + "group_details" + ' tr:nth-child(even)').addClass("evenTableRow");
    $('#' + "group_details" + ' tr:nth-child(odd)').addClass("oddTableRow");
}

function exportGrid() {
    var grid = "#group_details";

    var mya = new Array();
    mya = $(grid).getDataIDs(); // Get All IDs

    var data = $(grid).getRowData(mya[0]); // Get First row to get the labels
    var colNames = new Array();

    var ii = 0;
    for ( var i in data) {
        colNames[ii++] = i;
    } // capture col names

    var html = "";

    var columnNames = $(grid).jqGrid('getGridParam', 'colNames');

    for (i = 0; i < columnNames.length - 1; i++) {
        html = html + columnNames[i + 1] + "\t";
    }

    html = html + "\n";

    for (i = 0; i < mya.length; i++) {
        data = $(grid).getRowData(mya[i]); // get each row
        for (j = 0; j < colNames.length; j++) {
            html = html + data[colNames[j]] + "\t"; // output each column as tab delimited
        }

        html = html + "\n"; // output each row with end of line
    }
    html = html + "\n"; // end of line at the end

    window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
    Response.Clear();
    Response.ClearContent();
    Response.ClearHeaders();
    Response.Buffer = false;
    Response.BufferOutput = false;

    //e.preventDefault();
    Response.AddHeader("Content-Disposition",
            "attachment;filename=download.xls");
}


function editLinkFmatterEdit(cellvalue, options, rowObject, rowid, cellcontent) {
    var removelink = "";
    var groupName = rowObject["userGroupName"];
    var groupDesc = rowObject["userGroupDesc"];
    reqPar = [ groupName, groupDesc ];
    removelink = "<a href=javascript:void(0); onclick=enableEdit(reqPar) class=requestlink>Edit</a>";
    return removelink;
}
function editLinkFmatterGrp(cellvalue, options, rowObject, rowid) {
    var removelink = "";
    var groupName = rowObject["userGroupName"];
    var groupDesc = rowObject["userGroupDesc"];
    reqPar = [ groupName, groupDesc ];
    removelink = "<a class='anchor usergroup_name link'>"+groupName+"</a>";
    return removelink;
}
function myvalue11(elem, operation, value) {
    if(operation === 'get') {
       return $(elem).val();
    } else if(operation === 'set') {
       $('input',elem).val(value);
    }
}
function myelem (value, options) {
      var el = document.createElement("input");
      var val1 = $(value).text();
      if (val1=="undefined"){
          //alert("undefined value is came");
          val1 = "";
      }
      el.type="text";
      el.value = val1;
      el.class = "editable inline-edit-cell ui-widget-content ui-corner-all";
      el.style = "width:96%";
      return el;
        //return $(value).text();
    }

function myvalEdit(res){
    //alert(res);
}

var editparameters = {
        "keys" : false,
        "oneditfunc" : null,
        "successfunc" : null,
        "url" : "Oper.htm",
        "extraparam" : {},
        "aftersavefunc" : null,
        "errorfunc": null,
        "afterrestorefunc" : null,
        "restoreAfterError" : true,
        "mtype" : "POST"
    };