Not loading json data in jqgrid

Question

Why json data not loading in jqgrid ?

I am using ASP.net with C# with JQGrid using javascript & AJAX

Here is my code below :

  public string Alarm_Main()
{
    SqlConnection con = new SqlConnection(ConnString);
    DataTable dt = new DataTable();
    con.Open();
    string query = "select * from MST_ALARM_TYPE";
    SqlDataAdapter da = new SqlDataAdapter(query, con);
    DataSet ds = new DataSet();
    da.Fill(ds);
    con.Close();
    return JsonConvert.SerializeObject(ds.Tables[0]);
}

In file : DataService.aspx the code is given below :

<script>
    $(function () {
        $("#list").jqGrid({
            url: 'DataService.asmx/Alarm_Main',
            datatype: 'json',
            mtype: 'POST',
            serializeGridData: function (postData) {
                alert(JSON.stringify(postData));
                return JSON.stringify(postData);
            },
            ajaxGridOptions: { contentType: "application/json;charset=utf-8;" },
            loadonce: true,
            jsonReader: {
                page: function (obj) { return 1; },
                total: function (obj) { return 1; },
                records: function (obj) { return obj.d.length; },
                root: function (obj) { return obj.d; },
                repeatitems: false,
                id: "0"
            },
            colNames: ['', '알람코드', '등록날짜', '알람명', '등록자', ''],
            colModel: [
                { name: 'myradio', width: 30, search: false, fixed: true, align: 'center', resizable: false, sortable: false, frozen: true, formatter: function (cellValue, option) { return '<input type="radio" name="radio_' + option.gid + '"/>'; }, frozen: true },
                { name: 'alarm_type_code', index: 'alarm_type_code', align: 'center', width: 200, frozen: true, sorttype: 'number' },
                { name: 'regist_date', index: 'regist_date', width: 200, editable: true, frozen: true, align: 'center', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "Y-m-d", newformat: "Y-m-d" } },
                { name: 'alarm_type_name', index: 'alarm_type_name', width: 200, frozen: true },
                { name: 'regist_name', index: 'regist_name', width: 200, frozen: true },
                { name: 'myac', width: 50, search: false, fixed: true, sortable: false, resizable: false, fommatter: 'action', formatoptions: {keys:true}}
            ],
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            width: '100%',
            pager: '#pager',
            gridview: true,
            rownumbers: false,
            sortable: true,
            multiselect: true,
            scrollOffset: 0,
            cellEdit: true,
            sortorder: 'desc',
            caption: '그리드 제목',
            height: '100%',
            shrinkToFit: true,
            loadonce: true
        });
        jQuery("#list").jqGrid('setFrozenColumns');
        jQuery("#list").trigger('reloadGrid');
        jQuery("#list").jqGrid('navGrid', '#pager', { excel: true, add: true, edit: true, view: true, del: true, search: true, refresh: true },
            { closeAfterAdd: true, reloadAfterSubmit: false, closeOnEscape: true },
            { closeAfterAdd: true, reloadAfterSubmit: false, closeOnEscape: true },
            { reloadAfterSubmit: false, closeOnEscape: true },
            { multipleSearch: true, multipleGroup: true, showQuery: true, closeOnEscape: true, onSearch: function () { } }, { closeOnEscape: true });
        jQuery("#list").jqGrid('bindKeys', { "onEnter": function (rowid) { alert("You enter a row with id:" + rowid) } });
        jQuery("#list").jqGrid('navButtonAdd', '#pager', { caption: "Excel", onClickButton: function () { jquery("#list").jqGrid('excelExport', { url: 'D:\\' }); } });
        jQuery("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "cn" });
    });
</script>

I can't see anything on my screen.

What can be the issue ?

Answer 1

Below is example , how to use ado.net with jqgrid, i hope this will help you.

