.I have tried with various blogs for jqGrid implementation but so far not able to load a grid with Json data from my wcf.
Here goes my html & js code –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<div class="sfcode">!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title>GSEA Administration</title><br /> <script src="Scripts/jquery.js" type="text/javascript"></script><br /> <script src="Scripts/grid.locale-en.js" type="text/javascript"></script><br /> <script src="Scripts/grid.base.js" type="text/javascript"></script><br /> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/><br /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script><br /> <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" /><br /> <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script><br /> <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script><br /> <script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script><br /> <br /> </head><br /> <body><br /> <form id="form1"><br /> <table id="list2" style="display: none"></table><br /> <div id="pager2"></div><br /> <br /> <script type="text/javascript"><br /> $(document).ready(function () {<br /> <br /> $("#list2").jqGrid({<br /> url: '/Services/EOService.svc/GetGSEAAdministration',<br /> datatype: "json",<br /> mtype: 'GET',<br /> colNames: ['Sr.No', 'Action Required', 'Chapter', 'Company', 'Country', 'Education', 'Email', 'Name', 'Sales', 'State', 'Status', 'WorkPhone', 'Date'],<br /> colModel: [<br /> { name: 'ID', index: 'ID', width: 30, hidden: true },<br /> { name: 'ActionRequired', index: 'ActionRequired', width: 100, IsLink: true, DataFormat: "UpdateStatus.html?ID={0}&Name={1}", DataFormatParamColumnName: "ID,Name" },<br /> { name: 'Chapter', index: 'Chapter', width: 80, align: "right" },<br /> { name: 'Company', index: 'Company', width: 80, align: "right" },<br /> { name: 'Country', index: 'Country', width: 80, align: "right" },<br /> { name: 'Education', index: 'Education', width: 80, align: "right" },<br /> { name: 'Email', index: 'Email', width: 80, align: "right" },<br /> { name: 'Name', index: 'Name', width: 55, IsLink: true, DataFormat: "GSEAProfile.html?ID={0}", DataFormatParamColumnName: "ID" },<br /> { name: 'Sales', index: 'Sales', width: 80, align: "right" },<br /> { name: 'State', index: 'State', width: 80, align: "right" },<br /> { name: 'Status', index: 'Status', width: 90 },<br /> { name: 'WorkPhone', index: 'WorkPhone', width: 150 },<br /> { name: 'Date', index: 'Date', width: 80, align: "right" }<br /> <br /> ],<br /> rowNum: 10,<br /> rowList: [10, 20, 30],<br /> pager: '#pager2',<br /> //sortname: 'id',<br /> viewrecords: true,<br /> loadui:'enable' ,<br /> // loadonce: true,<br /> caption: "JSON Example",<br /> jsonReader: {<br /> root: 'rows',<br /> page: 'page',<br /> total: 'total',<br /> records: 'records',<br /> repeatitems: false,<br /> cell: 'cell',<br /> id: 'ID'<br /> // userdata: 'userdata'<br /> }<br /> //sortorder: "desc",<br /> <br /> });<br /> <br /> $("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});<br /> });<br /> <br /> </script><br /> </form><br /> </body><br /> </html></div> |
|
1 |
Next is my WCF Code - |
|
1 2 3 4 5 6 7 8 9 |
<div class="sfcode"><pre class="default prettyprint prettyprinted"><div class="sfcode">ublic GSEAAdministration GetGSEAAdministration()<br /> {<br /> GSEAAdministration gr = new GSEAAdministration();<br /> gr.page = 1;<br /> gr.total = 2;<br /> gr.records = 10;<br /> gr.rows = GetGSEA().ToArray();<br /> return gr;<br /> }</div> |
|
1 |
My DataContracts are - |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<div class="sfcode"><pre class="default prettyprint prettyprinted"><div class="sfcode">DataContract]<br /> public class GSEAAdministration<br /> {<br /> private GSEATop[] _rows;<br /> private int _page;<br /> private int _total;<br /> private int _records;<br /> [DataMember]<br /> public int page { get { return _page; } set { _page = value; } }<br /> [DataMember]<br /> public GSEATop[] rows { get { return _rows; } set { _rows = value; } }<br /> [DataMember]<br /> public int total { get { return _total; } set { _total = value; } }<br /> [DataMember]<br /> public int records { get { return _records; } set { _records = value; } }<br /> public GSEAAdministration()<br /> {<br /> <br /> }<br /> }<br /> [DataContract]<br /> public class GSEATop<br /> {<br /> [DataMember]<br /> public GSEA cell { get; set; }<br /> [DataMember]<br /> public int id { get; set; }<br /> <br /> }<br /> [DataContract]<br /> public class GSEA<br /> {<br /> [DataMember]<br /> public int ID { get; set; }<br /> [DataMember]<br /> public string Name { get; set; }<br /> [DataMember]<br /> public string Status { get; set; }<br /> [DataMember]<br /> public string ActionRequired { get; set; }<br /> [DataMember]<br /> public string Chapter { get; set; }<br /> [DataMember]<br /> public string Company { get; set; }<br /> [DataMember]<br /> public string Sales { get; set; }<br /> [DataMember]<br /> public string Date { get; set; }<br /> [DataMember]<br /> public string WorkPhone { get; set; }<br /> [DataMember]<br /> public string Email { get; set; }<br /> [DataMember]<br /> public string State { get; set; }<br /> [DataMember]<br /> public string Country { get; set; }<br /> [DataMember]<br /> public string Education { get; set; }<br /> }</div> |
|
1 |
//This is my test data |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="sfcode"><pre class="default prettyprint prettyprinted"><div class="sfcode">public List<gseatop> GetGSEA()<br /> {<br /> List</gseatop><gseatop> list = new List</gseatop><gseatop>();<br /> list.Add(new GSEATop() { cell = new GSEA() { ID = 1, ActionRequired = "Application received", Chapter = "", Company = "dg", Country = "BE", Education = "High School", Email = "adg", Name = "bd b", Sales = "0", State = "AL", Status = "Applicant", WorkPhone = "dag", Date = "11-Dec-12" }, id = 1 });<br /> list.Add(new GSEATop() { cell = new GSEA() { ID = 2, ActionRequired = "Application received", Chapter = "", Company = "dg", Country = "BE", Education = "High School", Email = "adg", Name = "bd b", Sales = "0", State = "AL", Status = "Applicant", WorkPhone = "dag", Date = "11-Dec-12" }, id = 2 });<br /> list.Add(new GSEATop() { cell = new GSEA() { ID = 3, ActionRequired = "Application received", Chapter = "", Company = "dg", Country = "BE", Education = "High School", Email = "adg", Name = "bd b", Sales = "0", State = "AL", Status = "Applicant", WorkPhone = "dag", Date = "11-Dec-12" }, id = 3 });<br /> list.Add(new GSEATop() { cell = new GSEA() { ID = 4, ActionRequired = "Application received", Chapter = "", Company = "dg", Country = "BE", Education = "High School", Email = "adg", Name = "bd b", Sales = "0", State = "AL", Status = "Applicant", WorkPhone = "dag", Date = "11-Dec-12" }, id = 4 });<br /> list.Add(new GSEATop() { cell = new GSEA() { ID = 5, ActionRequired = "Application received", Chapter = "", Company = "dg", Country = "BE", Education = "High School", Email = "adg", Name = "bd b", Sales = "0", State = "AL", Status = "Applicant", WorkPhone = "dag", Date = "11-Dec-12" }, id = 5 });<br /> list.Add(new GSEATop() { cell = new GSEA() { ID = 6, ActionRequired = "Application received", Chapter = "", Company = "dg", Country = "BE", Education = "High School", Email = "adg", Name = "bd b", Sales = "0", State = "AL", Status = "Applicant", WorkPhone = "dag", Date = "11-Dec-12" }, id = 6 });<br /> list.Add(new GSEATop() { cell = new GSEA() { ID = 7, ActionRequired = "Application received", Chapter = "", Company = "dg", Country = "BE", Education = "High School", Email = "adg", Name = "bd b", Sales = "0", State = "AL", Status = "Applicant", WorkPhone = "dag", Date = "11-Dec-12" }, id = 7 });<br /> list.Add(new GSEATop() { cell = new GSEA() { ID = 8, ActionRequired = "Application received", Chapter = "", Company = "dg", Country = "BE", Education = "High School", Email = "adg", Name = "bd b", Sales = "0", State = "AL", Status = "Applicant", WorkPhone = "dag", Date = "11-Dec-12" }, id = 8 });<br /> list.Add(new GSEATop() { cell = new GSEA() { ID = 9, ActionRequired = "Application received", Chapter = "", Company = "dg", Country = "BE", Education = "High School", Email = "adg", Name = "bd b", Sales = "0", State = "AL", Status = "Applicant", WorkPhone = "dag", Date = "11-Dec-12" }, id = 9 });<br /> list.Add(new GSEATop() { cell = new GSEA() { ID = 10, ActionRequired = "Application received", Chapter = "", Company = "dg", Country = "BE", Education = "High School", Email = "adg", Name = "bd b", Sales = "0", State = "AL", Status = "Applicant", WorkPhone = "dag", Date = "11-Dec-12" }, id = 10 });<br /> return list;<br /> }</gseatop></div> |
|
1 |
After all this my JSON output looks like this in fiddler (for json formatting i checked it via |
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top
