JQ Grid with Jquery in ASP.Net MVC 3: Part I


A JQ Grid is a light weight open source grid developed in JavaScript Jquery to fill data from the database. 

To download the JQ Grid js file go to the following site: 


Now I will create an ASP.Net application where I will display the record from an array through the JQ Grid. 

Step 1: 

In Visual Studio 2010 first create a simple ASP.Net MVC3 web application  project named "mvc3test1". 

jqgridasp.netmvc31.gif

Figure 1: 
 
Step 2: 

After that add the required JS file and folder for the JQ grid. The folder and file structure will look as shown in the following figure1 marked with red. 

jqgridasp.netmvc32.gif

Figure 2: 
 
See here in the "css" folder we have a style sheet named "jquery-ui-1.8.12.custom.css" and also under the "js" folder is the required "js" file for jq grid.

Step 3:

Now go to the "Index.cshtml" under the "Views" folder.

jqgridasp.netmvc33.gif
 
Step 4:

Now copy the following code there: 

@{
    ViewBag.Title = "Home Page";
}
<link href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
<link href="../css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.5.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>
<script src="../Scripts/json2-min.js" type="text/javascript"></script>
<script src="../js/jquery.jqGrid.src.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        jQuery("#list1").jqGrid({
            datatype: "local",
            colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
            colModel: [
                           { name: 'id', index: 'id', width: 60, sorttype: "int" },
                           { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
                           { name: 'name', index: 'name', width: 100 },
                           { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
                           { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
                           { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
                           { name: 'note', index: 'note', width: 150, sortable: false }
                 ],
            multiselect: true,
            rowNum: 10,
            rowList: [5, 10, 20, 50, 100],
            pager: jQuery('#pager1'),
            sortorder: "desc",
            viewrecords: true,
            subGrid: true,
            subGridUrl: 'Default.aspx',
            subGridModel: [{ name: ['No', 'Item', 'Qty', 'Unit', 'Line otal'],
                width: [55, 200, 80, 80, 80]
            }
    ],
            caption: "Manipulating Array Data"
        });
        jQuery("#list1").jqGrid('navGrid', '#pager1', { del: false, add: false, edit: false }, {}, {}, {}, { multipleSearch: true });
        var mydata = [
                   { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                   { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                   { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
                   { id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                   { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                   { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
                   { id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                   { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                   { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
                   ];
        for (var i = 0; i <= mydata.length; i++)
            jQuery("#list1").jqGrid('addRowData', i + 1, mydata[i]);
        var lastsel2
        jQuery("#rowed5").jqGrid({
            datatype: "local",
            height: 250,
            colNames: ['ID Number', 'Name', 'Stock', 'Ship via', 'Notes'],
            colModel: [
                   { name: 'id', index: 'id', width: 90, sorttype: "int", editable: true },
                   { name: 'name', index: 'name', width: 150, editable: true, editoptions: { size: "20", maxlength: "30"} },
                   { name: 'stock', index: 'stock', width: 60, editable: true, edittype: "checkbox", editoptions: { value: "Yes:No"} },
                   { name: 'ship', index: 'ship', width: 90, editable: true, edittype: "select", editoptions: { value: "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"} },
                   { name: 'note', index: 'note', width: 200, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10"} }
          ],
            multiselect: true,
            rowNum: 10,
            rowList: [5, 10, 20, 50, 100],
            pager: jQuery('#pager2'),
            sortorder: "asc",
            viewrecords: true,
            onSelectRow: function (id) {
                if (id && id !== lastsel2) {
                    jQuery('#rowed5').jqGrid('restoreRow', lastsel2);
                    jQuery('#rowed5').jqGrid('editRow', id, true);
                    lastsel2 = id;
                }
            },
            editurl: "server.php",
            caption: "Input Types"
        });
        jQuery("#rowed5").jqGrid('navGrid', '#pager2', { del: false, add: false, edit: false }, {}, {}, {}, { multipleSearch: true });
        var mydata2 = [
                   { id: "12345", name: "Desktop Computer", note: "note", stock: "Yes", ship: "FedEx" },
                   { id: "23456", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime" },
                   { id: "34567", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT" },
                   { id: "45678", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX" },
                   { id: "56789", name: "Laser Printer", note: "note2", stock: "Yes", ship: "FedEx" },
                   { id: "67890", name: "Play Station", note: "note3", stock: "No", ship: "FedEx" },
                   { id: "76543", name: "Mobile Telephone", note: "note", stock: "Yes", ship: "ARAMEX" },
                   { id: "87654", name: "Server", note: "note2", stock: "Yes", ship: "TNT" },
                   { id: "98765", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx" }
                   ];
        for (var i = 0; i < mydata2.length; i++)
            jQuery("#rowed5").jqGrid('addRowData', mydata2[i].id, mydata2[i]);
    });
</script>
<h2>@ViewBag.Message</h2>
<p>
JQ Grid in ASP.Net MVC3 razor
</p>
<div id="pager" ></div>
<br />
<br />
<table id="list1" ></table>
<div id="pager1" ></div>
<br /><br />

See here we hard coded the value to the jq grid.

Now the required Jquery file for jq grid is: 
 
jqgridasp.netmvc34.gif
We are calling the jq grid on: 

jqgridasp.netmvc35.gif 

Now run the Application. It will look like below:

jqgridasp.netmvc36.gif
 
Conclusion: So in this article we have seen how to use a jq grid in an ASP.Net MVC3 application.