jQWidgets Forums
jQuery UI Widgets › Forums › ASP .NET MVC › jqx-grid not displaying
Tagged: #jqwidgets-grid, grid, javascript grid, jquery grid, TagHelpers
This topic contains 4 replies, has 2 voices, and was last updated by Hristo 6 years, 5 months ago.
-
Authorjqx-grid not displaying Posts
-
Pounding on this for quite a while now with no results. Followed the installation instructions and added line to startup.cs to eliminate the error with telemetry.
Page is a simple model and the data is getting into the grid (from debug):
<jqx-grid><div alt-rows="True" auto-height="True" id="jqxGrid992a129e_efe7_4d7a_bdea_4f2119f0b513" pageable="True" sortable="True" source="System.Collections.Generic.List
1[ResourceMgr2.Models.IPMgrModels.NetworkGroupsModel]” theme=”energyblue”></div>
<script type=’text/javascript’>$(function () {var source = { dataFields: [ { name: ‘networkgroupID’, type: ‘number’}, { name: ‘GroupName’, type: ‘string’}, { name: ‘Deletable’, type: ‘bool’}], dataType: ‘array’, localData: [{ ‘networkgroupID’: 1, ‘GroupName’: ‘Group111’, ‘Deletable’: true }, { ‘networkgroupID’: 1003, ‘GroupName’: ‘Group2’, ‘Deletable’: true }]}; var adapter = new $.jqx.dataAdapter(source);var jqxGrid992a129e_efe7_4d7a_bdea_4f2119f0b513= new jqxGrid($(‘#jqxGrid992a129e_efe7_4d7a_bdea_4f2119f0b513’), { theme: ‘energyblue’, altRows: true, pageable: true, sortable: true, autoHeight: true, columns: [{ text: ‘ID’, dataField: ‘networkgroupID’, width: 150 }, { text: ‘Group Name’, dataField: ‘GroupName’, width: 150 }, { dataField: ‘Deletable’, columnType: ‘checkbox’, width: 100 }], virtualMode: false, source: adapter });});</script></jqx-grid>but no output is visible. In some versions of the example code, I saw sourceModel instead of source which does generate output (but with no data although with the theme.) This doesn't match up with the API or anything else so didn't seem even close. This couldn't get much simpler that I would think. Controller:
public IActionResult NetworkGroupsGrid()
{
return View(_ipcontext.NetworkGroupsModel.ToList());
}`View:
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxgrid.js"></script> <script src="~/jqwidgets/jqxgrid.edit.js"></script> <script src="~/jqwidgets/jqxgrid.columnsresize.js"></script> <script src="~/jqwidgets/jqxgrid.filter.js"></script> <script src="~/jqwidgets/jqxgrid.selection.js"></script> <script src="~/jqwidgets/jqxgrid.sort.js"></script> <script src="~/jqwidgets/jqxgrid.pager.js"></script> <script src="~/jqwidgets/jqxgrid.aggregates.js"></script> <script src="~/jqwidgets/jqxgrid.grouping.js"></script> <script src="~/jqwidgets/jqxmenu.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> @model IEnumerable<ResourceMgr2.Models.IPMgrModels.NetworkGroupsModel> @{ ViewData["Title"] = "Index"; ViewData["Theme"] = "energyblue"; } @{ var ng = Model.FirstOrDefault();} <h2>Index</h2> <jqx-grid theme="@ViewData["Theme"]" alt-rows="true" pageable="true" sortable="true" auto-height="true" source="Model"> <jqx-grid-columns> <jqx-grid-column datafield-for="@(ng.networkgroupID)" text="ID" width="150"></jqx-grid-column> <jqx-grid-column datafield-for="@(ng.GroupName)" text="Group Name" width="150"></jqx-grid-column> <jqx-grid-column datafield-for="@(ng.Deletable)" column-type="checkbox" width="100"></jqx-grid-column> </jqx-grid-columns> </jqx-grid>
What am I missing to get this going?
formatting went wonky there but. Also, gets “Unable to get property ‘dataAdapter’ of undefined or null reference” in console, if that means anything as well. Some sort of binding error between the generating code (with the data) and the display generation not getting it?
Hello ekrichbaum,
Please, try to include the “jqxdata.export.js” file as other files:
<script src="~/jqwidgets/jqxdata.export.js"></script>
Also, please, check for the “jqx.data.js” file does exist in the ‘jqwidgets’ folder.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comIt does exist and I’ve added most of the other files as well. The dataAdapter issue was resolved by moving jquery to the header as well. Still no display at the grid.
Hello ekrichbaum,
Is there any other issue in the console?
Please check the data that you send, also.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.