jqueryasp.net-corejquery-easyui

jQueryEasyUI: how to reload combogrid?


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?


Solution

  • <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);
        }