jQueryEasyUI: how to reload combogrid?

Question

I have a ASP.NET Core app, I want to load data to easyUI combogrid using ajax call. I do this way:

    var jsonData = [];

    populateGrid();// Here is ajax call, jsonData array is populated

    var g23=$('#ipCC').combogrid({
        panelWidth: 450,
        value: '006',
        idField: 'customerID',
        textField: 'fullName',
        source:jsonData,
        columns: [[
                {field: 'customerID', title: 'customerID', width: 60 },
                {field: 'fullName', title: 'fullName', width: 100 }
            ]]
    });

    var g25 = $('#ipCC').combogrid('grid');//<-----------------error
    g25.datagrid('loadData', jsonData);

But when I try to get the ptr to 'grid' I receive the error:

Uncaught TypeError: Cannot read property 'jQuery3110372840994670562' of undefined at U.get (jquery.min.js:3) at U.access (jquery.min.js:3) at Function.data (jquery.min.js:3) at grid (jquery.easyui.min.js:16058) at r.fn.init.$.fn.combogrid (jquery.easyui.min.js:16033) at Index:240

What is wrong? How to fix it and load data to the combogrid?

Answer 1

<input id="cc" name="dept" value="01">
<script type="text/javascript">
    var jsonData = {"rows":[
                            {"customerID":"ID1","fullName":"John XYZ"},
                            {"customerID":"ID2","fullName":"John ABC"},
                            {"customerID":"ID3","fullName":"John DEF"},
                            {"customerID":"ID4","fullName":"John GHJ"},
                            {"customerID":"ID5","fullName":"John KLM"},
                            {"customerID":"ID6","fullName":"John PQR"},
                            {"customerID":"ID7","fullName":"John STU"},
                            {"customerID":"006","fullName":"John STU 2"} 
                            ]};

    //populateGrid();// Here is ajax call, jsonData array is populated

    var g23 =   $('#cc').combogrid({
                    panelWidth:450,
                    value:'006',         
                    idField:'customerID',
                    textField:'fullName',
                    source: jsonData,
                    columns: [[
                                {field: 'customerID', title: 'customerID', width: 60 },
                                {field: 'fullName', title: 'fullName', width: 100 }
                            ]],
                });

    var g25 = $('#cc').combogrid('grid'); //<-----------------NO error

    g25.datagrid('loadData', jsonData);
</script>

I took a hint from examples from EasyUI and your JSON must have "rows" array.

UPDATE:

Main point is to how to build Json object. I took as an example this link. So you need rows property that holds an array of Customers. See the code below.

WebApi Controller

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System.Collections.Generic;

namespace WebApplication5.Controllers
{
[Produces("application/json")]
[Route("api/Example5")]
public class Example5Controller : Controller
{
    public class Customer
    {
        public string customerID { get; set; }
        public string fullName { get; set; }
    }

    public class RootJsonClass
    {

        public Customer[] rows { get; set; }
    }

    //https://www.newtonsoft.com/json/help/html/SerializeObject.htm
    // POST: api/Example5
    [HttpPost]
    public JsonResult Post([FromBody]string Query)
    {
        //SetHeader();

        var rs1 = new RootJsonClass();

        List<Customer> lstC = new List<Customer>(8);

        lstC.Add(new Customer { customerID = "ID1", fullName = "John XYZ" });
        lstC.Add(new Customer { customerID = "ID2", fullName = "John ABC" });
        lstC.Add(new Customer { customerID = "ID3", fullName = "John DEF" });
        lstC.Add(new Customer { customerID = "ID4", fullName = "John GHJ" });
        lstC.Add(new Customer { customerID = "ID5", fullName = "John KLM" });
        lstC.Add(new Customer { customerID = "ID6", fullName = "John PQR" });
        lstC.Add(new Customer { customerID = "ID7", fullName = "John STU" });
        lstC.Add(new Customer { customerID = "006", fullName = "John STU 2" });

        rs1.rows = lstC.ToArray();

        var j1 = JsonConvert.SerializeObject(rs1, Formatting.Indented);

        return Json(j1);
    }

   }
}

Web page:

<input id="cc" name="dept" value="01">
        <script type="text/javascript">
            var jsonData = [];

            function populateGrid() {
                //var val = $('#cc').combogrid('getValue');
                //alert('populateGrid');
                var Url = '/api/Example5';
                var objval = "param";
                $.ajax({
                    type: "POST",
                    async: false,
                    contentType: "application/json; charset=utf-8",
                    url: Url,
                    data: "'" + objval + "'", //data: "{'Query':'" + objval + "'}",
                    dataType: "json",
                    success: function (data) {
                        jsonData = data;//.d;
                    },
                    error: function (result) {
                        alert("Error populateGrid:"+result);
                    }
                });

                console.log('Array populated');
            };

            populateGrid ();

            var g23 =   $('#cc').combogrid({
                            panelWidth:450,
                            value:'006',         
                            idField:'customerID',
                            textField:'fullName',
                            source: jsonData,
                            columns: [[
                                        {field: 'customerID', title: 'customerID', width: 60 },
                                        {field: 'fullName', title: 'fullName', width: 100 }
                                    ]],
                        });

            var g25 = $('#cc').combogrid('grid'); //<-----------------NO error

            console.log(jsonData);

            jsonData = JSON.parse(jsonData);

            g25.datagrid('loadData', jsonData);
        </script>

UPDATE 2:

Javascript (g25 variable is already set, so skip setting it again.):

<input id="cc" name="dept" value="01">
        <button name="btnRefresh" onclick="JavaScript:fncRefresh();" >Refresh</button>
        <script type="text/javascript">
            function fncRefresh() {
                populateGrid();
                jsonData = JSON.parse(jsonData);

                g25.datagrid('loadData', jsonData);
            }

Controller (it gives for test 4 or 8 items in the list):

private static bool bFirstCallFlag = true;

    //https://www.newtonsoft.com/json/help/html/SerializeObject.htm
    // POST: api/Example5
    [HttpPost]
    public JsonResult Post([FromBody]string Query)
    {
        //SetHeader();

        var rs1 = new RootJsonClass();

        List<Customer> lstC = new List<Customer>(8);

        lstC.Add(new Customer { customerID = "ID1", fullName = "John XYZ" });
        lstC.Add(new Customer { customerID = "ID2", fullName = "John ABC" });
        lstC.Add(new Customer { customerID = "ID3", fullName = "John DEF" });
        lstC.Add(new Customer { customerID = "ID4", fullName = "John GHJ" });

        if (bFirstCallFlag)
        {
            lstC.Add(new Customer { customerID = "ID5", fullName = "John KLM" });
            lstC.Add(new Customer { customerID = "ID6", fullName = "John PQR" });
            lstC.Add(new Customer { customerID = "ID7", fullName = "John STU" });
            lstC.Add(new Customer { customerID = "006", fullName = "John STU 2" });

            bFirstCallFlag = false;
        }
        else
        {
            bFirstCallFlag = true;
        }

        rs1.rows = lstC.ToArray();

        var j1 = JsonConvert.SerializeObject(rs1, Formatting.Indented);

        return Json(j1);
    }