[SOLVED] How to parse data from Controller to view using JQGrid?

How to parse data from Controller to view using JQGrid?

I am trying to pass data from controller to GQ grid. I have done implemented the SQL operation - selecting a row- in another file and returning a object of list type List<Models.ViewModel.Itegration> to the Controller. I implemented the controller of type JsonResult which returns the data in json format. The controller is using [HttpGet] Attritute. I have attached code of my controller, html, js file and screenshot of the issue. The Google Console is not showing any problem. The table is getting ready, but the table data is showing. I guess there is the issue with "passing the data" properly. It would be very helpful for me if anybody could just check my code and let me know where I am getting wrong.

Additionally, is there any software, where I can check where the issue is coming while connecting to server, because in this case Google inspect tool is not helpful at all.

In my controller, by using breakpoint I have checked that in Integrations value = db.GetIntegrationRow(); I am getting a correct value in value. Controller:

#region Namespace

using MCNIDev.DBAccess;
using MCNIDev.Models.ViewModel;
using MCNIDev.Processor.Services;

using System.Web.Mvc;

#endregion

namespace MCNIDev.Content
{
    /// <summary>
    /// This controller class is responsible for all action in  Integration view
    /// </summary>
    public class IntegrationsController : Controller
    {
        public ActionResult Details()
        {
            return PartialView();
        }

        /// <summary>
        /// To get the data for JQGrid
        /// </summary>
        [HttpGet]
        public JsonResult Detail()
        {

            IntegrationsProcessor db = new IntegrationsProcessor(new MCNIDbContext());
            Integrations value = db.GetIntegrationRow();

            return new JsonResult()
            {
                               Data = value,
                               JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };
           
        }

    }
}

HTML file

@using MCNIDev.CustomControls
@model MCNIDev.Models.ViewModel.Integrations


@{
    ViewBag.Title = "Details";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=devicexb c-width" />
    <title>Integrations</title>
</head>
@Styles.Render("~/Content/toasterCss")
@Styles.Render("~/Content/dataPickerCss")
<style type="text/css">
    .btn {
        min-width: 80px !important;
    }
</style>
<body>
    @using (Html.BeginForm("", "Integrations", FormMethod.Post, new { enctype = "multipart/form-data", @class = "form-horizontal", id = "frmManifestOrders" }))
    {
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Integrations</h1>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div><!-- /.content-header -->

        <section class="content">
            <div class="container-fluid">
                <div class="card card-block">
                    <div class="row table-responsive">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12 col-sm-12">
                                    <table id="tblSelectIntegrations"></table>
                                    <div id="divSelect"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12">
                                    <hr />
                                    <input type="button" class="btn btn-secondary" onclick="document.location.href='/Dashboard/Dashboard';" value="Cancel" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    }
</body>
</html>
@*Bundle file includes the path to single JavaScript file Integration that does GQGrid operation *@
@Scripts.Render("~/bundles/integrations")
<script>
$(document).ready(function(){
    Integrate.GetValue();
});
</script>

JavaScript file:

var Integrate = function() {
function GetValue() {
    $("#tblSelectIntegrations").jqGrid({
        mtype: "GET",
        url: "/Integrations/Detail",
        datatype: "json",
        async: false,
        colNames: [
            "First Name", "Email Address",""
        ],
        colModel: [
            //{
            //    name: '',
            //    key: false,
            //    width: 30,
            //    editable: true,
            //    formatter: function () {
            //        return "<input type='checkbox' value='Select' class='fm-button ui-state-default ui-corner-all fm-button-icon-left noPrint'\>";
            //    }
            //},
            { key: false, name: 'IntegrationName', index: 'IntegrationName', editable: false, width: 200 },
            { key: false, name: 'CompanyEmail', index: 'CompanyEmail', editable: false, width: 200 },
         { key: false, name: 'Blank', index: 'Blank', editable: false, width: 200 }
        ],
        pager: jQuery("#divSelect"),
        rowNum: 1,
        scroll: 0,
        height: $(window).innerHeight() - 450,
        width: "100%",
        viewrecords: true,
        caption: "Product",
        emptyrecords: "No records to display",
        jsonReader: {
            root: "",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false
        },
        autowidth: true,
        multiselect: false,
        loadonce: false,
        ajaxGridOptions: { cache: false },
              
    }).navGrid("tblSelectIntegrations", { edit: false, add: false, del: false, search: false, refresh: false });
}
return {
        GetValue: GetValue
    };
}();

Solution

The issue lies in controller. I am trying to send data without telling JQGrid where to insert data.

var jsonData = new
            {
                rows = value
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);

Replace below code with above code

return new JsonResult()
            {
                               Data = value,
                               JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };

In my first code I've mentioned that add my data in the rows.