Adding jqGrid for ASP.NET to your web project

Download and unzip the contents of the archive to any convenient location. The package contains the following folders:

- [bin] - Contains the assembly DLL of the product (Trirand.Web.dll). This is the assembly that you can reference directly in your ASPX file (or better yet, add it to your ToolBox and then drag & drop it from there)
- [themes] - Contains the themes shipped with the product. Since jqGrid supports jQuery UI Themeroller, any theme compatible with jQuery UI ThemeRoller will work for jqGrid as well. Therefore, the package contains just one theme ("Redmond"). You can download any additional themes directly from jQuery UI's ThemeRoller site available here:

http://jqueryui.com/themeroller/

In addition to the "Redmond" theme, there is one more file in the [themes] folder - ui.jqgrid.css. This is the one and only Css file jqGrid needs. Just add it after you add the reference to Redmond in your ASPX file.

- [js] - The javascript files of jqGrid (and the needed libraries). You need to include them in your ASPX page, in order to gain the client side functionality of the grid.

The first file is "jquery-1.3.2.min.js" - this is the official jQuery library on which jqGrid is built upon.
The second file you need is the i18n (localization) javascript file. Depending on the language you need, just pick one from the "js/i18n" folder.
The last one is the jqGrid javascript code itself, located in "jquery.jqGrid.min.js"

The final result you will have in an ASPX page containing jqGrid would be something similar to that:

...
<%@ Register TagPrefix="trirand" Namespace="Trirand.Web.UI.WebControls" Assembly="Trirand.Web.dll" %>
...
<head>    
     ....
    <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
    ...
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
    ...
</head>

<html>
     <form runat="server">
     ...
    <trirand:JQGrid ID="EditDialogGrid" runat="server" DataSourceID="SqlDataSource1">        
          <Columns>
              <trirand:JQGridColumn DataField="id" Editable="true" />
              <trirand:JQGridColumn DataField="invdate" Editable="true" />
              <trirand:JQGridColumn DataField="name"  Editable="true"/>
              <trirand:JQGridColumn DataField="amount" Editable="true" />
              <trirand:JQGridColumn DataField="tax" Editable="true" />
              <trirand:JQGridColumn DataField="total" Editable="true" />
              <trirand:JQGridColumn DataField="note" Editable="true" />
          </Columns>
          <EditDialogSettings 
              CancelText="Cancel the Editing" 
              CaptionWhenEditing="Edit the Dialog" 
              SubmitText="Go edit that!"                
              TopOffset="50" 
              LeftOffset="50" />            
     </trirand:JQGrid>
     ...
     </form>
</html>