Component Discussions

Re: jqGrid in asp.net

rumenstankov — Thu, 01 Oct 2009 20:08:32 GMT

Just to let you know, we (the guys behind jqGrid) started a beta project for jqGrid integration with ASP.NET. The approach we’ve taken is to create a server-side component, pretty much similar to what you are using to with asp:GridView (similar programming/event model and APIs)

Demo can be found here:
http://www.trirand.net/demo.aspx

Download bits and samples are also available.

Cheers,
Rumen Stankov
jqGrid

Re: jqGrid in asp.net

centrium777 — Mon, 10 Aug 2009 20:45:17 GMT

Thanks for the reply mate and good pointer with the link.

I actually narrowed down the problem, eventually after several days and was due to the fact I hadn't put the locale.js file in the correct order before the jqgrid.js file

Kinda silly mistake for not following the example to the letter on the jqgrid wiki, however we live and learn I guess.

Cheers for help though.

Re: jqGrid in asp.net

engineerachu — Mon, 10 Aug 2009 15:23:46 GMT

Have a look at this link http://praveen1305.blogspot.com/2009/05/jqgrid-with-asp-net-web-forms.html. Initially, I tried a sample from this site and later made a sample of my own. If you don't get a solution, please let me know, I'll give you my sample. I use jqGrid 3.5. The problem might be in your script. Can you post your code, please?

Re: jqGrid in asp.net

centrium777 — Mon, 10 Aug 2009 09:44:46 GMT

Hi Everyone

I am looking to achieve what you have done here, but unforuntatly I cannot get it to work, I have implemented your code in my webservice an returning back the sem object which I get the following JSON response

{"d":{"__type":"jqGridData","total":"1","page":"1","records":"1","rows":[{"id":"1","cell":["45","5","140"]},{"id":"2","cell":["45","5","140"]},{"id":"3","cell":["45","5","140"]}]}}

I run this through a json parser and the json looks fine, however when I try and bind this to the grid (again using your code) it doesnt display anything on the grid and there are no error

The only difference I guess is I am using the 3.5 version of jqgrid instead of 3.4.3

Apolgies if this is posted on the asp.net forum but your the closest I've found to anyone addressing this issue.

Cheers

Cent

Re: jqGrid in asp.net

engineerachu — Tue, 04 Aug 2009 16:54:31 GMT

Yeah, that was a good link. You have any idea, where we can load the DropDownList in a row dynamically from Database?

Re: jqGrid in asp.net

techgeneis — Tue, 30 Jun 2009 02:22:21 GMT

I have found an article with fully functional example here,

http://arahuman.blogspot.com/2009/06/jqgrid-using-mvc-json-and-datatable.html

Re: jqGrid in asp.net

engineerachu — Thu, 25 Jun 2009 14:42:42 GMT

Yeah, I did an example with XML by seeing this link. But I experienced, JSON is faster than XML.

Re: jqGrid in asp.net

bosasj — Thu, 25 Jun 2009 13:48:28 GMT

Yup, that makes complete sense. I don't know if you are still interested, but I found a link that I thought you may be interested in. The example is in xml but may still be useful to you. Oh, and thank you for the quick reply.

Link: http://netindonesia.net/blogs/cipto/archive/2009/04/03/jqgrid.aspx

Re: jqGrid in asp.net

engineerachu — Thu, 25 Jun 2009 04:25:30 GMT

RowElement is a class which contains following:

public class RowElement
{
    public string id;
    public string[] cell;
}

Re: jqGrid in asp.net

bosasj — Wed, 24 Jun 2009 18:16:52 GMT

I'm assuming it is some type of custom class rather than one defined in .Net but I just wanted to check just to make sure.

Re: jqGrid in asp.net

bosasj — Wed, 24 Jun 2009 18:02:45 GMT

This may seem out of place but what namespace is the RowElement class found? Thanks in advance.

Re: jqGrid in asp.net

engineerachu — Sun, 14 Jun 2009 15:19:43 GMT

Yeah, thanks man. I too tried a bit and made it working in Handler. Its just superb and fast than XML as far as I've seen, but dunno about the drawbacks in it. You have any idea?

Re: jqGrid in asp.net

bluebirdzx — Sun, 14 Jun 2009 12:52:50 GMT

