how to create dynamic jqgrid in asp.net mvc razor

How to make Dynamic jqgrid in asp.net mvc Razor

to create dynamic jqgrid  Dynamically

Step1: create Dyanmic column model from service and return as Json

example    

        DataTable dcm = new DataTable("colModel");

            dcm.Columns.Add("name");

            dcm.Columns.Add("index");

               for (int i = 0; i < mdt.Rows.Count; i++)

                    {

                        DataRow DR = dcm.NewRow();

                        DR[0] = mdt.Rows[i][0].ToString();

                        DR[1] = mdt.Rows[i][0].ToString();

                        dcm.Rows.Add(DR);

                    }

then conver dcm to json format

Step2:Create Jqgrid dynamic strucure using Ajax call

Example:

  <div id="did" style="width:100%"  align="center">

    <table id="empsummary" width="100%" border="0" cellspacing="0" cellpadding="0">

    </table>

    <div id="pager"></div>

    </div>

<script type="text/javascript" id="getdata">

//creating the dyanamic colmodel

   $("#empsummary").jqGrid('GridUnload');

        $.ajax(

    {

        type: "POST",

        url: '@Url.Action("gdata")',

        data: { tid: data },

        dataType: "json",

        success: function (result) {

            var obj = jQuery.parseJSON(result);

            colM = obj.DocumentElement.colModel;

            jQuery("#empsummary").jqGrid({

                colModel: colM,

//                width: 100%,

                caption: "EMPLOYEE SUMMARY",

                pager: jQuery('#pager'),

                rowNum: 3,

                rowList: [5, 10, 20, 50],

                viewrecords: true,

                gridComplete: function () {

                },

                loadComplete: function (data) { }

            })

        },

        error: function (x, e) {

            alert(x.readyState + " " + x.status + " " + e.msg);

        }

    });

setTimeout(function () { $("#empsummary").jqGrid('setGridParam', { datatype: 'json' }); }, 500);

//binding the data to  dyanamic colmodel

        $.ajax({

            url: '@Url.Action("empsummarygrid")',

            type: "POST",

            datatype: "json",

            data: { tid: data },

            async: false,

            success: function (response) {

                $('#empsummary').jqGrid('clearGridData');

                var obj = jQuery.parseJSON(response);

                var obs1 = obj.DocumentElement.et;

                var tcount = obj.DocumentElement.et.length;

                if (tcount > 0) {

                    for (var i = 0; i < obj.DocumentElement.et.length; i++) {

                        jQuery("#empsummary").jqGrid('addRowData', i + 1, obs1[i]);

                    }

                }

                else {

                    var obs11 = obj.DocumentElement.et[0];

                    jQuery("#empsummary").jqGrid('addRowData', i + 1, obs1);

                }

            },

            error: function (xhr, ajaxOptions, thrownError) {

                alert("Your Request is Failed at this time Please Try after some time");

            }

        });

</script>

       

Code:
<div id="did" style="width:100%" align="center"> <table id="empsummary" width="100%" border="0" cellspacing="0" cellpadding="0"> </table> <div id="pager"> </div> </div> <script type="text/javascript" id="getdata"> //creating the dyanamic colmodel $("#empsummary").jqGrid('GridUnload'); $.ajax( { type: "POST", url: '@Url.Action("gdata")', data: { tid: data }, dataType: "json", success: function (result) { var obj = jQuery.parseJSON(result); colM = obj.DocumentElement.colModel; jQuery("#empsummary").jqGrid({ colModel: colM, // width: 100%, caption: "EMPLOYEE SUMMARY", pager: jQuery('#pager'), rowNum: 3, rowList: [5, 10, 20, 50], viewrecords: true, gridComplete: function () { }, loadComplete: function (data) { } }) }, error: function (x, e) { alert(x.readyState + " " + x.status + " " + e.msg); } }); setTimeout(function () { $("#empsummary").jqGrid('setGridParam', { datatype: 'json' }); }, 500); //binding the data to dyanamic colmodel $.ajax({ url: '@Url.Action("empsummarygrid")', type: "POST", datatype: "json", data: { tid: data }, async: false, success: function (response) { $('#empsummary').jqGrid('clearGridData'); var obj = jQuery.parseJSON(response); var obs1 = obj.DocumentElement.et; var tcount = obj.DocumentElement.et.length; if (tcount > 0) { for (var i = 0; i < obj.DocumentElement.et.length; i++) { jQuery("#empsummary").jqGrid('addRowData', i + 1, obs1[i]); } } else { var obs11 = obj.DocumentElement.et[0]; jQuery("#empsummary").jqGrid('addRowData', i + 1, obs1); } }, error: function (xhr, ajaxOptions, thrownError) { alert("Your Request is Failed at this time Please Try after some time"); } }); </script>
Any problem With Dynamic Jqgrid Post Here