Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# ASP.NET JQGrid
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..
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
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
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
good
Please Sign up or sign in to vote.

Solution 2

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

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



Advertise | Privacy | Mobile
Web02 | 2.8.141022.2 | Last Updated 15 Sep 2014
Copyright © CodeProject, 1999-2014
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