Controller return values but not show in JqGrid in Asp.net core

by

i am using jqgrid, controller return list of values but values are not showing on jqgrid. Rows created button groupid , and name not shown. i also use break point controller return datatable correctly but not show on jqgrid.
i also attach the screenshort you can see the actual result.

Controller

    public JsonResult mfollowsummary(int id)
        {
            using (objSqlCon = new SqlConnection(conn))
            {
                SqlCommand cmd = new SqlCommand("select Group_Id,Group_Name from Groups where Comp_Id=" + 1 + "", objSqlCon);
                cmd.CommandType = CommandType.Text;

                SqlDataAdapter sd = new SqlDataAdapter(cmd);
                DataTable dt = new DataTable();
               
                objSqlCon.Open();
                sd.Fill(dt);
                objSqlCon.Close();
                string JSONString = JsonConvert.SerializeObject(dt);
                var people = JsonConvert.DeserializeObject<List<Groups>>(JSONString);

                return Json(people);
            }
}

Screenshort
Return Result of function

Jqgrid Link

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>

Javascript

<script type="text/javascript">

    jQuery(document).ready(function ($) {
        var $grid = $("#jqGrid");

        $grid.jqGrid({
            url: '@Url.Action("mfollowsummary")',
            datatype: 'json',
            postData: {
            },
            jsonReader: { id: 'Group_Id' },
            colModel: [
                { name: 'GroupId', width: 20, hidden: false, editable: true, editable: "disabled" },
                { name: 'GroupName', width: 200, frozen: true, editable: true, searchoptions: { sopt: ['cn'] } },

            ],
            loadonce: true,
            navOptions: {
                reloadGridOptions: { fromServer: true }
            },
            formEditing: {

                closeOnEscape: true,
                closeAfterEdit: true,
                savekey: [true, 13],
                reloadGridOptions: {

                    fromServer: true
                }
            },
            forceClientSorting: true,
            viewrecords: true,

            autowidth: true,
            shrinkToFit:true,
            height: 350,
            rowNum: 100,
            rowList: [10, 20, 30, 50, 100, 500],
            pager: "#jqGridPager",
         
            rownumbers: true,
            sortname: 'Group_Name',
            sortorder: 'Group_Name',
     

            loadComplete: function () {
                //$("tr.jqgrow:odd").css("background", "#f0f8ff");

            },
        });


        $("#jqGrid").jqGrid("setFrozenColumns");
    });


</script>

Result Screenshot
Return Function Result

HTML

 <div class="table-responsive">
       <table id="jqGrid" class="table"></table>
 </div>
 <div id="jqGridPager"></div>

67 thoughts on “Controller return values but not show in JqGrid in Asp.net core”

Leave a Comment