Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2210
  • Last Modified:

jqgrid implementation

I was trying to use jqgrid using asp. I prepared the front end - html format to display data from backend server - SQL SERVER 2005 db.

I do have json format rather than xml.

I do not have a sample page to fetch the data from the server such as paging, sorting, ordering and so on. The data  source would be change dynamically via web page - not hard coded.

Therefore, would you please give a sample code to create such file as a backend?

Here is the front end file
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="demogrid.aspx.cs" Inherits="_Default" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

  
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
    <!-- The jQuery UI theme that will be used by the grid -->
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/themes/redmond/jquery-ui.css" />
    <!-- The jQuery UI theme extension jqGrid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
    <!-- jQuery runtime minified -->
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
    <!-- The localization file we need, English in this case -->
    <script src="js/trirand/i18n/grid.locale-en.js"type="text/javascript"></script>
    <!-- The jqGrid client-side javascript -->
    <script src="js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        jQuery.extend(jQuery.jgrid.defaults, { altRows: true });
        //jQuery("#list").setCell(row, col, val, { background: '#ff0000' });
    </script>
   
    <style>
        body { font-size: 75%; }
    </style>
</head>


<body>
    <form id="form1" runat="server">
    
   
    
 
   <script type="text/javascript">
       /*global $ */ 
       /*jslint devel: true, browser: true */ 
       $(document).ready(function () {
           $.ajax({
                            type: 'POST',
                            contentType: "application/json; charset=utf-8",
                            url: "??????.aspx",//I need the server side file here
                            datatype: 'json',
                            success: function (result) {
                               
//                                colD = result.colData;
//                                colN = result.colNames;
                                var colM = result.colModel;
                                 //alert(result.colModel);
                                jQuery("#UsersGrid").jqGrid
                                      (
                                        {
                                            //jsonReader: { repeatitems: false, cell: "", id: "0" },
                                            url: "demogrid.aspx", 
                                            datatype: 'json',
                                            mtype: 'POST',
                                            colModel: colM,
                                            
                                            //data: colD.rootVar,
                                           // ColNames: colN,
                                           // ColModel: ColM,
                                            height: "auto",
                                            gridview: true,
                                            Pager: '#Pager',
                                            rowNum: 5,
                                            rowList: [5, 10, 20, 50],
                                            viewrecords: true,
                                            loadComplete: function (data) {
                                                alert('loaded completely'); 
                                             },
                                            loadError: function () {
                                                alert('error'); 
                                             }
                                        });
                            },
                            error: function (x, e) {
                                alert(x.readyState + ' ' + x.status + e.msg);
                            }
                        });

       });
</script>
    
   
    <br /><br />
    
    <br /><br />        
    </form>
</body>
</html>

Open in new window

0
Efremdawit
Asked:
Efremdawit
  • 4
  • 3
3 Solutions
 
EfremdawitAuthor Commented:
Thank you for your resourceful sites. However, I would like to have pure asp.net page rather than web service.

The URL should be aspx rather than web service. The data format from server to client could be xml or json.

The main purpose is put data (column and row) dynamically which would be the query is dynamic.

0
 
leakim971PluritechnicianCommented:
>I would like to have pure asp.net page rather than web service.

>The data format from server to client could be xml or json.

a pure asp.net page is not xml or json data. you need a webservice.
additionally I see webservice in your question tags...

>The main purpose is put data (column and row) dynamically which would be the query is dynamic.
this is a webservice task
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
EfremdawitAuthor Commented:
ok. I will try to implement based upon linked resources.
0
 
EfremdawitAuthor Commented:
I tried to implement the jqgrid with asp.net framework. However, I could not get the data displayed. Of course, the data is hard code for demo purpose. I will change later the data source to get the data dynamically. Now I want to solve this problem first.
Here are the two files

Later, I will change the colModel and colNames along with the data source for dynamic display for any query or table. So would you please tell me where I can put such features in the files?


GetData.aspx
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Script.Serialization"%>
<%@ Import Namespace="System.Collections.ObjectModel"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
     
        Response.Write(GetData());
        Response.End();
        //Response.Write ("Data is being loaded");
    }
    
    protected string GetData()
    {
        //if (Equals(Request.Params.Get("oper"), Oper.edit.ToString()))
        //{
        //    list = new Collection<People>
        //               {
        //                   new People {id = 1, name = Request.Params.Get("name") , gender = Convert.ToInt32(Request.Params.Get("gender")), isClosed = Convert.ToBoolean(Request.Params.Get("isClosed"))},
        //                   new People {id = 2, name = "Monu", gender = 2, isClosed = false},
        //                   new People {id = 3, name = "Vijai", gender = 1, isClosed = true},
        //                   new People {id = 4, name = "Simi", gender = 2, isClosed = true}
        //               };
        //}
        //else
        //{
        var list = new Collection<People>
                              {
                                  new People {Id = 1, Name = "John", Gender = 1, IsClosed = false},
                                  new People {Id = 2, Name = "Abel", Gender = 1, IsClosed = false},
                                  new People {Id = 3, Name = "Aaron", Gender = 1, IsClosed = true},
                                  new People {Id = 4, Name = "Tsion", Gender = 2, IsClosed = true},
                                  new People {Id = 5, Name = "Mussie", Gender = 2, IsClosed = true}
                              };
       
        /// hard coded value passed for demo purpose
        /// Implement you logic :) !!
        return GridData(1, 1, list.Count, list);
    }

    public string GridData(int noOfPages, int startPage, int noOfRecords, Collection<People> list)
    {
        var gridData = new
                           {
                               total = noOfPages,
                               page = startPage,
                               records = noOfRecords,
                               rows = list,
                           };
        
        var jsonSerializer = new JavaScriptSerializer();
        return jsonSerializer.Serialize(gridData);

    }
    


    public class People
    {
        public People()
        {
            Name = string.Empty;
            Id = 0;
            Gender = 0;
            IsClosed = false;
        }



        public string Name { get; set; }
        public int Id { get; set; }
        public int Gender { get; set; }
        public bool IsClosed { get; set; }
    }
    
    public enum Oper
    {
        edit=1,
        del=2,
        add=3
    }





    

