Click here to Skip to main content
11,716,938 members (83,824 online)
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 19:35pm
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>
  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
Member 11137946 at 19-Dec-14 6:44am
   
thank you
Member 11491796 at 3-Mar-15 5:25am
   
Have u completed with Sql server database as a back-end. if yess Plss reply to this.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

thank your code. thank your help.
  Permalink  
v3
Comments
CHill60 at 1-Jun-15 5:01am
   
Please use the "Have a Question or Comment?" link to respond to a post rather than posting a "solution"

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

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 659
1 F-ES Sitecore 260
2 Maciej Los 185
3 OriginalGriff 175
4 Richard MacCutchan 140
0 Sergey Alexandrovich Kryukov 1,029
1 Maciej Los 464
2 Richard MacCutchan 430
3 CHill60 415
4 OriginalGriff 415


Advertise | Privacy | Mobile
Web04 | 2.8.150901.1 | Last Updated 1 Jun 2015
Copyright © CodeProject, 1999-2015
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