Dynamic column genrate jqgrid in asp.net mvc razor

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>


FullCode:

 <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>