jQWidgets Forums
jQuery UI Widgets › Forums › General Discussions › ASP .NET MVC › how get right json data for display in jqxDropDownList with ASP.net Core
Tagged: ASP.NET Core, jqxDropDownList
This topic contains 1 reply, has 2 voices, and was last updated by Hristo 6 years, 3 months ago.
-
Author
-
April 7, 2019 at 5:08 am how get right json data for display in jqxDropDownList with ASP.net Core #104685
Dear everyone,
I have using jqxDropDownList to update for group column, but it no display value. If I press F12 key, and refresh website, it show data very good, but I turn off console, it no display.
I using same code in api controller for display grid, it working very well. I search for solution but not find out. Now, please every help me, how return right api controller json data for display dropdown list. Thank you so much.
first, I show code for display main grid:
This code using for display main grid, and it works very well, I can do update, delete, detail the row data.
// GET: api/Tb0031
[HttpGet]
public async Task<ActionResult<IEnumerable<Tb0031>>> GetTb0031()
{
var resultJson = JsonConvert.SerializeObject(await _context.Tb0031.ToListAsync());
return Content( resultJson , “application/json”);
}second, I used the same code for dropdownlist, but it not good, I don’t know how code right for it
[HttpGet]
public async Task<ActionResult<IEnumerable<Tb0062>>> GetTb0062()
{
var dbResult = await _context.Tb0062.ToListAsync();
var category = (from cat in dbResult
select new
{
cat.S,
cat.Sname
});var resultJson = JsonConvert.SerializeObject(category);
return Content(resultJson, “application/json”);
}In HTML:
<div id=’jqxWidget’>
<div id=”grid”></div>
</div>@section Scripts{
<script lang=”text/javascript”>
var response = new $.jqx.response();
var device = response.device;
var deviceHeight = device.height;
var _theme = “energyblue”;
var _url = “/api/Tb0054”;//test console
/*var categories = new Array();
$.ajax({
//url: ‘/Get/ListTb0062’,
url: ‘/api/Tb0062’,
}).done(function (data) {
console.log(data)
});*/function loadData(_url) {
var IventGroupSource =
{
url: ‘api/Tb0062’,
type: “GET”,
datatype: “json”,
datafields: [
{ name: ‘S’, type: ‘string’ },
{ name: ‘Sname’, type: ‘string’ }
],
};
var IventGroupSourceAdapter = new $.jqx.dataAdapter(IventGroupSource, {
autoBind: true
});var source = {
url: _url,
type: “GET”,
datatype: “json”,
datafields: [
{ name: ‘Id’, type: ‘number’ },
{
name: ‘SNAME’, value: ‘S1’, values: {
source: IventGroupSourceAdapter.records,
value: ‘S’, name: ‘Sname’
}
}, // label of group code
{ name: ‘S1’, type: ‘string’ }, //group code
{ name: ‘InventoryName’, type: ‘string’ }, //item column
{ name: ‘UnitId’, type: ‘string’ }, //unit
{ name: ‘VatimPercent’, type: ‘number’ }, //price column
],
};
var mydataAdapter = new $.jqx.dataAdapter(source, {
autoBind: true
});$(“#grid”).jqxGrid({
columns: [
{
text: ‘ID’, editable: false, sortable: false, filterable: false,
columntype: ‘textbox’, filtertype: ‘textbox’, datafield: ‘Id’,
cellsalign: ‘right’, width: 50
},
{
text: ‘Group’,
datafield: ‘S1’,
displayfield: ‘SNAME’,
columntype: ‘dropdownlist’,
filtertype: ‘textbox’, width: 100,
createeditor: function (row, value, editor) {
editor.jqxDropDownList({
source: IventGroupSourceAdapter,
displayMember: ‘Sname’, valueMember: ‘S’,
});
},
},
{ text: ‘Item’, filtertype: ‘textbox’, map: ‘m\\:properties>d\\:InventoryName’, datafield: ‘InventoryName’, width: 200 },
{ text: ‘Unit’, datafield: ‘UnitId’ , filtertype: ‘textbox’, map: ‘m\\:properties>d\\:UnitID’,},
{ text: ‘Price’, datafield: ‘VatimPercent’, filtertype: ‘textbox’, map: ‘m\\:properties>d\\:VatimPercent’, cellsalign: ‘right’, cellsformat: ‘n’, width: 100 },
],
width: “100%”,
source: mydataAdapter,
showfilterrow: true,
filterable: true,
pageable: true,
columnsresize: false,
pagesize: 12,
autoheight: false,
pagermode: ‘default’,
theme: _theme,
editable: true,
sortable: true,
selectionmode: ‘singlerow’,
});
}$(document).ready(function () {
loadData(_url);
});
</script>
}April 11, 2019 at 10:26 am how get right json data for display in jqxDropDownList with ASP.net Core #104718Hello nhtrung1980,
Is there any error message in the console?
I would like to mention that the “columns” property of the jqxGrid does not have a member “map”.
If you should determinate this in the DataAdapter’s source.
In the columns, you could specify the values for each column by “datafield” member (or “displayfield”, too).Also, I would suggest you try to use
async: false
in the DataAdapter’s sources.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.