JQGrid: Dropdown for selecting items from a foreign table - DataValueField vs DataTextField
- by Herb Caudill
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.)
