jQuery UI Widgets › Forums › Getting Started › Getting started
Tagged: jqwidgets, jQWidgets NuGet, jqxgrid, NuGet, NuGet package, path, reference
This topic contains 7 replies, has 2 voices, and was last updated by JaiHolloway 9 years, 11 months ago.
-
AuthorGetting started Posts
-
Hi there
I got jqxGrid through NuGet and got it working perfectly. I then decided to look into more of your widgets. I have removed jqxGrid and added jqWidgets (NuGet) and now nothing works.
This is in my BundleConfig
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" ));in my _layout
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>@ViewBag.Title - My ASP.NET MVC Application</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script src="~/Scripts/jquery-1.9.1.min.js"></script> <script src="~/Scripts/jquery-ui-1.10.4.min.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.11.0.min.js"></script> <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" /> <link href="~/jqwidgets/styles/jqx.darkblue.css" type="text/css" rel="stylesheet"/> @Scripts.Render("~/bundles/jqwidgets") <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" /> @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>© @DateTime.Now.Year - My ASP.NET MVC Application</p> </div> </div> </footer> @*@Scripts.Render("~/bundles/jquery")*@ @RenderSection("scripts", required: false) </body> </html>and finally.. one of my lookup tables 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>the 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); } } }); });Where exactly am I going wrong here? I am added and removed the jquery bundle…. adding it returns “Object doesn’t support this property”
removing it returns “invalid property: url”..Please help.
Note… the reference to version 1.11, nevermind that.
Hello JaiHolloway,
Please make sure you have downloaded the official jQWidgets NuGet package: https://www.nuget.org/packages/jQWidgets_Framework/.
A possible reason for your issue may be a wrong path to jqx.base.css. The paths to the widget scripts and the theme file jqx.darkblue.css all start with
~/jqwidgets/, but the path to jqx.base.css is../../jqwidgets/styles/jqx.base.css. Please try changing it to~/jqwidgets/styles/jqx.base.css.Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/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>© @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.
Actual error
Unhandled exception at line 7, column 2263 in http://localhost:53734/jqwidgets/jqxcore.js
0x800a139e – JavaScript runtime error: Invalid property: url
Hi JaiHolloway,
Many of the properties you have applied to your jqxGrid, icluding url, datatype, mtype, colNames et al. are not part of jqxGrid’s API. That is why the error is thrown. We suggest you take a careful look at the jqxGrid API Documentation for a list of all available properties. The help topic Data Sources will probably be helpful to you, too.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/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
Update: I got it working.
Thank you.
-
AuthorPosts
You must be logged in to reply to this topic.