</script>
</html>

Open in new window

JQExample.aspx
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head id="Head1" runat="server">
    <title>JqGrid</title>
    <link href="themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
    <link href="themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />    
    <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.jqGrid.js" type="text/javascript"></script>
    
</head>
<body>
   <%-- <form id="form1">--%>
    <table id="jsonmap">
    </table>
    <div id="pjmap">
    </div>

    
    <script type="text/javascript">
        
        jQuery("#jsonmap").jqGrid({
            url: 'GetData.aspx',
            datatype: 'json',
            colNames: ['ID', 'Name','Active','Gender'],
            colModel: [{
                    name: 'id',
                    index: 'id',
                    width: 35,
                    editable: false,
                    editoptions: {
                    readonly: true,
                    size: 10
                }},                
                {
                    name: 'name',
                    index: 'name',
                    width: 150,
                    align: "left",
                    editable: true,
                    size: 100
                  },
                {
                    name: 'isClosed',
                    index: 'isClosed',
                    width: 100,
                    align: 'left',
                    editable: true,
                    edittype: "checkbox",
                    editoptions: {
                    value: "true:false",
                    formatter: "checkbox"
                }},
                {
                    name: 'gender',
                    index: 'gender',
                    width: 100,
                    formatter:'select',
                    editable: true,
                    edittype: "select", 
                    editoptions: {value: "0:select;1:male;2:female"}
                }],
                rowNum: 10,
                rowList: [2, 5, 10, 15],
                pager: '#pjmap',
                sortname: 'id',
                sortorder: "desc",
                viewrecords: true, 
                jsonReader: {
                    repeatitems: false
                },
                width: 600,
                caption: 'First jqGrid',
                height: '100%',
                editurl: 'GetData.aspx'
            });


            jQuery("#jsonmap").navGrid("#pjmap", {
                    edit: true,
                    add: true,
                    del: true
                },
                {
                    closeAfterEdit: true,
                    reloadAfterSubmit: false
                },
                {
                    closeAfterAdd: true,
                    reloadAfterSubmit: false
                },
                {
                    reloadAfterSubmit: false
                });



    </script>
      <table id="Jqgrid" width="100%">
    </table>
    <div id="pager"></div> 
    </form>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
You need to use the right case for the fields : Id, Name, Gender vs id, name and gender in your code
0
 
EfremdawitAuthor Commented:
I modified the field case with case sensitive issue. When I updated this, the the data appeared.

Now I want to change the data source and the colNames and colModel accordingly to get the data dynamically.


Script for data format

$(document).ready(function () {
           $.ajax({
                            type: 'POST',
                            contentType: "application/json; charset=utf-8",
                            url: "GetData.aspx",
                            datatype: 'json',
                            success: function (result) {
                               
//                                colD = result.colData;
//                                colN = result.colNames;
                                var colM = result.colModel;
                                 //alert(result.colModel);
                                jQuery("#UsersGrid").jqGrid
                                      (
                                        {
                                            jsonReader: { repeatitems: false, cell: "", id: "0" },
                                            //url: "GetData.aspx", 
                                            datatype: 'json',
                                            mtype: 'POST',
                                            colModel: colM,
                                            
                                           data: colD.rootVar,
                                           ColNames: colN,
                                            ColModel: ColM,
                                            height: "auto",
                                            gridview: true,
                                            pager: '#pager',
                                            rowNum: 5,
                                            rowList: [5, 10, 20, 50],
                                            viewrecords: true,
                                            loadComplete: function (data) {
                                                alert('loaded completely'); 
                                             },
                                            loadError: function () {
                                                alert('error'); 
                                             }
                                        });
                            },
                            error: function (x, e) {
                                alert(x.readyState + ' ' + x.status + e.msg);
                            }
                        });

Then in server side
change the hardcoded list to get the data array. Instead try to use ADO.net (not linq) to connect the data source as a query. In this query try to get total page, total record, order by and PK. Therefore, replace 

var list = new Collection<People>
                              {
                                  new People {Id = 1, Name = "John", Gender = 1, IsClosed = false},
                                  new People {Id = 2, Name = "Abel", Gender = 1, IsClosed = false},
                                  new People {Id = 3, Name = "Aaron", Gender = 1, IsClosed = true},
                                  new People {Id = 4, Name = "Tsion", Gender = 2, IsClosed = true},
                                  new People {Id = 5, Name = "Mussie", Gender = 2, IsClosed = true}
                              };
       
        /// hard coded value passed for demo purpose
        /// Implement you logic :) !!
        return GridData(1, 1, list.Count, list);
    }

    public string GridData(int noOfPages, int startPage, int noOfRecords, Collection<People> list)
    {
        var gridData = new
                           {
                               total = noOfPages,
                               page = startPage,
                               records = noOfRecords,
                               rows = list,
                           };
        
        var jsonSerializer = new JavaScriptSerializer();
        return jsonSerializer.Serialize(gridData);

    }
    

So would you please give a sample code to get such task?

Open in new window

0
 
Guy Hengel [angelIII / a3]Billing EngineerCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now