JsGrid - How to use jsGrid in ASP.NET MVC Application


In this article, I am going to explain how to use the jsGrid to display the data and some other tactics in very easy steps. I am building the application in ASP.NET MVC. The audience should have at-least basic knowledge of .net and ASP.Net MVC.

The resource has not been reviewed by Editors yet. Readers are advised to use their best judgement before accessing this resource.
This resource will be reviewed shortly.
If you think this resource contain inappropriate content, please report to webmaster.
I was working one a Asp.Net MVC application where I was using the Web Grid to display the data based on the selected search criteria. It was working great but client asked me to use the jsGrid instead of Web Grid as it has many ready to use features like (Edit, Delete, Search, etc..).

Initially, jsGrid gave me very hard time to display the data in it but after few hit and trial I manage to display the data. After spending couple of hours on jsGrid, I started liking it.

In this article, I am going to explain how to use the jsGrid to display the data and some other tactics in very easy steps. I am building the application in ASP.NET MVC.

Step 1. Content delivery network (CDN) of jsGrid and jQuery libraries are as below
https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css
https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.css
https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css

https://code.jquery.com/jquery.min.js

Step 2. jsGrid – HTML code – We need to add a division (DIV)



Step 3. Javascript code to set the properties of jsGrid. In this example I am making a POST request to get the data based on the supplied parameter. Also, I am not using the CRUD operation on the data that's why I am hiding the delete and edit feature of jsGrid.

$('#searchResult').jsGrid({
height: "auto",
width: "100%",
filtering: false,
sorting: true,
paging: true,
autoload: true,
controller: {
loadData: function (filter) {
//Send the post request
var searchCriteria = {
"ReceiverName": $('#txt_RecName').val(),
"ClientName": $('#txt_ClientName').val(),
"RefDesc": $('#txtRefDesc').val(),
"SenderName": $('#txt_SenderName').val()
};
return $.ajax({
url: "GetResultData",
type: "POST",
contentType: "application/json; charset=utf-8",
datatype: "json",
data: JSON.stringify(searchCriteria)
});
}
},
pageSize: 2,
pageButtonCount: 5,
pageIndex: 1,

noDataContent: "No Record Found",
loadIndication: true,
loadIndicationDelay: 500,
loadMessage: "Please, wait...",
loadShading: true,
fields: [
{
name: "Eligible for R&R",title: "Eligible for R&R", type: "text", width: 50,
itemTemplate: function (value, item) {
return '
)>Edit
';
}
},
{ name: "CollaborationID", title: "Collaboration ID", type: "text", width: 100 },
{ name: "SendingOpco", title: "Sending Opco", type: "text", width: 100 },
{ type: "control",deleteButton:false,editButton:false }
]
});

Step 4 Data Contract
namespace Models
{
public class AnnualReview
{
public string CollaborationID { get; set; }
public string SendingOpco{ get; set; }
public string Sender { get; set; }
}
}
Step 5. Controller code, You need to create AnnualReview data contract and add two properties (CollaborationID and SendingOpco) to it

[HttpPost]
public JsonResult GetResultData(SearchCriteria obj_Search)
{
List lstResult = new ListAnnualReview>() {
new Models.AnnualReview() {CollaborationID="CSID0001",SendingOpco="Marsh"},
new Models.AnnualReview() {CollaborationID="CSID0002",SendingOpco="Mercer"},
new Models.AnnualReview() {CollaborationID="CSID0003",SendingOpco="Mercer"}
};
return Json(lstResult.ToArray(), JsonRequestBehavior.AllowGet);
}


Step 6. If code compile and executed without any issue you will see the data into the jsGrid.

image1


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: