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>
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.
Note names Group_Id, Group_Name, which corresponds to waht you return from the server.