Click here to Skip to main content
12,950,618 members (57,544 online)
Rate this:
Please Sign up or sign in to vote.
See more:
How to Create jqGrid Dynamically using
Posted 21-Nov-12 3:16am
Updated 30-Nov-16 3:20am
ryanb31 21-Nov-12 9:21am
Did you read the documentation on it?
Roshith G 21-Nov-12 9:24am
yes. i am working on it. but not yet got a correct way
Roshith G 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 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 14-Feb-14 1:37am
but missing getGridHeadData() method
Chetan Chaudhari 6-Mar-14 13:01pm
Hi Roshith,

Can you please share demo project, So I can take help to develop my application. 16-Apr-14 18:28pm
have your got the JqGridDataHeading class 16-Apr-14 18:27pm
Nice example but missing definition for JqGridDataHeading class
Syeedkaleemullah 9-May-14 23:57pm
Hi, Could you please share the demo project. So that I will try to reuse it.

Anubhav689 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
Member 12611698 12-Aug-16 0:26am
Hello Roshith,

Please share the complete code. So it can be helpful to so manay users.


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,984
CHill60 3,460
Maciej Los 3,053
Jochen Arndt 1,975
ppolymorphe 1,820

Advertise | Privacy | Mobile
Web02 | 2.8.170525.1 | Last Updated 30 Nov 2016
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