Sort Icons Position:


Sort Action When:





You can customize the sorting UI of the grid using properties off the SortSettings collection. In this example, we are switching properties for sort icons position (horizontal - next to each other, and vertical -- one below the other). We are also setting the sort action - end users can initiate sort by clicking anywhere in the header or only on the respective sort icons. 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="GridTest.examples.sorting.customui._default" %>
<%@ Register Assembly="Trirand.Web" TagPrefix="trirand" Namespace="Trirand.Web.UI.WebControls" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
    <!-- The jQuery UI theme that will be used by the grid -->
    <link rel="stylesheet" type="text/css" media="screen" href="/themes/redmond/jquery-ui-1.8.2.custom.css" />
    <!-- The jQuery UI theme extension jqGrid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="/themes/ui.jqgrid.css" />
    <!-- jQuery runtime minified -->
    <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <!-- The localization file we need, English in this case -->
    <script src="/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <!-- The jqGrid client-side javascript -->
    <script src="/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <!-- This jQuery UI reference is needed only for the demo (code tabs). jqGrid per se does not need it. -->    
    <script src="/js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
    <style type="text/css">
        body, html { font-size: 80%; }    
    </style>
</head>
<body>
    <form id="form1" runat="server">    
        
    <asp:SqlDataSource runat="server" ID="SqlDataSource1" 
        ConnectionString="<%$ ConnectionStrings:SQL2008_449777_fhsConnectionString %>"                 
        SelectCommand="SELECT [OrderID], [RequiredDate], [ShipName], [ShipCity], [Freight] FROM [Orders]">
    </asp:SqlDataSource>   
    
    <h3>Sort Icons Position:</h3>
    <asp:DropDownList runat="server" ID="SortIconsPositionDdl" AutoPostBack="true"
        onselectedindexchanged="SortIconsPositionDdl_SelectedIndexChanged">
        <asp:ListItem Text="Horizontal"></asp:ListItem>
        <asp:ListItem Text="Vertical"></asp:ListItem>
    </asp:DropDownList>   
    
    <br />
    
    <h3>Sort Action When:</h3>
    <asp:DropDownList runat="server" ID="SortActionDdl" AutoPostBack="true"
        onselectedindexchanged="SortActionDdl_SelectedIndexChanged">
        <asp:ListItem Text="ClickOnHeader"></asp:ListItem>
        <asp:ListItem Text="ClickOnSortIcons"></asp:ListItem>
    </asp:DropDownList>   
    
    <br /><br />
        
    <trirand:JQGrid runat="server" ID="JQGrid1" DataSourceID="SqlDataSource1" Width="600px">
        <Columns>
            <trirand:JQGridColumn DataField="OrderID" HeaderText="Order ID" PrimaryKey="True" />
            <trirand:JQGridColumn DataField="RequiredDate" DataFormatString="{0:d}"/>
            <trirand:JQGridColumn DataField="ShipName" />
            <trirand:JQGridColumn DataField="ShipCity" />
            <trirand:JQGridColumn DataField="Freight" />
        </Columns>
        <SortSettings SortIconsPosition="Horizontal" SortAction="ClickOnHeader" />
    </trirand:JQGrid>
    
    <br /><br />
    <trirand:codetabs runat="server" id="tabs"></trirand:codetabs>     
    
    </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 Trirand.Web.UI.WebControls;

namespace GridTest.examples.sorting.customui
{
    public partial class _default : System.Web.UI.Page
    {
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);            
        }      

        protected void Page_Load(object sender, EventArgs e)
        {
        }

        protected void SortIconsPositionDdl_SelectedIndexChanged(object sender, EventArgs e)
        {
            switch (SortIconsPositionDdl.SelectedValue)
            {
                case "Horizontal": JQGrid1.SortSettings.SortIconsPosition = SortIconsPosition.Horizontal; break;
                case "Vertical": JQGrid1.SortSettings.SortIconsPosition = SortIconsPosition.Vertical; break;
            }            
        }

        protected void SortActionDdl_SelectedIndexChanged(object sender, EventArgs e)
        {
            switch (SortActionDdl.SelectedValue)
            {
                case "ClickOnHeader": JQGrid1.SortSettings.SortAction = SortAction.ClickOnHeader; break;
                case "ClickOnSortIcons": JQGrid1.SortSettings.SortAction = SortAction.ClickOnSortIcons; break;
            }
        }
    }
}
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.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/themes/ui.jqgrid.css" />