Controller"

 public ActionResult GetCustomer(int rows, string sidx, string sord, int page)
        {
            List<Customer> _customerList = new List<Customer>();

            DataTable dt = new DataTable();
            string strConString = @"Data Source=gen5win10;Initial Catalog=AsifDb;Integrated Security=True";

            using (SqlConnection con = new SqlConnection(strConString))
            {
                con.Open();
                SqlCommand cmd = new SqlCommand("Select * from Customer", con);

                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.SelectCommand = cmd;
                DataSet ds = new DataSet();
                da.Fill(ds);

                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    Customer cobj = new Customer();
                    cobj.CustomerId = Convert.ToInt32(ds.Tables[0].Rows[i]["CustomerId"].ToString());
                    cobj.ID = Convert.ToInt32(ds.Tables[0].Rows[i]["CustomerId"].ToString());
                    cobj.Name = ds.Tables[0].Rows[i]["Name"].ToString();
                    cobj.Phone = ds.Tables[0].Rows[i]["Phone"].ToString();
                    cobj.Address = ds.Tables[0].Rows[i]["Address"].ToString();
                    cobj.Date = Convert.ToDateTime(ds.Tables[0].Rows[i]["Date"].ToString());

                    _customerList.Add(cobj);
                }

            }

                int pageIndex = Convert.ToInt32(page) - 1;
            int pageSize = rows;

            var Results = _customerList.Select(
                    a => new
                    {
                        a.ID,
                        a.Name,
                        a.Phone,
                        a.Address,
                        a.Date,
                    });

            int totalRecords = Results.Count();
            var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
            if (sord.ToUpper() == "DESC")
            {
                Results = Results.OrderByDescending(s => s.ID);
                Results = Results.Skip(pageIndex * pageSize).Take(pageSize);
            }
            else
            {
                Results = Results.OrderBy(s => s.ID);
                Results = Results.Skip(pageIndex * pageSize).Take(pageSize);
            }
            var jsonData = new
            {
                total = totalPages,
                page,
                records = totalRecords,
                rows = Results
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);

} 

HTML:

<link href="~/Scripts/jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet" />
<link href="~/Scripts/Guriddo_jqGrid_JS_5.2.0/css/ui.jqgrid.css" rel="stylesheet" />

<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/jquery-1.11.0.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.js"></script>

<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/jquery.jqGrid.min.js"></script>

<h2>Customers</h2>

<br>

<script type="text/javascript">
    $(document).ready(function () {

        $('#sample').jqGrid({
            datatype: 'Json',
            url: '/Customer/GetCustomer',
            type: 'POST',
            colNames: ['ID', 'Name', 'Phone', 'Address', 'Date'],
            colModel:
            [
                {key:true , name: 'ID', index: 'ID', editable: false },
                {name: 'Name', index: 'Name', editable: true ,editoptions: {maxlength: 15 },editrules:{ required: true,  }, },
                {  name: 'Phone', index: 'Phone', editable: true,  editoptions: {   maxlength: 15, },editrules: { required: true, },},
                {name: 'Address', index: 'Address', editable: true, editoptions: { maxlength: 30,}, editrules: {required: true,},},
                { name: 'Date', index: 'Date', editable: false, formatter: "date" },
            ],
            pager: jQuery('#pager'),
            jsonReader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "record",
                repeatitems: false,
                Id: "0"
            },
            caption: 'Sample JqGrid Table',
            viewrecords: true,
            rowNum: 10,
            rowList: [10, 20, 30, 40],
            height: '100%',
           // multiselect: true

        }).navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true },
             {
                 // edit options
                 url: '/Customer/EditCustomer',
                 closeOnEscape: true,
                 closeAfterEdit: true,
                 recreateForm: true,
                 afterComplete: function (response)
                 {
                     if (response.responseText) {
                         alert(response.responseText);
                     }
                 }

             },

           {
               //add
               url: '/Customer/AddCustomer',
               closeOnEscape: true,
               closeAfterAdd: true,
               afterComplete: function (response) {
                   if (response.responseText) {
                       alert(response.responseText);
                   }
               }
           },
             { //Options for Delete
                 url:'/Customer/DeleteCustomer',
                 closeOnEscape: true,
                 closeAfterAdd: true,
                 afterComplete: function (response)
                 {
                     if (response.responseText) {
                         alert(response.responseText);
                     }
                 }

             }
             );

    });


</script>



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