jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

Related Topics sp_TopicIcon

jquery jQGrid data not loading

Tags: jqgrid data not loading

29/12/2012
10:30

NBS

New Member

Members

Forum Posts: 1

Member Since:
29/12/2012

Offline

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 -


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>GSEA Administration</title>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
   <script src="Scripts/grid.locale-en.js" type="text/javascript"></script> 
    <script src="Scripts/grid.base.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

</head>
<body>
<form id="form1">
<table id="list2" style="display: none"></table>
<div id="pager2"></div>

<script type="text/javascript">
    $(document).ready(function () {

        $("#list2").jqGrid({
            url: '/Services/EOService.svc/GetGSEAAdministration',
            datatype: "json",
            mtype: 'GET',
            colNames: ['Sr.No', 'Action Required', 'Chapter', 'Company', 'Country', 'Education', 'Email', 'Name', 'Sales', 'State', 'Status', 'WorkPhone', 'Date'],
            colModel: [
            { name: 'ID', index: 'ID', width: 30, hidden: true },
            { name: 'ActionRequired', index: 'ActionRequired', width: 100, IsLink: true, DataFormat: "UpdateStatus.html?ID={0}&Name={1}", DataFormatParamColumnName: "ID,Name" },
        { name: 'Chapter', index: 'Chapter', width: 80, align: "right" },
        { name: 'Company', index: 'Company', width: 80, align: "right" },
        { name: 'Country', index: 'Country', width: 80, align: "right" },
        { name: 'Education', index: 'Education', width: 80, align: "right" },
        { name: 'Email', index: 'Email', width: 80, align: "right" },
        { name: 'Name', index: 'Name', width: 55, IsLink: true, DataFormat: "GSEAProfile.html?ID={0}", DataFormatParamColumnName: "ID" },
        { name: 'Sales', index: 'Sales', width: 80, align: "right" },
        { name: 'State', index: 'State', width: 80, align: "right" },
        { name: 'Status', index: 'Status', width: 90 },
        { name: 'WorkPhone', index: 'WorkPhone', width: 150 },
        { name: 'Date', index: 'Date', width: 80, align: "right" }

    ],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pager2',
                //sortname: 'id',
            viewrecords: true,
          loadui:'enable' ,
//            loadonce: true,
            caption: "JSON Example",
            jsonReader: {
            root: 'rows',
            page: 'page',
            total: 'total',
            records: 'records',
            repeatitems: false,
            cell: 'cell',
            id: 'ID'
//            userdata: 'userdata'
            }
              //sortorder: "desc",

        });

$("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
 });

    </script>
    </form>
</body>
</html>

Next is my WCF Code -


ublic GSEAAdministration GetGSEAAdministration()
        {
            GSEAAdministration gr = new GSEAAdministration();
            gr.page = 1;
            gr.total = 2;
            gr.records = 10;
            gr.rows = GetGSEA().ToArray();
            return gr;
        }
My DataContracts are -
DataContract]
    public class GSEAAdministration
    {
         private GSEATop[] _rows;
        private int _page;
        private int _total;
        private int _records;
        [DataMember]
        public int page { get { return _page; } set { _page = value; } }
        [DataMember]
        public GSEATop[] rows { get { return _rows; } set { _rows = value; } }
        [DataMember]
        public int total { get { return _total; } set { _total = value; } }
        [DataMember]
        public int records { get { return _records; } set { _records = value; } }
        public GSEAAdministration()
        {

        }
    }
    [DataContract]
     public class GSEATop
     {
         [DataMember]
        public GSEA cell { get; set; }
          [DataMember]
        public int id { get; set; }

     }
    [DataContract]
public class GSEA
     {
        [DataMember]
        public int ID { get; set; }
        [DataMember]
        public string Name { get; set; }
        [DataMember]
        public string Status { get; set; }
        [DataMember]
        public string ActionRequired { get; set; }
        [DataMember]
        public string Chapter { get; set; }
        [DataMember]
        public string Company { get; set; }
        [DataMember]
        public string Sales { get; set; }
        [DataMember]
        public string Date { get; set; }
        [DataMember]
        public string WorkPhone { get; set; }
        [DataMember]
        public string Email { get; set; }
        [DataMember]
        public string State { get; set; }
        [DataMember]
        public string Country { get; set; }
        [DataMember]
        public string Education { get; set; }
     }
