jQWidgets Forums

Tagged: #jqwidgets-grid, grid, javascript grid, jquery grid

This topic contains 6 replies, has 2 voices, and was last updated by ewielage 6 years, 4 months ago.

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

Author

Grid not being displayed MVC Core 2.2 Posts
February 16, 2019 at 9:45 pm Grid not being displayed MVC Core 2.2 #104004

ewielage
Participant

I am working with a trial of the jqwidgets and trying to add a grid or data table to a viewew for the first time without success so far.

Below is the code I have added to _ViewImport, _Layout.cshtml and Index.cshtml. And I have double checked that all the .js and .css files are in the right folders. When I run the application in debug mode as soon as it hits the <jqx-data-table line …> line the application just steps over the rest of the lines included in that tag.

I know I have data in the model because I can display it in the same viewer using a <table> tag. I have tried both the <jqx-data…> and the <jqx-grid …> tags both with the same result. Would appreciate your help.

Ed

_ViewImports.cshtml
@using prototype
@using prototype.Models
@using WebApplication3
@namespace WebApplication3.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, jQWidgets.AspNetCore.Mvc.TagHelpers

_Layout.cshtml
<html>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>@ViewData[“Title”] – prototype</title>

<environment include=”Development”>
<link rel=”stylesheet” href=”~/lib/bootstrap/dist/css/bootstrap.css” />
<script src=”~/lib/jquery/dist/jquery.js”></script>
<script src=”~/jqwidgets/jqxcore.js”></script>
<script src=”~/jqwidgets/jqxdata.js”></script>
</environment>
<environment exclude=”Development”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css”
asp-fallback-href=”~/lib/bootstrap/dist/css/bootstrap.min.css”
asp-fallback-test-class=”sr-only” asp-fallback-test-property=”position” asp-fallback-test-value=”absolute”
crossorigin=”anonymous”
integrity=”sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=” />
</environment>
<link rel=”stylesheet” href=”~/css/site.css” />
<link rel=”stylesheet” href=”~/jqwidgets/styles/jqx.base.css” />
</head>

Index.cshtml
<script src=”~/jqwidgets/jqxbuttons.js”></script>
<script src=”~/jqwidgets/jqxscrollbar.js”></script>
<script src=”~/jqwidgets/jqxcore.js”></script>
<script src=”~/jqwidgets/jqxdata.js”></script>
<script src=”~/jqwidgets/jqxdatatable.js”></script>
<script src=”~/jqwidgets/jqxdata.export.js”></script>
<script src=”~/jqwidgets/jqxgrid.js”></script>
<script src=”~/jqwidgets/jqxgrid.columnsresize.js”></script>
<script src=”~/jqwidgets/jqxgrid.columnsreorder.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.grouping.js”></script>
<script src=”~/jqwidgets/jqxrid.storage.js”></script>
<script src=”~/jqwidgets/jqxmenu.js”></script>
<script src=”~/jqwidgets/jqxlistbox.js”></script>
<script src=”~/jqwidgets/jqxdropdownlist.js”></script>

@model IEnumerable<prototype.Models.Invoice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;

@{
ViewData[“Title”] = “Index”;
Layout = “~/Views/Shared/_Layout.cshtml”;
}

@{
var invoice = Model.FirstOrDefault();
}

<jqx-data-table sortable=”true” width=”850″ source=”Model”>
<jqx-data-table-columns>
<jqx-data-table.column datafield-for=”@(invoice.InvoiceNumber)” width=”150″></jqx-data-table.column>
<jqx-data-table.column datafield-for=”@(invoice.InvoiceDate)” width=”150″></jqx-data-table.column>
<jqx-data-table.column datafield-for=”@(invoice.InvoiceAmt)” width=”150″></jqx-data-table.column>
<jqx-data-table.column datafield-for=”@(invoice.DueDate)” width=”150″></jqx-data-table.column>
</jqx-data-table-columns>
</jqx-data-table>

