Javascript/jQuery UI Widgets
Show Demo List
Javascript/jQuery UI Widgets
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// 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 ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new ScriptBundle("~/bundles/jqwidgets").Include(
"~/Scripts/jqxcore.js",
"~/Scripts/jqxdata.js",
"~/Scripts/jqxgrid.js",
"~/Scripts/jqxgrid.selection.js",
"~/Scripts/jqxgrid.pager.js",
"~/Scripts/jqxlistbox.js",
"~/Scripts/jqxbuttons.js",
"~/Scripts/jqxscrollbar.js",
"~/Scripts/jqxdatatable.js",
"~/Scripts/jqxtreegrid.js",
"~/Scripts/jqxmenu.js",
"~/Scripts/jqxcalendar.js",
"~/Scripts/jqxgrid.sort.js",
"~/Scripts/jqxgrid.filter.js",
"~/Scripts/jqxdatetimeinput.js",
"~/Scripts/jqxdropdownlist.js",
"~/Scripts/jqxslider.js",
"~/Scripts/jqxeditor.js",
"~/Scripts/jqxinput.js",
"~/Scripts/jqxdraw.js",
"~/Scripts/jqxchart.core.js",
"~/Scripts/jqxchart.rangeselector.js",
"~/Scripts/jqxtree.js",
"~/Scripts/globalize.js",
"~/Scripts/jqxbulletchart.js",
"~/Scripts/jqxcheckbox.js",
"~/Scripts/jqxradiobutton.js",
"~/Scripts/jqxvalidator.js",
"~/Scripts/jqxpanel.js",
"~/Scripts/jqxpasswordinput.js",
"~/Scripts/jqxnumberinput.js",
"~/Scripts/jqxcombobox.js"
));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/jqx.base.css",
"~/Content/jqx.arctic.css",
"~/Content/jqx.black.css",
"~/Content/jqx.bootstrap.css",
"~/Content/jqx.classic.css",
"~/Content/jqx.darkblue.css",
"~/Content/jqx.energyblue.css",
"~/Content/jqx.fresh.css",
"~/Content/jqx.highcontrast.css",
"~/Content/jqx.metro.css",
"~/Content/jqx.metrodark.css",
"~/Content/jqx.office.css",
"~/Content/jqx.orange.css",
"~/Content/jqx.shinyblack.css",
"~/Content/jqx.summer.css",
"~/Content/jqx.web.css",
"~/Content/jqx.ui-darkness.css",
"~/Content/jqx.ui-lightness.css",
"~/Content/jqx.ui-le-frog.css",
"~/Content/jqx.ui-overcast.css",
"~/Content/jqx.ui-redmond.css",
"~/Content/jqx.ui-smoothness.css",
"~/Content/jqx.ui-start.css",
"~/Content/jqx.ui-sunny.css",
"~/Content/bootstrap.css",
"~/Content/site.css"
));
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - ASP.NET MVC Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script type="text/javascript">
window.onload = function () {
document.getElementById('bodyContainer').style.visibility = 'visible';
}
</script>
</head>
<body>
<div id='bodyContainer' style='visibility: hidden;' class="container body-content">
@RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqwidgets")
@RenderSection("scripts", required: false)
</body>
</html>
CREATE TABLE [dbo].[Employee] (
[EmployeeID] INT IDENTITY (1, 1) NOT NULL,
[ManagerID] INT NULL,
[FirstName] NVARCHAR (50) NULL,
[LastName] NVARCHAR (50) NULL,
[Title] NVARCHAR (50) NULL,
[Country] NVARCHAR (50) NULL,
[City] NVARCHAR (50) NULL,
[Address] NVARCHAR (50) NULL,
[HireDate] DATETIME NULL,
[BirthDate] DATETIME NULL,
PRIMARY KEY CLUSTERED ([EmployeeID] ASC)
);
SET IDENTITY_INSERT [dbo].[Employee] ON
INSERT INTO [dbo].[Employee] ([EmployeeID], [ManagerID], [FirstName], [LastName], [Title], [Country], [City], [Address], [HireDate], [BirthDate]) VALUES (1, 2, N'Nancy', N'Davolio', N'Sales Representative', N'USA', N'Seattle', N'507 - 20th Ave. E.Apt. 2A', N'1992-05-01 00:00:00', N'1948-12-08 00:00:00')
INSERT INTO [dbo].[Employee] ([EmployeeID], [ManagerID], [FirstName], [LastName], [Title], [Country], [City], [Address], [HireDate], [BirthDate]) VALUES (2, NULL, N'Andrew', N'Fuller', N'Vice President', N'USA', N'Tahoma', N'908 W. Capital Way', N'1992-08-14 00:00:00', N'1952-02-19 00:00:00')
INSERT INTO [dbo].[Employee] ([EmployeeID], [ManagerID], [FirstName], [LastName], [Title], [Country], [City], [Address], [HireDate], [BirthDate]) VALUES (3, 2, N'Janet', N'Leverling', N'Sales Representative', N'USA', N'Kirkland', N'722 Moss Bay Blvd.', N'1992-04-01 00:00:00', N'1963-08-30 00:00:00')
INSERT INTO [dbo].[Employee] ([EmployeeID], [ManagerID], [FirstName], [LastName], [Title], [Country], [City], [Address], [HireDate], [BirthDate]) VALUES (4, 2, N'Margaret', N'Peacock', N'Sales Representative', N'USA', N'Redmond', N'4110 Old Redmond Rd.', N'1993-05-03 00:00:00', N'1937-09-19 00:00:00')
INSERT INTO [dbo].[Employee] ([EmployeeID], [ManagerID], [FirstName], [LastName], [Title], [Country], [City], [Address], [HireDate], [BirthDate]) VALUES (5, 2, N'Steven', N'Buchanan', N'Sales Manager', N'UK', N'London', N'14 Garrett Hill', N'1993-10-17 00:00:00', N'1955-03-04 00:00:00')
INSERT INTO [dbo].[Employee] ([EmployeeID], [ManagerID], [FirstName], [LastName], [Title], [Country], [City], [Address], [HireDate], [BirthDate]) VALUES (6, 5, N'Michael', N'Suyama', N'Sales Representative', N'UK', N'London', N'Coventry House Miner Rd.', N'1993-10-17 00:00:00', N'1963-07-02 00:00:00')
INSERT INTO [dbo].[Employee] ([EmployeeID], [ManagerID], [FirstName], [LastName], [Title], [Country], [City], [Address], [HireDate], [BirthDate]) VALUES (7, 5, N'Robert', N'King', N'Sales Representative', N'UK', N'London', N'Edgeham Hollow Winchester Way', N'1994-01-02 00:00:00', N'1960-05-29 00:00:00')
INSERT INTO [dbo].[Employee] ([EmployeeID], [ManagerID], [FirstName], [LastName], [Title], [Country], [City], [Address], [HireDate], [BirthDate]) VALUES (8, 2, N'Laura', N'Callahan', N'Inside Sales Coordinator', N'USA', N'Seattle', N'4726 - 11th Ave. N.E.', N'1994-03-05 00:00:00', N'1958-01-09 00:00:00')
INSERT INTO [dbo].[Employee] ([EmployeeID], [ManagerID], [FirstName], [LastName], [Title], [Country], [City], [Address], [HireDate], [BirthDate]) VALUES (9, 5, N'Anne', N'Dodsworth', N'Sales Representative', N'UK', N'London', N'7 Houndstooth Rd.', N'1994-11-15 00:00:00', N'1966-01-27 00:00:00')
SET IDENTITY_INSERT [dbo].[Employee] OFF
public JsonResult GetEmployees()
{
var dbResult = db.Employees.ToList();
var employees = (from employee in dbResult
select new
{
employee.FirstName,
employee.LastName,
employee.EmployeeID,
employee.BirthDate,
employee.HireDate,
employee.ManagerID,
employee.Title,
employee.City,
employee.Country,
employee.Address
});
return Json(employees, JsonRequestBehavior.AllowGet);
}
@{
ViewBag.Title = "jQWidgets DataTable";
}
@section scripts {
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
dataType: "json",
dataFields: [
{ name: 'EmployeeID', type: 'number' },
{ name: 'ManagerID', type: 'number' },
{ name: 'FirstName', type: 'string' },
{ name: 'LastName', type: 'string' },
{ name: 'Country', type: 'string' },
{ name: 'City', type: 'string' },
{ name: 'Address', type: 'string' },
{ name: 'Title', type: 'string' },
{ name: 'HireDate', type: 'date' },
{ name: 'BirthDate', type: 'date' }
],
id: 'EmployeeID',
url: '/Employee/GetEmployees'
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#dataTable").jqxDataTable(
{
width: 850,
source: dataAdapter,
theme: 'arctic',
pageSize: 5,
sortable: true,
filterable: true,
pageable: true,
columns: [
{ text: 'FirstName', dataField: 'FirstName', width: 200 },
{ text: 'LastName', dataField: 'LastName', width: 200 },
{ text: 'Title', dataField: 'Title', width: 160 },
{ text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
{ text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
{ text: 'Address', dataField: 'Address', width: 250 },
{ text: 'City', dataField: 'City', width: 120 },
{ text: 'Country', dataField: 'Country' }
]
});
});
</script>
}
<div id="dataTable"></div>
jQWidgets © 2011-2025. All Rights Reserved.