[JaiHollowayParticipant]

Update: I got it working.

Thank you.

[JaiHollowayParticipant]

Hi Dimitar

Again, thanks for your response. The code in the JS file applied to the jqxGrid standalone nuget package. I wrongly assumed that it would be the same control.

I have altered and now they seem to work. However….

var source =
            {
                datatype: "json",
                datafields: [
					 { name: 'Id', type: 'int' },
					 { name: 'Name', type: 'string' },
					 { name: 'Description', type: 'string' }
                ],
                url: 'Title/GetTitles'
            };
    var dataAdapter = new $.jqx.dataAdapter(source);

    $("#grid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columnsresize: true,
                columns: [
                    { text: 'Id', datafield: 'Id', editable: false},
                    { text: 'Name', datafield: 'Name'}, //, width: 100, minwidth: 90, maxwidth: 150 },
                    { text: 'Description', datafield: 'Description'}//, cellsformat: 'f2', width: 100 },
                  
                ]
            });

The above never goes to my controller.

What baffles me… the jqxGrid that I first used, was dead simple. I got it up and running in 2 minutes and loved it. It’s because of that control that I am looking at the rest now. I have been looking at your help files and trying various things, but never with any joy.

I am using MVC4, btw…

I am just trying to understand how to use your widgets. Thanks for the help

[JaiHollowayParticipant]

Actual error

Unhandled exception at line 7, column 2263 in http://localhost:53734/jqwidgets/jqxcore.js

0x800a139e – JavaScript runtime error: Invalid property: url

[JaiHollowayParticipant]

Hi Dimitar

Thanks for getting back to me. No change.

Here is what I did.

PM> Install-Package jQWidgets_Framework

The BundleConfig

using System.Web;
using System.Web.Optimization;

namespace UXLayer
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
                        "~/Scripts/knockout-{version}.js", "~/Scripts/knockout.wijmo.js"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));

            bundles.Add(new ScriptBundle("~/bundles/jqwidgets").Include(
                        "~/jqwidgets/jqxcore.js",
                        "~/jqwidgets/jqxdata.js",
                        "~/jqwidgets/jqxgrid.js",
                        "~/jqwidgets/jqxgrid.selection.js",
                        "~/jqwidgets/jqxgrid.pager.js",
                        "~/jqwidgets/jqxlistbox.js",
                        "~/jqwidgets/jqxbuttons.js",
                        "~/jqwidgets/jqxscrollbar.js",
                        "~/jqwidgets/jqxdatatable.js",
                        "~/jqwidgets/jqxtreegrid.js",
                        "~/jqwidgets/jqxmenu.js",
                        "~/jqwidgets/jqxcalendar.js",
                        "~/jqwidgets/jqxgrid.sort.js",
                        "~/jqwidgets/jqxgrid.filter.js",
                        "~/jqwidgets/jqxdatetimeinput.js",
                        "~/jqwidgets/jqxdropdownlist.js",
                        "~/jqwidgets/jqxslider.js",
                        "~/jqwidgets/jqxeditor.js",
                        "~/jqwidgets/jqxinput.js",
                        "~/jqwidgets/jqxdraw.js",
                        "~/jqwidgets/jqxchart.core.js",
                        "~/jqwidgets/jqxchart.rangeselector.js",
                        "~/jqwidgets/jqxtree.js",
                        "~/jqwidgets/globalize.js",
                        "~/jqwidgets/jqxbulletchart.js",
                        "~/jqwidgets/jqxcheckbox.js",
                        "~/jqwidgets/jqxradiobutton.js",
                        "~/jqwidgets/jqxvalidator.js",
                        "~/jqwidgets/jqxpanel.js",
                        "~/jqwidgets/jqxpasswordinput.js",
                        "~/jqwidgets/jqxnumberinput.js",
                        "~/jqwidgets/jqxcombobox.js"
                        ));
        }
    }
}

_Layout

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <script src="~/Scripts/jquery-1.9.1.min.js"></script>
        <script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
        <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />

        <link href="~/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
        <link href="~/jqwidgets/styles/jqx.darkblue.css" type="text/css" rel="stylesheet"/>

        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />

        @Scripts.Render("~/bundles/jqwidgets")
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        
        @* <script type="text/javascript" src="../../scripts/intern/layout.js"></script>*@
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <div id ="jqxMenu">
                    <nav>
                        
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                            <li>@Html.ActionLink("Students","Index","Student")</li>
                            <li>Lookup Management
                                <ul>@Html.ActionLink("Titles","Index","Title")</ul>
                                <ul>@Html.ActionLink("Visa Statuses","Index","VisaStatus")</ul>
                                <ul>@Html.ActionLink("Prior Attainments","Index","PriorAttainmentLevel")</ul>
                            </li>
                        </ul>
                            
                    </nav>
                        </div>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

        @*@Scripts.Render("~/bundles/jquery")*@
        @RenderSection("scripts", required: false)

        
    </body>
</html>

Index Page

@{
    ViewBag.Title = "Title Index";
}

<h2>List of Titles</h2>

<div>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="grid">
            <div id="pager"></div>
        </div>
     </div>
</div>

<script src="~/Scripts/intern/titlegrid.js"></script>

JS file

$(function () {
    $("#grid").jqxGrid({
        url: "/Title/GetTitles",
        datatype: 'json',
        mtype: 'Get',
        colNames: ['Id', 'Name', 'Description'],
        colModel: [
            { key: true, hidden: true, name: 'Id', index: 'Id', editable: false },
            { key: false, name: 'Name', index: 'Name', editable: true },
            { key: false, name: 'Description', index: 'Description', editable: true }],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        caption: 'List of Titles',
        emptyrecords: 'No records to display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
        multiselect: false
    }).navGrid('#pager', { edit: true, add: true, del: true, search: false, refresh: true },
        {
            // edit options
            zIndex: 100,
            width: 500,
            url: '/Title/Edit',
            closeOnEscape: true,
            closeAfterEdit: true,
            recreateForm: true,
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            // add options
            zIndex: 100,
            width: 500,
            url: "/Title/Create",
            closeOnEscape: true,
            closeAfterAdd: true,
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            // delete options
            zIndex: 100,
            url: "/Title/Delete",
            closeOnEscape: true,
            closeAfterDelete: true,
            recreateForm: true,
            msg: "Are you sure you want to delete?",
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        });
});

All I am trying to do right now is get it to work. I am currently experiencing exactly the same issue as before. I include the jQuery bundle and “Object reference no supported”, remove the bundle and Property “url” not found.

I am using a tiered approach. EF, Code First, Repository, Service Layer for BL and MVC UX. Is there a way I could send you my entire app? I must be doing something wrong, but can’t see it…. as far as it looks, I am simply following your Getting Started guide.

[JaiHollowayParticipant]

Note… the reference to version 1.11, nevermind that.

[Author]

Posts