gistfile1.htm

<%@ Page Language="C#" AutoEventWireup="true"  Inherits="VendorYellowPages.Web.Actions.Grid.Grid" 
 MasterPageFile="~/Shared/Site.Master"%>

<asp:Content ContentPlaceHolderID="_head" runat="server">
    <%=this.JavaScript("jqGrid/js/grid.locale-en.js")%>
    <%=this.JavaScript("jqGrid/js/jquery.jqGrid.min.js")%>
    
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery("#list").jqGrid({
                url: '/Grid/data',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['Inv No', 'Date', 'Amount', 'Tax', 'Total', 'Notes'],
                colModel: [
                              { name: 'invid', index: 'invid', width: 55 },
                              { name: 'invdate', index: 'invdate', width: 90 },
                              { name: 'amount', index: 'amount', width: 80, align: 'right' },
                              { name: 'tax', index: 'tax', width: 80, align: 'right' },
                              { name: 'total', index: 'total', width: 80, align: 'right' },
                              { name: 'note', index: 'note', width: 150, sortable: false }
                            ],
                pager: '#pager',
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: 'invid',
                sortorder: 'desc',
                viewrecords: true,
                caption: 'My first grid'
            });
        });
</script>

</asp:Content>

<asp:Content ContentPlaceHolderID="_title" runat="server">jqGrid</asp:Content>

<asp:Content ContentPlaceHolderID="_mainContent" runat="server">

<table id="list"></table> 
<div id="pager"></div> 

</asp:Content>