JQGrid: Dropdown for selecting items from a foreign table - DataValueField vs DataTextField

Question

Suppose Items and ItemTypes have numeric primary keys ItemID and ItemTypeID. Each Item is assigned an ItemType.

I have a JQGrid to edit Items. When not in edit mode, I would like to see the name of the ItemType, not the ItemTypeID:

    TYPE       | TITLE
    -----------+--------------------
    Category A | Item 1
    Category A | Item 2
    Category B | Item 3
    Category B | Item 4

In edit mode, I want to see a dropdown that displays the ItemType text, but that returns the ItemTypeID to the server.

Here's what I have so far (using the ASP.NET wrapper for JQGrid):

<trirand:jqgrid id="Grid1" runat="server" ... >
    <columns>
        <trirand:jqgridcolumn datafield="ItemID" editable="false" visible="false" width="50" primarykey="true" />
        <trirand:jqgridcolumn datafield="ItemTypeID" editable="true" edittype="DropDown" editorcontrolid="ItemTypes" />
        <trirand:jqgridcolumn datafield="Title" editable="true" sortable="true" />
        ...
    </columns>
</trirand:jqgrid>
<asp:sqldatasource runat="server" id="ItemTypesDatasource" connectionstring="<%$ ConnectionStrings:Main %>" selectcommand="Select ItemTypeID,Title from ItemTypes order by Title" />
<asp:dropdownlist runat="server" id="ItemTypes" datasourceid="ItemTypesDatasource" datavaluefield="ItemTypeID" datatextfield="Title" />

The problem is that when not in edit mode, it displays the numeric ItemTypeID, rather than the text labels:

    TYPE       | TITLE
    -----------+--------------------
    100123     | Item 1
    100123     | Item 2
    100124     | Item 3
    100124     | Item 4

Is there any way to have JQGrid respect the distinction between DataValueField and DataTextField? (Either using the jQuery API or the ASP.NET plugin.)

Answer 1

For those who use javascrpt, not the asp.net wrapper,the javascript way is using formatter and unformatter:

column model :

editoptions:{value:'1:Type1;2:Type2;3:Type3;4:Type4;5:Type5'}, formatter:showTextFmatter, unformat:unformatShowText,

my formatter, you should write your own like follows:

    function showTextFmatter (cellvalue, options, rowObject)   
    {  
       var vts={};
       if(options.colModel.editoptions.values==undefined)
       {
           vtStr = options.colModel.editoptions.value.split(';');
           for(var i =0;i<vtStr.length;i++)
           {
              kv = vtStr[i].split(':');
              vts[kv[0]]=vtStr[i]; 
           }
           options.colModel.editoptions.values = vts;
       }
       return options.colModel.editoptions.values[cellvalue];   
    }   
    function  unformatShowText (cellvalue, options)   
    { 
       return cellvalue.split(':')[0];  
    }