hi, it is ok with IHttpHandler,you may try it, but my code have some bug, next page and pre page is bad.

            context.Response.Buffer = true;
            context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
            context.Response.AddHeader("pragma", "no-cache");
            context.Response.AddHeader("cache-control", "");
            context.Response.CacheControl = "no-cache";
            context.Response.ContentType = "text/plain"; 
           
             int page = 1;
             if (HttpContext.Current.Request.Form["page"] != null)
            {
               
                page = int.Parse(HttpContext.Current.Request.Params["page"].ToString());
            }
             int rows = 10;
            if (HttpContext.Current.Request.Form["rows"] != null)
            {
                rows = int.Parse(HttpContext.Current.Request.Form["rows"].ToString());
            }
  
            string sidx = "Name";
            if (HttpContext.Current.Request.Form["sidx"] != null)
            {
                sidx = HttpContext.Current.Request.Form["sortname"].ToString();
            }
            string whereCondition = "";
            //if (HttpContext.Current.Request.Form["qtype"] != null && HttpContext.Current.Request.Form["query"] != null && HttpContext.Current.Request.Form["query"].ToString() != string.Empty)
            //{
            //    whereCondition = BuildWhereCondition(HttpContext.Current.Request.Form["qtype"].ToString(), HttpContext.Current.Request.Form["query"].ToString());
            //}

            string sord = "asc";
            if (HttpContext.Current.Request.Form["sord"] != null)
            {
                sord = HttpContext.Current.Request.Form["sord"].ToString();
            }
            string sortExp = sidx + " " + sord;
            int start = ((page - 1) * rows);
           
            DataAccess newDataAccess = new DataAccess();
            List<Product> data = newDataAccess.GetAllProducts(whereCondition, sortExp, start, rows);
            JavaScriptDateTimeConverter aa = new JavaScriptDateTimeConverter();
            
           
            string strlist = Newtonsoft.Json.JsonConvert.SerializeObject(data,new JavaScriptDateTimeConverter());

            string ttt="";
            for (int j = 0; j < HttpContext.Current.Request.Form.Count; j++)
            {
                ttt += "--" + HttpContext.Current.Request.Form[j];
            }
            System.IO.File.WriteAllText("d:\\aaab.txt", HttpContext.Current.Request.Form["page"] + "===" + page.ToString() + "-----" + start.ToString() + "---" + sortExp + "-" + rows);
            int totalpage = newDataAccess.TotalRows / rows + 1;
        
            string str = "{totalpages: \"" + totalpage.ToString() + "\",";
                   str +="currpage: \"" + page.ToString() + "\",";
                   str +="totalrecords: \"" + newDataAccess.TotalRows.ToString() +"\",rows : ";
            // one way demo
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]},";
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]},";
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]},";
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]},";
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]},";
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]},";
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]},";
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]},";
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]},";
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]},";
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]},";
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]},";
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]},";
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]},";
            //str += "{id:\"1\", cell:[\"1\", \"sdd\", \"2009-05-06\",\"dfdf\",\"dfdff\",\"78\"]}";
            //second way demo
           // str += "{Id:6,Name:\"6565\",Description:\"6565\",Unit:\"6565\",UnitPrice:6565,CreateDate:\"2009-6-5\"},";
           // str += "{Id:6,Name:\"6565\",Description:\"6565\",Unit:\"6565\",UnitPrice:6565,CreateDate:\"2009-6-5\"}]}";
                str += strlist +"}";
                context.Response.Write(str);

HTML code is

