CODEWITHSUNDEEP
jqueryjqgridstruts2
Uchenna Nwanyanwu
Uchenna Nwanyanwu

Reputation: 3204

Merge Two fields in jqgrid

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>

Upvotes: 1

Views: 5708

Answers (3)

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 1

t0s6i
t0s6i

Reputation: 171

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;
    ...
}

Upvotes: 4

Justin Ethier
Justin Ethier

Reputation: 134207

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);
    ...
}

Upvotes: 0

Related Questions