Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C#ASP.NETJQGrid
How to Create jqGrid Dynamically using asp.net
Posted 21-Nov-12 3:16am
Comments
ryanb31 at 21-Nov-12 9:21am
   
Did you read the documentation on it?
Roshith G at 21-Nov-12 9:24am
   
yes. i am working on it. but not yet got a correct way
Roshith G at 21-Nov-12 9:43am
   
ok i got it. I am posting it down. if u have any suggestion revert back.. thank u..

1 solution

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

Solution 1

Dynamic JQGrid From Data Table
 
$(document).ready(function () {
        var ColN, ColM, ColD, capEN;
        var sPath = window.location.pathname;
        var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
        //alert(sPage);
        $.ajax({
            url: sPage+'?method=getGridHeadData',
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: {},
            dataType: "json",
            success: function (data, st) {
                if (st == "success") {
                    ColN = data.rowsHead;//jqgrid heading data
                    ColM = data.rowsM; // its column model
                    ColD = data.rows; // Data
                    createGrid();
                }
            },
            error: function () {
                alert("Error with AJAX callback");
            }
        });
 
        function createGrid() {
            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" },
 
                //data: ColD,
                colNames: ColN,
                colModel: ColM,
                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();
 

    });
 
the code behind
In page load
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();
            }
            else if (Request.QueryString["method"] == "getGridHeadData")
            {
                getGridHeadData();
                Response.End();
            }
 
Method to get data in json form
 
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));
 
        }
 
 
hope it is helpful ..
if u got any other way to do it please inform me
thanks
  Permalink  
v4
Comments
Rich Sorensen at 16-Jan-13 11:39am
   
There are two things missing: 1. The definition of the JqGridData and JqGridDataHeading classes 2. The implementation of the ConvertDT method
Member 4713420 at 14-Feb-14 1:37am
   
but missing getGridHeadData() method
Chetan Chaudhari at 6-Mar-14 13:01pm
   
Hi Roshith, Can you please share demo project, So I can take help to develop my application.
syam.in at 16-Apr-14 18:28pm
   
Hi, have your got the JqGridDataHeading class
syam.in at 16-Apr-14 18:27pm
   
Hi, Nice example but missing definition for JqGridDataHeading class

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 696
1 OriginalGriff 468
2 Tadit Dash 390
3 sanket saxena 337
4 Peter Leow 228
0 Sergey Alexandrovich Kryukov 11,890
1 OriginalGriff 7,335
2 Peter Leow 5,003
3 Abhinav S 3,943
4 Maciej Los 3,575


Advertise | Privacy | Mobile
Web03 | 2.8.140421.2 | Last Updated 22 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid