Click here to Skip to main content
12,949,601 members (71,496 online)
Rate this:
 
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></string>
  Permalink  
v2
Comments
Naga Sindhura 29-Aug-13 6:13am
   
Hi Roshith,
i am getting problem with Dictionary<string,> dict = jser.Deserialize<dictionary><string,>>(json); especially second argument. How can i resolve it. Is there any alternative be add?
Syeedkaleemullah 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 23-Jun-14 1:59am
   
could you please share this with demo I got the same error as naga sindhura
Member 11137946 19-Dec-14 6:44am
   
thank you
Member 11491796 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 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
Top Experts
Last 24hrsThis month
OriginalGriff 5,489
CHill60 3,380
Maciej Los 2,913
Jochen Arndt 1,935
ppolymorphe 1,820


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