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

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>

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

  1. You have only set coorect the id, but not the names. Your colModel names does not respect the data returned. Try with the following colModel.

            colModel: [
                { name: 'Group_Id', width: 20, hidden: false, editable: true, editable: "disabled" },
                { name: 'Group_Name', width: 200, frozen: true, editable: true, searchoptions: { sopt: ['cn'] } },
    
            ],
    

    Note names Group_Id, Group_Name, which corresponds to waht you return from the server.

    Reply

Leave a Comment