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)
<div id="searchResult" style="width:auto" />
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) {
)>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<AnnualReview> 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.
No comments:
Post a Comment