jQuery(document).ready(function() {
        jQuery("#west-grid").jqGrid({
            url: 'Handler1.ashx',
            datatype: 'json',
            type: "POST", 
            jsonReader: {
                root: "rows",
                page: "currpage",
                total: "totalpages",
                records: "totalrecords",
                repeatitems: false,
                id: "0"
            },

            colNames: ['Id', 'Name', 'Description', 'Unit', 'UnitPrice', 'CreateDate'],
            colModel: [
      { name: 'Id', index: 'Id', width: 55 },
      { name: 'Name', index: 'Name', width: 90, editable: true },
      { name: 'Description', index: 'Description', width: 80, align: 'right', editable: true },
      { name: 'Unit', index: 'Unit', width: 80, align: 'right', editable: true },
      { name: 'UnitPrice', index: 'UnitPrice', width: 80, align: 'right', editable: true },
      { name: 'CreateDate', index: 'CreateDate', width: 150, date: true, datefmt: 'Y-m-d', sortable: false, editable: true}],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: 'id',
            sortorder: "desc",
            root: "rows",
            page: "currpage",
            total: "totalpages",
            records: "totalrecords",
            repeatitems: false,
            id: "0",
            viewrecords: true,
            imgpath: 'themes/basic/images',
            caption: 'My first grid'

        });
        jQuery("#west-grid").navGrid('#Pager', {
            edit: true, add: true, del: true, search: true
        }).navButtonAdd('#Pager', {
            caption: "Add", buttonimg: "fullpath/row_add.gif", onClickButton: function() { alert("Adding Row") }, position: "last"
        }).navButtonAdd('#Pager', {
            caption: "Del", buttonimg: "fullpath/row_del.gif", onClickButton: function(id) { alert("Deleting Row: " + id) }, position: "last"
        });

jqGrid in asp.net

engineerachu — Mon, 01 Jun 2009 18:31:02 GMT

Hello Friends,

I managed to use the jqGrid in asp.net using WebService. Here is the code I've used:

<script type="text/javascript" src="jqGrid-3.4.3/jquery-1.3.1.js"></script>

<script type="text/javascript" src="jqGrid-3.4.3/jquery.jqGrid.js"></script>

<script type="text/javascript" src="jqGrid-3.4.3/js/jqModal.js"></script>

<script type="text/javascript" src="jqGrid-3.4.3/js/jqDnR.js"></script>

<link href="jqGrid-3.4.3/themes/coffee/grid.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
        jQuery(document).ready(function() {
            $('#list').jqGrid({
                datatype: function() {
                    $.ajax({
                        url: "jqGrid.asmx/NewMethod",
                        data: "{}",  // For empty input data use "{}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        complete: function(jsondata, stat) {
                            if (stat == "success") {
                                var thegrid = jQuery("#list")[0];
                                thegrid.addJSONData(JSON.parse(jsondata.responseText).d);
                            }
                        }
                    });
                },
                colNames: ['ID', 'Name', 'Location'],
                colModel: [
          { name: 'ID', index: 'ID', width: 80, align: 'left', editable: false },
          { name: 'Name', index: 'Name', width: 120, align: 'left', editable: true},
          { name: 'Location', index: 'Location', width: 60, align: 'left', editable: true, edittype: "select", editoptions: { value: "FE:FedEx; IN:InTime; TN:TNT"}}],
                pager: jQuery('#pager'),
                rowNum: 5,
                rowList: [10, 20, 30],
                sortname: 'Name',
                sortorder:'desc',
                viewrecords: true,
                imgpath: 'jqGrid-3.4.3/themes/coffee/images',
                caption: 'jqGrid First Grid',
                width: 300
              }).navGrid(pager, { edit: true, add: false, del: false, search: false });
        }); 
    </script>

<body>
    <table id="list" class="scroll" cellpadding="0" cellspacing="0">
    </table>
    <div id="pager" class="scroll" style="text-align: center;">
    </div>
</body>

WebMethod:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Web.Script.Serialization;
using System.Diagnostics;
using System.Data;
using System.Text;
using System.Data.SqlClient;

public class SecondMethod
{
    public string total;
    public string page;
    public string records;
    public RowElement[] rows;
}

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class jqGrid : System.Web.Services.WebService
{
    Random rndID = new Random(DateTime.Now.Millisecond);
    Random rndChar = new Random(DateTime.Now.Millisecond);
    SqlConnection conn = new SqlConnection(@"Server = .\SQLExpress; Initial Catalog = Test; Integrated Security = True");
   
    [WebMethod]
    public SecondMethod NewMethod()
    {
        conn.Open();
        SqlCommand cmd = new SqlCommand("Select * from Test", conn);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        da.Fill(dt);
        SecondMethod sem = new SecondMethod();
        sem.total = "1";
        sem.page = "1";
        sem.records = "5";
        dt.TableName = "Test";
        int iRowCount = dt.Rows.Count;
        dt.DefaultView.Sort = "Name";
        DataView dv = dt.DefaultView;
        dt = dv.ToTable();
        sem.rows = new RowElement[iRowCount];
        for (int iCount = 0; iCount < iRowCount; iCount++)
        {
            sem.rows[iCount] = new RowElement();
            sem.rows[iCount].id = Convert.ToString(iCount + 1);
            sem.rows[iCount].cell = new string[3];
            sem.rows[iCount].cell[0] = dt.Rows[iCount]["ID"].ToString();
            sem.rows[iCount].cell[1] = dt.Rows[iCount]["Name"].ToString();
            sem.rows[iCount].cell[2] = dt.Rows[iCount]["Location"].ToString();
        }

        return sem;
    }
}

I'm pretty sure that the method I've used to bind the data is not appropriate, but still since this is my first grid, I had to use it.

Now my question is,  I was not able to Sort the columns using the above scripts.

So I got a tip that I should use ashx file to make jqGrid more effective and efficient. I'm not quite familiar with ashx(IHttpHandler) concept.

Can any one tell me how to use ashx file to bind jqGrid in asp.net? Or give me a brief intro about ashx concept?