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