//This is my test data
public List<GSEATop> GetGSEA()
    {
        List<GSEATop> list = new List<GSEATop>();
        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 });
        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 });
        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 });
        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 });
        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 });
        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 });
        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 });
        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 });
        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 });
        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 });
        return list;
    }
After all this my JSON output looks like this in fiddler (for json formatting i checked it via jsonlint-output wasValid Json) -
{"page":1,"records":10,"rows":[{"cell":{"ActionRequired":"Application received","Chapter":"","Company":"dg","Country":"BE","Date":"11-Dec-12","Education":"High School","Email":"adg","ID":1,"Name":"bd b","Sales":"0","State":"AL","Status":"Applicant","WorkPhone":"dag"},"id":1},{"cell":{"ActionRequired":"Application received","Chapter":"","Company":"dg","Country":"BE","Date":"11-Dec-12","Education":"High School","Email":"adg","ID":2,"Name":"bd b","Sales":"0","State":"AL","Status":"Applicant","WorkPhone":"dag"},"id":2},{"cell":{"ActionRequired":"Application received","Chapter":"","Company":"dg","Country":"BE","Date":"11-Dec-12","Education":"High School","Email":"adg","ID":3,"Name":"bd b","Sales":"0","State":"AL","Status":"Applicant","WorkPhone":"dag"},"id":3},{"cell":{"ActionRequired":"Application received","Chapter":"","Company":"dg","Country":"BE","Date":"11-Dec-12","Education":"High School","Email":"adg","ID":4,"Name":"bd b","Sales":"0","State":"AL","Status":"Applicant","WorkPhone":"dag"},"id":4},{"cell":{"ActionRequired":"Application received","Chapter":"","Company":"dg","Country":"BE","Date":"11-Dec-12","Education":"High School","Email":"adg","ID":5,"Name":"bd b","Sales":"0","State":"AL","Status":"Applicant","WorkPhone":"dag"},"id":5},{"cell":{"ActionRequired":"Application received","Chapter":"","Company":"dg","Country":"BE","Date":"11-Dec-12","Education":"High School","Email":"adg","ID":6,"Name":"bd b","Sales":"0","State":"AL","Status":"Applicant","WorkPhone":"dag"},"id":6},{"cell":{"ActionRequired":"Application received","Chapter":"","Company":"dg","Country":"BE","Date":"11-Dec-12","Education":"High School","Email":"adg","ID":7,"Name":"bd b","Sales":"0","State":"AL","Status":"Applicant","WorkPhone":"dag"},"id":7},{"cell":{"ActionRequired":"Application received","Chapter":"","Company":"dg","Country":"BE","Date":"11-Dec-12","Education":"High School","Email":"adg","ID":8,"Name":"bd b","Sales":"0","State":"AL","Status":"Applicant","WorkPhone":"dag"},"id":8},{"cell":{"ActionRequired":"Application received","Chapter":"","Company":"dg","Country":"BE","Date":"11-Dec-12","Education":"High School","Email":"adg","ID":9,"Name":"bd b","Sales":"0","State":"AL","Status":"Applicant","WorkPhone":"dag"},"id":9},{"cell":{"ActionRequired":"Application received","Chapter":"","Company":"dg","Country":"BE","Date":"11-Dec-12","Education":"High School","Email":"adg","ID":10,"Name":"bd b","Sales":"0","State":"AL","Status":"Applicant","WorkPhone":"dag"},"id":10}],"total":2}


[Image Can Not Be Found]
After all this, my jqgrid is displaying no data,although columns are being created but with "undefined" footer.
Seeking all the help that I can get from here.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
24 Guest(s)

Currently Browsing this Page:
1 Guest(s)