Sorting

Para aplicar el icono personalizado de selección a la cabecera del DataGrid, he usado el evento RowDataBound para aplicar un estilo CSS a la celda de la cabecera.

protected void RowDataBound(object sender, GridViewRowEventArgs args) {

    GridView gridView = (GridView)sender;

    if (gridView.SortExpression.Length > 0) {

       int cellIndex = -1;

       foreach (DataControlField field in gridView.Columns) {

            if (field.SortExpression == gridView.SortExpression) {

                  cellIndex = gridView.Columns.IndexOf(field);

                  break;

            }

       }

       if (cellIndex > -1) {

          if (args.Row.RowType == DataControlRowType.Header) {

              args.Row.Cells[cellIndex].CssClass +=

                           (gridView.SortDirection == SortDirection.Ascending ? " sortasc" : " sortdesc");

          }

       }

   }

}

Border

Se usa un DIV para definir el marco de la tabla. Entonces utilizamoa CSS para aplicar imágenes de fondo a estos DIVs. 

<div class="grid">

   <div class="rounded">

      <div class="top-outer"><div class="top-inner"><div class="top">

      <h2>Northwind Products</h2>

      </div></div></div>

      <div class="mid-outer"><div class="mid-inner"><div class="mid">

            <%--Codigo HTML de la Grilla--%>

       </div></div></div>

       <div class="bottom-outer"><div class="bottom-inner">

       <div class="bottom"></div></div></div>

     </div>

</div>

Pager Style y Settings

El control GridView permite personalizar la forma de los controles de paginación utilizando el elemento PagerSettings (si desea personalizar aún más puede utilizar el PagerTemplate). Proporciona otros atributos que se pueden utilizar para cambiar la apariencia de la fila de la página. Aquí hay una tabla que describe los modos de apoyo de la PagerSettings.

Desafortunadamente, no hay un modo de NextPreviousFirstLastNumeric, ya que en realidad es la que yo usaría. Sin embargo, el modo de NumericFirstLast está muy cerca de lo que se necesita para configurar la grilla.

<PagerSettings Mode="NumericFirstLast" PageButtonCount="7" FirstPageText="" LastPageText="" />

Todo el Codigo del GridView

<asp:GridView ID="gvProducts" runat="server" DataSourceID="odsProducts"

OnRowDataBound="RowDataBound" AutoGenerateColumns="false"

AllowPaging="true" AllowSorting="true" CssClass="datatable" CellPadding="0" CellSpacing="0"

BorderWidth="0" GridLines="None">

    <PagerStyle CssClass="pager-row" />

    <RowStyle CssClass="row" />

    <PagerSettings Mode="NumericFirstLast" PageButtonCount="7" FirstPageText="" LastPageText="" />

     <Columns>

        <asp:BoundField  HeaderText="ID" DataField="ProductID" SortExpression="ProductID"

            HeaderStyle-CssClass="first" ItemStyle-CssClass="first" />

        <asp:BoundField HeaderText="Name" DataField="ProductName" SortExpression="ProductName" />

        <asp:BoundField HeaderText="Quantity" DataField="QuantityPerUnit" SortExpression="QuantityPerUnit" />

        <asp:BoundField HeaderText="Unit Price" DataField="UnitPrice" SortExpression="UnitPrice" DataFormatString="{0:c}" ItemStyle-CssClass="money" />

        <asp:BoundField HeaderText="In Stock" DataField="UnitsInStock" SortExpression="UnitsInStock" />

        <asp:BoundField HeaderText="On Order" DataField="UnitsOnOrder" SortExpression="UnitsOnOrder" />

    </Columns>

</asp:GridView>

Descarga la Demo desde Aqui , Disfrútalo.