When a column is editable, you can select how end-users will edit it. This is controlled by the Column.EditType property and current has five different options - TextBox, TextArea, DropDown, Password, CheckBox.

In addition to that, you can specify the values end-users will see in name:value pairs in the EditValues property of Columns - this is especially useful for SearchType.DropDown. Here is an example

<trirand:JQGridColumn
DataField="CompanyName"
Editable="true"
EditType="DropDown"
EditValues="1:FedEx;2:UPS;3:TNT" />

You can also use the EditorControID property of the column to specify from which asp:dropdownlist the grid control should take the values for its edit dropdown (check the ASPX tab for details)

jqGrid for ASP.NET supports custom edit types for edit fields in edit dialogs. Just set EditType = EditType.Custom.
When you do that, you will also need to set to additional properties - EditTypeCustomCreateElement and EditTypeCustomGetValue - the names of the javascript functions that will format the edit field.
The javascript function creating the field should return an element with the editing controls. The get value function should return the value from these controls.
Please, review to the Javascript at the bottom of the ASPX page for details how this can be achieved. The settings for the custom editing are in the C#/VB.NET tabs.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="JQSuiteASPNETExample.examples.editing_data.inline_edit_types._default" %>
<%@ Register Assembly="Trirand.Web" TagPrefix="trirand" Namespace="Trirand.Web.UI.WebControls" %>

