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

Posted by Herb Caudill on Stack Overflow See other posts from Stack Overflow or by Herb Caudill
Published on 2009-12-21T12:13:47Z Indexed on 2010/05/03 7:18 UTC
Read the original article Hit count: 901

Filed under:
|
|
|

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

© Stack Overflow or respective owner

Related posts about jqgrid

Related posts about dropdownlist