jQuery UI Widgets Forums ASP .NET MVC jqx-grid not displaying

This topic contains 4 replies, has 2 voices, and was last updated by  Hristo 2 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • jqx-grid not displaying #103452

    ekrichbaum
    Participant

    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?

    jqx-grid not displaying #103453

    ekrichbaum
    Participant

    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?

    jqx-grid not displaying #103481

    Hristo
    Participant

    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 Hristov

    jQWidgets team
    http://www.jqwidgets.com

    jqx-grid not displaying #103489

    ekrichbaum
    Participant

    It 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.

    jqx-grid not displaying #103505

    Hristo
    Participant

    Hello ekrichbaum,

    Is there any other issue in the console?
    Please check the data that you send, also.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.