<!DOCTYPE html>
<html lang="en-us">
<head id="Head1" runat="server">
    <meta charset="utf-8">
    <title>jqGrid for ASP.NET WebForms - custom edit types for inline edit</title>
    <!-- The jQuery UI theme that will be used by the grid -->
    <link rel="stylesheet" type="text/css" media="screen" href="http://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css" />
    <!-- The jQuery UI theme extension jqGrid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="/themes/ui.jqgrid.css" />
    <!-- The jQuery UI theme extension jqAutoComplete -->
    <link rel="stylesheet" type="text/css" media="screen" href="/themes/ui.jqautocomplete.css" />
    <!-- jQuery runtime minified -->
    <script src="/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <!-- The localization file we need, English in this case -->
    <script src="/js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
    <!-- The jqGrid client-side javascript -->
    <script src="/js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>
    
    <!-- The javascript for the grid search/edit advanced controls - datepicker and autocomplete -->
    <script src="/js/trirand/jquery.jqDatePicker.min.js" type="text/javascript"></script>
    <script src="/js/trirand/jquery.jqAutoComplete.min.js" type="text/javascript"></script>    
    
    <style type="text/css">
        body, html { font-size: 80%; }    
        .ui-autocomplete-loading { background: white url('loading.gif') right center no-repeat; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>      
    <trirand:JQGrid runat="server" ID="JQGrid1" OnRowEditing="JQGrid1_RowEditing" Width="650">
        <Columns>
            <trirand:JQGridColumn 
                DataField="OrderID" 
                Width="50"
                PrimaryKey="True" />
            <trirand:JQGridColumn 
                Width="75"
                DataField="OrderDate" 
                DataFormatString="{0:yyyy-MM-dd}" 
                Editable="true" 
                EditType="DatePicker"
                EditorControlID="DatePicker1"    
            />
            <trirand:JQGridColumn 
                DataField="CustomerID" 
                Editable="true" 
                EditType="DropDown" 
                EditorControlID="CustomersDdl" 
                Width="120" />
            <trirand:JQGridColumn 
                DataField="Freight" 
                Editable="true" 
                EditType="Custom" 
                EditTypeCustomCreateElement="createFreightEditElement" 
                EditTypeCustomGetValue="getFreightElementValue" />            
            <trirand:JQGridColumn 
                DataField="ShipName" 
                Editable="true" 
                EditType="AutoComplete"
                EditorControlID="AutoComplete1" />
        </Columns> 
        <ClientSideEvents RowSelect="editRow" />               
    </trirand:JQGrid>
    
     <script type="text/javascript">

         var lastSelection;

         function editRow(id) {
             if (id && id !== lastSelection) {
                 var grid = jQuery("#<%= JQGrid1.ClientID %>");
                 grid.restoreRow(lastSelection);
                 grid.editRow(id, true);
                 lastSelection = id;
             }
         }
       
       </script>
    
    <trirand:JQDatePicker 
        runat="server"
        ID="DatePicker1"
        DateFormat="yyyy-MM-dd"
        DisplayMode="ControlEditor"
        ShowOn="Focus" />
        
    <trirand:JQAutoComplete
        runat="server"
        ID="AutoComplete1"
        DisplayMode="ControlEditor"
        DataSourceID="SqlDataSource1"
        DataTextField="ShipName"
        LoadingImageUrl="loading.gif"
        DropDownWidth="200"
    />                
    
    <asp:DropDownList runat="server" ID="CustomersDdl" 
        DataSourceID="AccessDataSource2"
        DataValueField="CustomerID"
        DataTextField="CompanyName">
    </asp:DropDownList>
    
    <asp:AccessDataSource ID="AccessDataSource2" runat="server" 
        DataFile="~/App_Data/Northwind.mdb" 
        SelectCommand="SELECT [CustomerID], [CompanyName] FROM [Customers]">
    </asp:AccessDataSource>
    
    <asp:SqlDataSource runat="server" ID="SqlDataSource1" 
        ConnectionString="<%$ ConnectionStrings:SQL2008_661086_trirandEntities %>"        
        SelectCommand="SELECT DISTINCT [ShipName] FROM [Orders]">
    </asp:SqlDataSource>  
    
        <script type="text/javascript">

            // The javascript executed specified by JQGridColumn.EditTypeCustomCreateElement when EditType = EditType.Custom 
            // The two parameters are the value of the field
            // and the edit options - passed from JQGridColumn.EditFieldAttributes collection
            function createFreightEditElement(value, editOptions) {
                var span = $("<span>");
                var label = $("<span>", { html: "0" });
                var radio = $("<input>", { type: "radio", val: "0", name: "freight", id: "zero", checked: (value != 25 && value != 50 && value != 100) });
                var label1 = $("<span>", { html: "25" });
                var radio1 = $("<input>", { type: "radio", val: "25", name: "freight", id: "fifty", checked: value == 25 });
                var label2 = $("<span>", { html: "50" });
                var radio2 = $("<input>", { type: "radio", val: "50", name: "freight", id: "fifty", checked: value == 50 });
                var label3 = $("<span>", { html: "100" });
                var radio3 = $("<input>", { type: "radio", val: "100", name: "freight", id: "hundred", checked: value == 100 });

                span.append(label).append(radio).append(label1).append(radio1).append(label2).append(radio2).append(label3).append(radio3);

                return span;
            }

            // The javascript executed specified by JQGridColumn.EditTypeCustomGetValue when EditType = EditType.Custom
            // One parameter passed - the custom element created in JQGridColumn.EditTypeCustomCreateElement
            function getFreightElementValue(elem) {
                return $(elem).find("input:radio:checked").val();
            }
    
    </script>

   <br /><br />
   <trirand:codetabs runat="server" id="DataTableCodeTabs"></trirand:codetabs>    
       
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using Trirand.Web.UI.WebControls;

namespace JQSuiteASPNETExample.examples.editing_data.inline_edit_types
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (JQGrid1.AjaxCallBackMode == AjaxCallBackMode.RequestData)
            {
                JQGrid1.DataSource = GetData();
                JQGrid1.DataBind();
            }
        }

        protected void JQGrid1_RowEditing(object sender, Trirand.Web.UI.WebControls.JQGridRowEditEventArgs e)
        {
            DataTable dt = GetData();
            dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };
            DataRow rowEdited = dt.Rows.Find(e.RowKey);

            rowEdited["CustomerID"] = e.RowData["CustomerID"];
            rowEdited["Freight"] = e.RowData["Freight"];
            rowEdited["OrderDate"] = e.RowData["OrderDate"];
            rowEdited["ShipName"] = e.RowData["ShipName"];

            JQGrid1.DataSource = GetData();
            JQGrid1.DataBind();
        }

        protected DataTable GetData()
        {
            if (Session["EditDialogDataOrders"] == null)
            {
                // Create a new Sql Connection and set connection string accordingly
                SqlConnection sqlConnection = new SqlConnection();
                sqlConnection.ConnectionString = ConfigurationManager.ConnectionStrings["SQL2008_661086_trirandEntities"].ConnectionString;
                sqlConnection.Open();

                string sqlStatement = "SELECT OrderID, CustomerID, Freight, OrderDate, ShipName FROM Orders";

                // Create a SqlDataAdapter to get the results as DataTable
                SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(sqlStatement, sqlConnection);

                // Create a new DataTable
                DataTable dtResult = new DataTable();

                // Fill the DataTable with the result of the SQL statement
                sqlDataAdapter.Fill(dtResult);

                Session["EditDialogDataOrders"] = dtResult;

                return dtResult;
            }
            else
            {
                return Session["EditDialogDataOrders"] as DataTable;
            }
        }
    }
}
Switch theme:


Theming is based on the very popular jQuery ThemeRoller standard. This is the same theming mechanism used by jQuery UI and is now a de-facto standard for jQuery based components. The benefits of using ThemeRoller are huge. We can offer a big set of ready to use themes created by professional designers, including Windows-like themes (Redmond), Apple-like theme (Cupertino), etc. In addition to that any jQuery UI controls on the same page will pick the same theme.

Last, but not least, you can always roll your own ThemeRoller theme, using the superb Theme Editor

To use a theme, simply reference 2 Css files in your Html <head> section - the ThemeRoller theme you wish to use, and the jqGrid own ThemeRoller Css file. For example (Redmond theme):

<link rel="stylesheet" type="text/css" media="screen" href="/themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/themes/ui.jqgrid.css" />