A pivot table is a data summarization tool found in data visualization programs such as spreadsheets or business intelligence software. Among other functions, a pivot-table can automatically sort, count total or give the average of the data stored in one table or spreadsheet.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="JQSuiteASPNETExample.examples.grid.pivot.summaryfooter._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 - Pivot Summary Basic</title>
    <!-- The jQuery UI theme that will be used by the grid -->
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/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" />
    <!-- jQuery runtime minified -->
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-2.2.0.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>   
    
    <style type="text/css">    
        body, html { font-size: 80%; }    
    </style>
</head>

<body>
    <form id="form1" runat="server">

    <trirand:JQGrid runat="server" ID="JQGrid1" Width="675" Height="400">        
        <Columns>
            <trirand:JQGridColumn DataField="CategoryName" />
            <trirand:JQGridColumn DataField="ProductName"  />
            <trirand:JQGridColumn DataField="Country"  />
            <trirand:JQGridColumn DataField="Price"/>
            <trirand:JQGridColumn DataField="Quantity" />
        </Columns>
        <PivotSettings GroupSummaryPosition="Footer">
            <XDimension>
                <trirand:PivotDimension DataName="CategoryName" />
                <trirand:PivotDimension DataName="ProductName" />
            </XDimension>
            <YDimension>
                <trirand:PivotDimension DataName="Country" />
            </YDimension>
            <Aggregates>
                <trirand:PivotAggregate
                    Member="Price"
                    Aggregator="Sum"
                    Width="80"
                    Label="Sum"
                    GroupSummaryType="Sum"
                    Formatter="Number"
                    Align="Right" />
            </Aggregates>
        </PivotSettings>
        <PagerSettings PageSize="30" />
    </trirand:JQGrid>
    
    <br /><br />    
    <trirand:codetabs runat="server" id="AutomaticSortingTabs"></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 JQSuiteASPNETExample.dbml;

namespace JQSuiteASPNETExample.examples.grid.pivot.summaryfooter
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var northWindModel = new DataClasses1DataContext();

            IQueryable query = from p in northWindModel.Products
                               join od in northWindModel.Order_Details on p.ProductID equals od.ProductID
                               join cat in northWindModel.Categories on p.CategoryID equals cat.CategoryID
                               join o in northWindModel.Orders on od.OrderID equals o.OrderID
                               join c in northWindModel.Customers on o.CustomerID equals c.CustomerID
                               where c.Country == "USA" || c.Country == "UK" || c.Country == "Germany"
                               select new
                               {
                                   CategoryName = cat.CategoryName,
                                   ProductName = p.ProductName,
                                   Country = c.Country,
                                   Price = od.Quantity * od.UnitPrice,
                                   Quantity = od.Quantity
                               };

            JQGrid1.DataSource = query;
            JQGrid1.DataBind();
        }
    }
}
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" />