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:

http://www.trirand.com/blog/?page_id=6

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".

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.

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.

Step 4:

Now copy the following code there:

ViewBag.Title = "Home Page";

}

$(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>

<br />

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

Now the required Jquery file for jq grid is:

We are calling the jq grid on:

Now run the Application. It will look like below:

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

10 Comments

Join the conversation! Your thoughts help the community grow.

kickAss Developer11y ago
I followed step by step and whoa! it worked. thank you so much! Keep posting..
Omprakash Dudhagundi12y ago
Provide code (
basheed sayad13y ago
Thanks for your replay,but downloading problem in that rar file,please check it and upload again .
John14y ago
Excellent article... How can I download the code? I went to your part 1 and downloaded mvc3test1.rar file. But this file seems to be an invalid .rar file as I am unable to open it. Appreciate posting the code in .zip format.
pratap14y ago
not able to download source code
enzo sangiorgi14y ago
I cannot downoload source code
Arsalan Ata14y ago
I m downloading the source code but unable to extract rar file due to rar is corrupted.
claudia14y ago
el .rar esta dañado
ahsan awan14y ago
What the PLUS button do. beside Inv No
Nic Roche15y ago
The project files are not supplied...