Click here to Skip to main content
Rate this: bad
Please Sign up or sign in to vote.
See more: C# ASP.NET JQGrid
How to Create jqGrid Dynamically using
Posted 21-Nov-12 4:16am
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..
Rate this: bad
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);
            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
            error: function () {
                alert("Error with AJAX callback");
        function createGrid() {
                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());
            else if (Request.QueryString["method"] == "getGridHeadData")
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();
   = page;
   = ((recordsCount + rows - 1) / rows);
            objJqGrid.records = recordsCount;
            objJqGrid.rows = ConvertDT(dtRecords);
            List<string> liob = new List<string>();
            foreach (DataColumn column in dtRecords.Columns)
            objJqGrid.rowsHead = liob;
            List<object> colcontetn = new List<object>();
            foreach (var item in liob)
                JqGridDataHeading obj = new JqGridDataHeading();
       = item.ToString();
                obj.index = item.ToString();
            objJqGrid.rowsM = colcontetn;
            JavaScriptSerializer jser = new JavaScriptSerializer();
hope it is helpful ..
if u got any other way to do it please inform me
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. at 16-Apr-14 18:28pm
have your got the JqGridDataHeading class at 16-Apr-14 18:27pm
Nice example but missing definition for JqGridDataHeading class
Syeedkaleemullah at 9-May-14 23:57pm
Hi, Could you please share the demo project. So that I will try to reuse it.
Anubhav689 at 4-Jul-14 5:14am
Hello Roshith Sir,
I need a help from you. i am using web service for creating the jQgrid, Here you had shown that we can use url: sPage+'?method=getGridData' to call a method for in case we are creating the dynamic columns, could you please tell me how can I call web method inside a webservice using your way of calling!!! Pls help me out Sir
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

Hi, Can you please share the demo project. So that I will really help.
BY Sathis

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

Advertise | Privacy | Mobile
Web03 | 2.8.150326.1 | Last Updated 15 Sep 2014
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