@*<jqx-grid id=”grid” alt-rows=”true” show-status-bar=”true” show-aggregates=”true” filterable=”true” pageable=”true” auto-height=”true” source-id=”ID” sortable=”true” width=”850″ source=”Model”>
<jqx-grid-columns>
<jqx-grid-column datafield-for=”@(invoice.InvoiceNumber)” width=”150″></jqx-grid-column>
<jqx-grid-column datafield-for=”@(invoice.InvoiceDate)” width=”150″></jqx-grid-column>
<jqx-grid-column datafield-for=”@(invoice.InvoiceAmt)” width=”150″></jqx-grid-column>
<jqx-grid-column datafield-for=”@(invoice.DueDate)” width=”150″></jqx-grid-column>
</jqx-grid-columns>
</jqx-grid>*@

February 18, 2019 at 11:50 am Grid not being displayed MVC Core 2.2 #104023

Hristo
Participant

Hello Ed,

I would like to ask you are you sure you receive data from your model?
Is the dataFields the same as in the HTML, dataField-for?
Also, is there any error message in the console?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

February 18, 2019 at 9:33 pm Grid not being displayed MVC Core 2.2 #104043

ewielage
Participant

Hi Hristo,
Yes there are error 2 messages in the console. Here they are;

Failed to load resource: the server responded with a status of 404 () jqxrid.storage.js:1
Uncaught SyntaxError: Unexpected token , Invoices:77

Yes, I know I have data in the model. I also have the following code in my Index.cshtml and the page displays the table. And as you can see I am using the same datafield names.

<table class=”table”>
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.InvoiceNumber)
</th>
<th>
@Html.DisplayNameFor(model => model.Customer)
</th>
<th>
@Html.DisplayNameFor(model => model.InvoiceAmt)
</th>
<th>
@Html.DisplayNameFor(model => model.InvoiceDate)
</th>
<th>
@Html.DisplayNameFor(model => model.DueDate)
</th>

<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.InvoiceNumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.Customer.CustomerName)
</td>
<td>
@Html.DisplayFor(modelItem => item.InvoiceAmt)
</td>
<td>
@Html.DisplayFor(modelItem => item.InvoiceDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.DueDate)
</td>

</tr>
}
</tbody>
</table>

February 19, 2019 at 10:00 am Grid not being displayed MVC Core 2.2 #104050

Hristo
Participant

Hello Ed,

It looks like the “jqxrid.storage.js” file is not found.
But the right name should be “jqxgrid.storage.js“.
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

February 19, 2019 at 4:40 pm Grid not being displayed MVC Core 2.2 #104070

ewielage
Participant

Hello Hristo,

There was no “jqxrid.storage.js file included in the trial download. In my wwwroot/jqwidgets folder I do have the jqxgrid.storage.js file.

My code is not referring to the jqxrid.storage.js file. Isn’t the error message being generated because your js libraries are referring to that file?

Ed

February 19, 2019 at 5:32 pm Grid not being displayed MVC Core 2.2 #104071

ewielage
Participant

Hello Hristo,
Sorry, the first error was my fault. After I my previous post I realized the problem was I mistyped the name of the jqxgrid.storage.js file in my <script src=…> tag.

Still am having a problem with the second message “Uncaught SyntaxError: Unexpected token , Invoices:77”. When I click on the “Invoices: 77” link in the console and look at the localData in the “<script type=’text/javascript’>$(function ()…” line the values for InvoiceAmt are null and look like this “‘InvoiceAmt’: ,” . In the Model the data type for that property is Currency. Do you think that is the problem?

Thanks for your help, Ed

February 20, 2019 at 10:35 pm Grid not being displayed MVC Core 2.2 #104092

ewielage
Participant

So I changed the datatype of the property InvoiceAmt from decimal with a annotation of currency to float. After I did that and updated my database I no longer get the “Uncaught Syntax Error…”.

However, now when I run the application I am getting this error message in the console;

“Cannot read property ‘dataAdapter’ of undefined TypeError: Cannot read property ‘dataAdapter’ of undefined at HTMLDocument.<anonymous>”

I can get an empty grid control to display in my viewer if I add this;

<jqx-grid >

</jqx-grid>

However, as soon as I add the “source=”Model” to the tag I get the above error message. Right now my model only contains 4 properties and all the data for the records are being displayed with their values in the “…localData: [{ ‘Id’: 1, ‘InvoiceNumber’: 1001,….”.

Thanks, Ed
Author

Posts

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

You must be logged in to reply to this topic.