Custom edit fields (dropdown, checkbox, etc)

By default all edit fields in both inline and dialog editing are textboxes. However, in some cases it might be needed to have custom edit form controls for different fields. This is why jqGrid offers 5 built-in form controls for that. You can specify the edit form control you wish to use for a particular column by setting the EditType property to one of the following values - TextBox, TextField, CheckBox, Password, DropDown. Example:

<trirand:JQGrid ID="JQGrid1" runat="server" OnRowEditing="JQGrid1_RowEditing">         
<Columns>
   <trirand:JQGridColumn DataField="EmployeeID" Editable="false" PrimaryKey="true" Width="50"/>                
   <trirand:JQGridColumn DataField="FirstName" Editable="true" EditType="TextBox"/>
   <trirand:JQGridColumn DataField="LastName" Editable="true" EditType="TextArea" />
   <trirand:JQGridColumn DataField="Password" Editable="true" EditType="Password" />
   <trirand:JQGridColumn DataField="Trainee" Editable="true" EditType="CheckBox" />
   <trirand:JQGridColumn DataField="Department" Editable="true" EditType="DropDown" EditValues="1:Sales;2:Support;3:Development"/>                
</Columns>            
</trirand:JQGrid>

Notice that for the simple types TextBox, TextArea, Password and CheckBox, jqGrid knows easily which form input control to produce. For DropDown however, we need to know the items of the dropdown, therefore we can specify them in the EditValues property as value:name pairs separated by semi-colon, as shown in the grid definition above in the "Department" field.

This can be convenient in some cases, however in most cases these values will come out of the database and it will be hard to specify in hardcoded strings. This is why there is a property called EditorControlID for each column and you can specify an external asp:dropdownlist control to use for EditType.DropDown. This way, you can bind the control to database or use it declaratively or programmaticaly however you wish. Example:

<asp:AccessDataSource ID="AccessDataSource1" runat="server"

        DataFile="~/App_Data/Northwind.mdb"

        SelectCommand="SELECT [OrderID], [CustomerID], [Freight], [OrderDate], [ShipCity] FROM [Orders]">

    </asp:AccessDataSource>

   <asp:AccessDataSource ID="AccessDataSource2" runat="server"

        DataFile="~/App_Data/Northwind.mdb"

        SelectCommand="SELECT [CustomerID], [CompanyName] FROM [Customers]">

    </asp:AccessDataSource>

    <trirand:JQGrid runat="server" ID="JQGrid1" DataSourceID="AccessDataSource1"

        ShowToolBar="True">

        <Columns>

            <trirand:JQGridColumn DataField="OrderID" PrimaryKey="True" />

            <trirand:JQGridColumn DataField="CustomerID" Editable="true" EditType="DropDown" EditorControlID="CustomersDdl"  />

            <trirand:JQGridColumn DataField="Freight" Editable="true"   />

            <trirand:JQGridColumn DataField="OrderDate" DataFormatString="{0:d}" />

            <trirand:JQGridColumn DataField="ShipCity" />

        </Columns>

        <ToolBarSettings ShowEditButton="true" ShowRefreshButton="True"

            ShowSearchButton="True" />

    </trirand:JQGrid>

    <asp:DropDownList runat="server" ID="CustomersDdl"

        DataSourceID="AccessDataSource2"

        DataValueField="CustomerID"

        DataTextField="CompanyName">

    </asp:DropDownList>

This will product the following edit form