How to populate jqGrid colModel dynamically in ASP.Net WebForm.

See more:

ASP.NET

jQuery

I am unable to populate jqGrid colModel dynamically.

Any suggestions would be appreciated.

Here is my aspx code: Sample.aspx:-

$(document).ready(function () {
            var ColN, ColM, ColD, capEN;
            var sPath = window.location.pathname;
            var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
            
            $.ajax({
                url: sPage +'/getGridHeadData',
                type: "POST",
                contentType: 'application/json;charset=utf-8',
                data: {},
                dataType: 'json',
                success: function (data, st) {
                    
                    if (st == 'success') {
                        ColN = data.colNames;
                        ColM = data.colModel;
                        ColD = data.data;

                        
                        
                        $('#UsersGrid').jqGrid({
                            url: sPage + 'getGridHeadData',
                            datatype: 'json',
                            height: 250,
                            colNames: ColN,
                            colModel: ColM,
                            data: ColD,
                            rowNum: 10,
                            rowList: [10, 20, 30],
                            pager: '#UsersGridPager',
                            sortname: 'UserID',
                            viewrecords: true,
                            sortorder: 'asc',
                            caption: 'Dynamic JQGrid';
                        })

                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Error with AJAX callback' + textStatus + errorThrown);
                                    }
            });
        });

But i am not getting desired result in ColN,ColM & ColD in below code snippet

ColN = data.colNames;
                        ColM = data.colModel;
                        ColD = data.data;

It shows ColM is undefined.



/* Here is code behind */

public partial class Sample : System.Web.UI.Page
   {
       protected void Page_Load(object sender, EventArgs e)
       {

       }

       [WebMethod]
       public static string getGridHeadData()
       {
           List<string> ColumnNames = new List<string>();

           for (int i = 0; i < 5; i++)
           {
               ColumnNames.Add("MyCoumn" + i);
           }
           var arrayColmNames = ColumnNames.ToArray();

           //Coumn Model
           List<Column> lstColums = new List<Column>();
           Column myCol;
           for (int i = 0; i < 5; i++)
           {
               myCol = new Column("Coumn" + i, i.ToString(),100,"center");
               lstColums.Add(myCol);
           }

           var arrayColm = lstColums.ToArray();

           List<Row> lstRow = new List<Row>();
           Row myRow;

           string[] str = new string[2];
           str[0] = "one";
           str[1] = "Two";

           for (int i = 0; i < 5; i++)
           {
               myRow = new Row();
               myRow.id = i;
               myRow.cell = str;
               lstRow.Add(myRow);
           }

           var arrayData = lstRow.ToArray();

           GridData grdata = new GridData(5, 1, 5, arrayData);

           Grid mygrid = new Grid("", arrayColmNames, arrayColm, "", "Suhas", grdata);

           JavaScriptSerializer jser = new JavaScriptSerializer();
           //Response.Write(jser.Serialize(mygrid));
           var TheJson = jser.Serialize(mygrid);

           return TheJson;

       }


   }