jqwidget not displayed

[kagelParticipant]

I tried to display some jqwidgets in my asp mvc .net core application today.
Following the instructions in

https://www.jqwidgets.com/asp.net-core-mvc-tag-helpers-documentation/

My cshtml view is:

@model IEnumerable<AspMVCDemo.Models.Person>

<p>test</p>

<jqx-grid theme="@ViewData["Theme"]" sortable="true" filterable="true" height="500" width="850" source="Model">
    <jqx-grid-columns>
        <jqx-grid-column datafield="Name" width="100" text="Name"></jqx-grid-column>
        <jqx-grid-column datafield="Age" width="150"></jqx-grid-column>
    </jqx-grid-columns>
</jqx-grid>

<label>ASP .NET Core MVC Calendar Tag Helper Example</label><br /><br />
<jqx-calendar theme="@ViewData["Theme"]" width="200" height="200"></jqx-calendar>
<p>test2</p>

The ‘Model’ contains data, a collection of persons.

During installation I added

@using jQWidgets.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, jQWidgets.AspNetCore.Mvc.TagHelpers
@inject Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration TelemetryConfiguration

to the _ViewImports.cshtml
Then I started the App an received an error

“InvalidOperationException: No service for type ‘Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration’ has been registered.”

Therefore I removed the last line temporarily.

Question Is Microsoft.ApplicationInsights mandatory for jqwidget ? I just want to use some jq control without any overhead as a first step,
and have been struggling a couple of hours, since absolutly none of these pretty controls can be displayed in a webpage ? Any idea ?

[kagelParticipant]

additional info javascript debugging provides:

 [Show/hide message details.] GET
http://localhost:51727/Grid/List
[HTTP/1.1 200 OK 511ms]
[Show/hide message details.] GET
http://localhost:51727/lib/jquery/dist/jquery.js
[HTTP/1.1 304 Not Modified 21ms]
[Show/hide message details.] GET
http://localhost:51727/jqwidgets/styles/jqx.base.css
[HTTP/1.1 304 Not Modified 196ms]
[Show/hide message details.] GET
http://localhost:51727/jqwidgets/jqxcore.js
[HTTP/1.1 304 Not Modified 74ms]
[Show/hide message details.] GET
http://localhost:51727/jqwidgets/jqxdata.js
[HTTP/1.1 304 Not Modified 110ms]
[Show/hide message details.] GET
http://localhost:51727/jqwidgets/jqxdraw.js
[HTTP/1.1 304 Not Modified 199ms]
[Show/hide message details.] GET
http://localhost:51727/lib/bootstrap/dist/css/bootstrap.css
[HTTP/1.1 304 Not Modified 157ms]
[Show/hide message details.] GET
http://localhost:51727/css/site.css
[HTTP/1.1 304 Not Modified 87ms]
[Show/hide message details.] GET
http://localhost:51727/jqwidgets/jqxbuttons.js
[HTTP/1.1 304 Not Modified 143ms]
[Show/hide message details.] GET
http://localhost:51727/lib/bootstrap/dist/js/bootstrap.js
[HTTP/1.1 304 Not Modified 160ms]
[Show/hide message details.] GET
http://localhost:51727/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0
[HTTP/1.1 304 Not Modified 175ms]
[Show/hide message details.] GET
http://localhost:51727/lib/jquery/dist/jquery.js
[HTTP/1.1 304 Not Modified 16ms]
jQuery.Deferred exception: $.jqx is undefined @http://localhost:51727/Grid/List:89:1155
mightThrow@http://localhost:51727/lib/jquery/dist/jquery.js:3534:21
resolve/</process<@http://localhost:51727/lib/jquery/dist/jquery.js:3602:12
 undefined jquery.js:3818:3
[Show/hide message details.] TypeError: $.jqx is undefined[Learn More] List:89:1155
<anonymous>
http://localhost:51727/Grid/List:89:1155
mightThrow
http://localhost:51727/lib/jquery/dist/jquery.js:3534:21
resolve/</process<
http://localhost:51727/lib/jquery/dist/jquery.js:3602:12

[kagelParticipant]

