How to fill jqgrid with ajax data , which is data getting from asp.net MVC controller?

Question

I am trying to populate the jqgrid first row with first column as static data and rest columns as a count from mvc controller. For calling controller i have wriiten an ajax request , but after trying everything i am unable to fill data.

This is my ajax request.

        function getCounts() {
            var products;
            $.ajax({
                dataType:'json',
                url: "/CapacityPlanning/getResouceCount2",
                data: JSON.stringify({ resource: resourceId, levelId: "Level-1" }),
                type: "POST",
                async: false,
                contentType: "application/json; charset=utf-8",
                success: function (response) {
                    products = response;
                },
                failure: function (response) {
                    //  alert("failure: "+response);
                },
                error: function (response) {

                    // alert("error: "+response);
                }
            });

            return products;
        }

This is my jqgrid where i am trying to get those counts.

        $("#jqGridMonthlySummary2").jqGrid({
            //data: mydatatable1,
            datatype: "json",
            height: 'auto',
            width: 1200,
            colNames: ['Resources', 'Planned (Annual)', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
            colModel: [
                { name: 'Resources', width: 400, align: 'center', editable: false, sortable: false, cellattr: getCounts() },
                
                { name: 'Planned (Annual)', width: 78, align: 'center',cellattr: getCounts() },
                 { name: 'July', width: 60, align: 'center', editable: false, cellattr: getCounts() },
                 { name: 'Aug', width: 60, align: 'center', editable: false, cellattr: getCounts() },
                 { name: 'Sep', width: 60, align: 'center', editable: false, cellattr: getCounts() },
                    { name: 'Oct', width: 60, align: 'center', editable: false, cellattr: getCounts() },
                  { name: 'Nov', width: 60, align: 'center', editable: false, cellattr: getCounts() },
                   { name: 'Dec', width: 60, align: 'center', editable: false, cellattr: getCounts() },
                 { name: 'Jan', width: 60, align: 'center', editable: false, cellattr: getCounts() },
                 { name: 'Feb', width: 60, align: 'center', editable: false, cellattr: getCounts() },
                  { name: 'Mar', width: 60, align: 'center', editable: false, cellattr: getCounts() },
                  { name: 'Apr', width: 60, align: 'center', editable: false, cellattr: getCounts() },
                  { name: 'May', width: 60, align: 'center', editable: false, cellattr: getCounts() },
                  { name: 'June', width: 60, align: 'center', editable: false, cellattr: getCounts() }],
            grouping: false,

            shrinkToFit: false,
            autowidth: false,
            forceFit: true,
            gridView: true,
            caption: "Resource Data",
            rowNum: 5
        });

This my controller action method

        public ActionResult getResouceCount2(string resource, string levelId)
    {
        CapacityPlanningEntities cpEnt = new CapacityPlanningEntities();
        //string resource = "102398";
        //string levelId = "Level-1";
        int numberOfdays = 18;
        int count = cpEnt.getResouceCount(resource, levelId);
        int TotalCount = count * numberOfdays;
        //ViewBag.Count = count;
        //return TotalCount;
        return Json(TotalCount);
    }

Answer 1

Your controller should return an object see the answer in Here

  public getResouceCount2(string resource, string levelId)
    {
   CapacityPlanningEntities cpEnt = new CapacityPlanningEntities();
    //string resource = "102398";
    //string levelId = "Level-1";
    int numberOfdays = 18;
    int count = cpEnt.getResouceCount(resource, levelId);
    int TotalCount = count * numberOfdays;

        var jsonData = new
        {
            total = TotalCount ,
            page = 1,
            records = 2,
            rows = cpEnt 

        };

        return Json(jsonData);
    }