Merge Two fields in jqgrid

Question

I have a jqgrid that contains user properties. These properties are firstname, middlename, lastname, age, gender etc. I want to display full name instead of displaying firstname, middlename and lastname separately. So this fill name column will have firstname, middlename and lastname concatenated. Please how do i do this. Thanks

Update: I am using struts 2 web framework

        <s:url id="studentTableURL" namespace="/student" action="loadStudentsTable"/>
        <tr>
            <td>
                <sjg:grid id="studentGrid" caption="%{getText('studentsearch.title')}" dataType="json" href="%{studentTableURL}" pager="true"
                          gridModel="studentList"
                          rowList="10,15,20"
                          rowNum="15"
                          rownumbers="true"
                          onSelectRowTopics="rowselect"
                          >
                    <sjg:gridColumn name="id" align='left' index="id" title='Id' hidden="true"/>
                    <sjg:gridColumn name="studentNumber" width="100" align='left' index="studentNumber" title='%{getText("studentaction.studentnumber")}' sortable="true"/>
                    <sjg:gridColumn name="firstName" align='left' index="firstName" title='%{getText("studentaction.firstname")}' sortable="true"/>
                    <sjg:gridColumn name="lastName" align='left' index="lastName" title='%{getText("studentaction.lastname")}' sortable="true"/>
                    <sjg:gridColumn name="gender" align='left' width="80" index="gender" title='%{getText("studentaction.gender")}' sortable="true"/>
                    <sjg:gridColumn name="phoneNumber" align='left' width="100" index="phoneNumber" title='%{getText("studentaction.phonenumber")}' sortable="true"/>
                </sjg:grid>
            </td>
        </tr>

Could you post the code which generates the grid. At least the data it's being fed would be helpful. — Rory McCrossan, Apr 11 '12 at 10:09

score 3 · Accepted Answer · answered Apr 11 '12 at 18:49

Have hidden:true for the columns you don't want i.e. firstname, lastname

Implement the formatter for an extra column with name="id" as follows

function myFormatter(cellvalue, options, rowObject){
    return rowObject.firstName + " " + rowObject.lastName;
    ...
}

score 1 · Answer 2 · edited May 23 '17 at 12:20

You question is very close to another one which I just answered. It's a little difficult for me to understand the grid definition because you posted no JavaScript code which will be run on the client side.

I would recommend you to add new composed column fullName to the grid definition and fill the column with the data on the client side inside of beforeProcessing. In the way jqGrid will just see the data for the fullName in the input. So all should work without large efforts. If you don't need display firstName and lastName separately you can just remove the columns from the grid definition.

The way with the custom formatter can work too depend from other settings which you use. To write custom formatter it's important to know the exact format of data in the server response. For example it's important to know whether you use repeatitems: false property in jsonReader or not. The same information one need to know to write correct implementation of beforeProcessing. The most advantages of the beforeProcessing approach you will see if you would use loadonce: true option and use local sorting or filtering of the data.

Justin Ethier · Answer 3 · 2012-04-11T14:15:47.640

The easiest solution is to modify the data source (EG: XML/JSON web service) to add the new column there.

Alternatively you can use a new full_name column with a custom formatter to achieve this, but it is a bit tricky to access other columns in the row from within the formatter, so a helper function is required:

function getRowObjectFromFormatter (key, rowObject){
    var searchHTML = function(){
        return jQuery(rowObject).find('td[aria-describedby*="' + key + '"]').text();
    }, tmp;

    if (rowObject.constructor != undefined){
        if (rowObject.constructor == Object){
            return rowObject[key];
        } else if (rowObject.constructor == HTMLTableRowElement){
            return searchHTML();
        }
    } else if (jQuery.browser.msie && jQuery.browser.version == "7.0"){
        // Hack to correctly extract data from an HTML table in IE7
        tmp = searchHTML();
        if (tmp != null && tmp.length > 1){
            return tmp;
        }
    }

    return jQuery(rowObject).find(key).text();
}

function myFormatter(cellvalue, options, rowObject){
    var otherColumn = getRowObjectFromFormatter('otherColumn', rowObject);
    ...
}

Please how can i implement this. I know about custom formatter. Since the cellvalue deals with only one of the fields, how can i get the other fields. Thanks — Uchenna Nwanyanwu, Apr 11 '12 at 14:07
Thanks very much. Let me test it and see how it comes up. Thanks for your effort — Uchenna Nwanyanwu, Apr 11 '12 at 14:27

Merge Two fields in jqgrid

3 Answers3