the error “TypeError: $.jqx is undefined” appear although the declarations in the header:

<script src=”~/jqwidgets/jqxbuttons.js”></script>
<script src=”~/jqwidgets/jqx-all.js”></script>
<script src=”~/jqwidgets/jqxgrid.columnsresize.js”></script>
<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>

the recommendation in the post

https://www.jqwidgets.com/community/topic/typeerror-a-jqx-_jqxgrid-is-undefined/

doesn’t help ..?

[HristoParticipant]

Hello kagel,

About the “Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration” – yes, it is mandatory.
Please, check in your solution for this is it possible somewhere else where this is imported again.

You could try to comment the jQuery reference – <script src="~/lib/jquery/dist/jquery.js"></script>.
If you do not use the jQuery you could miss it. Our library is possible to be used without it.

I tested this example and it seems to work fine:

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<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/jqxmenu.js"></script>
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxlistbox.js"></script>
<script src="~/jqwidgets/jqxdropdownlist.js"></script>

<jqx-grid theme="@ViewData["Theme"]" sortable="true" filterable="true" height="500" width="850" source="Model" instance="getInstance()">
    <jqx-grid-columns>
        <jqx-grid-column datafield="Name" width="100" text="Name"></jqx-grid-column>
        <jqx-grid-column datafield="Age" width="150"></jqx-grid-column>
    </jqx-grid-columns>
</jqx-grid>

<label>ASP .NET Core MVC Calendar Tag Helper Example</label><br /><br />
<jqx-calendar theme="@ViewData["Theme"]" width="200" height="200"></jqx-calendar>
<p>test2</p>

@{
    <script type="text/javascript">
        function getInstance(instance) {
            instance["addrow"](null, { Name: 'Peter', Age: 28 });
            instance["addrow"](null, { Name: 'Nancy', Age: 24 });
        };
    < /script>
}

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[kagelParticipant]

Hi Hristo,

thanks for your help. In the meantime I did the following:

1 Removed the reference

<script src="~/lib/jquery/dist/jquery.js"></script>

2 Added the reference

@inject Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration TelemetryConfiguration
in the _ViewImports.cshtml after having added the nuget package Microsoft.ApplicationInsights version 2.7.2

Now I get an ugly error

InvalidOperationException: No service for type 'Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration' has been registered.

on starting the application (asp.mvc core 2.1) ..?

Second: before I added the @inject line in _ViewImports.cshtml
on debugging the page at

<jqx-grid theme="@ViewData["Theme"]" sortable="true" filterable="true" height="500" width="850" source="Model">

the “Model” contain a List of IEnumerable<Person> passed by the Controller

    public class GridController : Controller
    {
        List<Person> data;

        [HttpGet]
        public ViewResult List()
        {
            PersonService ps = new PersonService();
            data = ps.GetPersons();
            return View(data);
        }

    }

As if the datasource is Ok?
If I remove the source=”Model” Attribute in <jqx-grid an emtpy grid is display, otherwise there is no grid in the page..
That’s still my issue.

In all samples I saw about the jqgrid the object type passed from the controller ist a “List<T>”, seems to be right ?
My question now: Is the error “TypeError: $.jqx is undefined” just due to the missing component TelemetryConfiguration
or do I have a mix of two errors
1. TelemetryConfiguration missing AND 2. any object type mismatch Grid expects another datasource type (not an List<T> ???)
in other word if the first error would be fixed the TypeError would be resolved ?? Then the issue would now be reduced to the InvalidOperationException ?? Any help is appreciated…

[HristoParticipant]

Hello kagel,

The data that you return it should have the same fields as in the grid.
For example, if you determinate it the columns with datafields “Name” and “Age”.
Then the List<Person> data should have the same datafields.
I am a little bit confused. Did you add “TelemetryConfiguration” or not.
Because it is important for successfully work of the TagHelpers.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[ekrichbaumParticipant]

Pounded on this a while myself. The “Ugly Error” is because the installation of the Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration is incomplete. In startup.cs, add:
services.AddApplicationInsightsTelemetry(Configuration);

before

services.AddMvc();

[Author]

Posts