Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
Please some one help me to data bind jqgrid in my asp.net application from data table...
 
thank u...
Posted 13-Aug-12 20:35pm

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Finally i got the answer for the question. I think i shd post the answer here as it will be helpful for some one.
 
JQGrid Data Binding using Data Table (Datatable)
 
jqgridDatabinding.aspx In Script tag
 
 
  $(document).ready(function () {
   
       
            jQuery("#AccountingCodesGrid").jqGrid({
 
                datatype: 'json',
                url: sPage+'?method=getGridData',
                mtype: 'POST',
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                serializeGridData: function (postData) {
                    return JSON.stringify(postData);
                },
                jsonReader: { repeatitems: false, root: "rows", page: "page", total: "total", records: "records" },
 
                
                 colNames: ['Id', 'Group', 'First Name', 'Cost'],
                colModel: [
            { name: 'id', index: 'id', width: 60, search: false },
            { name: 'grp', index: 'grp', width: 200, search: true, editable: true, edittype: 'select', editoptions: { value: NameGroup} },
            { name: 'name', index: 'name', width: 200, editable: true, searchoptions: { sopt: ['eq', 'ne', 'cn']} },
            { name: 'cst', index: 'cst', width: 200, editable: true, searchoptions: { sopt: ['eq', 'ne', 'cn']} }
                        ],
                loadonce: true,
                pager: jQuery('#pager'),
                rowNum: 5,
                rowList: [5, 10, 20, 50],
                viewrecords: true
            })
 

     
        jQuery("#AccountingCodesGrid").jqGrid('navGrid', '#Pager', { edit: false, add: false, del: false }, null, null, true, { multipleSearch: true });
        var height = $(window).height();
 

    });
 
 

In code behind
jqgridDatabinding.aspx.cs
 
 protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.QueryString["method"] == "getGridData")
            {
                Request.InputStream.Position = 0;
                StreamReader ipStRdr = new StreamReader(Request.InputStream);
                string json = ipStRdr.ReadToEnd();
                JavaScriptSerializer jser = new JavaScriptSerializer();
                Dictionary<string,> dict = jser.Deserialize<dictionary><string,>>(json);
 
                getGridData(int.Parse(dict["page"].ToString()), int.Parse(dict["rows"].ToString()), bool.Parse(dict["_search"].ToString()), dict["sord"].ToString());
                Response.End();
            }
            
        }
 
  /// <summary>
        /// function which fills the jqGrid
        /// </summary>
        /// <param name="page"></param>
        /// <param name="rows"></param>
        /// <param name="_search"></param>
        /// <param name="sord"></param>
        public void getGridData(int page, int rows, bool _search, string sord)
        {
            DataTable dtRecords = dtSource;// Data Table
            int recordsCount = dtRecords.Rows.Count;
 
            JqGridData objJqGrid = new JqGridData();
            objJqGrid.page = page;
            objJqGrid.total = ((recordsCount + rows - 1) / rows);
            objJqGrid.records = recordsCount;
            objJqGrid.rows = ConvertDT(dtRecords);
 
            List<string> liob = new List<string>();
            foreach (DataColumn column in dtRecords.Columns)
            {
                liob.Add(column.ColumnName);
            }
            objJqGrid.rowsHead = liob;
 
            List<object> colcontetn = new List<object>();
            foreach (var item in liob)
            {
                JqGridDataHeading obj = new JqGridDataHeading();
                obj.name = item.ToString();
                obj.index = item.ToString();
                colcontetn.Add(obj);
            }
            objJqGrid.rowsM = colcontetn;
 
            JavaScriptSerializer jser = new JavaScriptSerializer();
            Response.Write(jser.Serialize(objJqGrid));
 
        }
 
 
        /// this method converts the data table to list object
        /// </summary>
        /// <param name="dsProducts"></param>
        /// <returns></returns>
        public List<object> ConvertDT(DataTable dsProducts)
        {
            List<object> objListOfEmployeeEntity = new List<object>();
            foreach (DataRow dRow in dsProducts.Rows)
            {
                Hashtable hashtable = new Hashtable();
                foreach (DataColumn column in dsProducts.Columns)
                {
                    if (column.DataType == typeof(int))
                    {
                        hashtable.Add(column.ColumnName, int.Parse(dRow[column.ColumnName].ToString()));
                    }
                    else
                    {
                        hashtable.Add(column.ColumnName, dRow[column.ColumnName].ToString());
                    }
                }
                objListOfEmployeeEntity.Add(hashtable);
            }
            return objListOfEmployeeEntity;
 
        }
 

 
/pre>
 
Class used return json object
<pre lang="c#">
 
 public class JqGridData
        {
            private int m_total;
            private int m_page;
            private int m_records;
            private List<object> m_rows;
            private List<string> m_rowshead;
 
            public int total
            {
                get { return m_total; }
                set { m_total = value; }
            }
 
            public int page
            {
                get { return m_page; }
                set { m_page = value; }
            }
 
            public int records
            {
                get { return m_records; }
                set { m_records = value; }
            }
 
            public List<object> rows
            {
                get { return m_rows; }
                set { m_rows = value; }
            }
 
            public List<string> rowsHead
            {
                get { return m_rowshead; }
                set { m_rowshead = value; }
            }
 

            public List<object> rowsM
            {
                get { return m_rowsM; }
                set { m_rowsM = value; }
            }
 
            private List<object> m_rowsM;
        }
 
</string></string>
  Permalink  
v2
Comments
Naga Sindhura at 29-Aug-13 6:13am
   
Hi Roshith,
i am getting problem with Dictionary dict = jser.Deserialize>(json); especially second argument. How can i resolve it. Is there any alternative be add?
Syeedkaleemullah at 9-May-14 23:57pm
   
Hi, Could you please share the demo project. So that I will try to reuse it.
 
Thanks
kame_micro@yahoo.com, kame.micro@gmail.com
kalpesh_dave007 at 23-Jun-14 1:59am
   
could you please share this with demo I got the same error as naga sindhura

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web01 | 2.8.1411022.1 | Last Updated 14 Apr 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100