Download source code

Background

I hope you have already gone though my previous article about IgniteUI grid control. You can consider that as an introduction to the control kit. Now as I mentioned, we will try to create a chart using the chart control. Is that fine?

Prerequisites

As I said in the introduction part, we are going to create an IgniteUI grid in MVC application, so you must have a visual studio installed in your machine.

Table of Contents

Download and install IgniteUI

Please see my previous post to see the steps to install the Ignite UI in your machine.

Set up database

[sql]
USE [master]
GO

/****** Object: Database [TrialsDB] Script Date: 07/14/2016 10:56:41 AM ******/
CREATE DATABASE [TrialsDB]
CONTAINMENT = NONE
ON PRIMARY
( NAME = N’TrialsDB’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB.mdf’ , SIZE = 3072KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
LOG ON
( NAME = N’TrialsDB_log’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB_log.ldf’ , SIZE = 1024KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO

ALTER DATABASE [TrialsDB] SET COMPATIBILITY_LEVEL = 110
GO

IF (1 = FULLTEXTSERVICEPROPERTY(‘IsFullTextInstalled’))
begin
EXEC [TrialsDB].[dbo].[sp_fulltext_database] @action = ‘enable’
end
GO

ALTER DATABASE [TrialsDB] SET ANSI_NULL_DEFAULT OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_NULLS OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_PADDING OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_WARNINGS OFF
GO

ALTER DATABASE [TrialsDB] SET ARITHABORT OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_CLOSE OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_CREATE_STATISTICS ON
GO

ALTER DATABASE [TrialsDB] SET AUTO_SHRINK OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_UPDATE_STATISTICS ON
GO

ALTER DATABASE [TrialsDB] SET CURSOR_CLOSE_ON_COMMIT OFF
GO

ALTER DATABASE [TrialsDB] SET CURSOR_DEFAULT GLOBAL
GO

ALTER DATABASE [TrialsDB] SET CONCAT_NULL_YIELDS_NULL OFF
GO

ALTER DATABASE [TrialsDB] SET NUMERIC_ROUNDABORT OFF
GO

ALTER DATABASE [TrialsDB] SET QUOTED_IDENTIFIER OFF
GO

ALTER DATABASE [TrialsDB] SET RECURSIVE_TRIGGERS OFF
GO

ALTER DATABASE [TrialsDB] SET DISABLE_BROKER
GO

ALTER DATABASE [TrialsDB] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO

ALTER DATABASE [TrialsDB] SET DATE_CORRELATION_OPTIMIZATION OFF
GO

ALTER DATABASE [TrialsDB] SET TRUSTWORTHY OFF
GO

ALTER DATABASE [TrialsDB] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO

ALTER DATABASE [TrialsDB] SET PARAMETERIZATION SIMPLE
GO

ALTER DATABASE [TrialsDB] SET READ_COMMITTED_SNAPSHOT OFF
GO

ALTER DATABASE [TrialsDB] SET HONOR_BROKER_PRIORITY OFF
GO

ALTER DATABASE [TrialsDB] SET RECOVERY FULL
GO

ALTER DATABASE [TrialsDB] SET MULTI_USER
GO

ALTER DATABASE [TrialsDB] SET PAGE_VERIFY CHECKSUM
GO

ALTER DATABASE [TrialsDB] SET DB_CHAINING OFF
GO

ALTER DATABASE [TrialsDB] SET FILESTREAM( NON_TRANSACTED_ACCESS = OFF )
GO

ALTER DATABASE [TrialsDB] SET TARGET_RECOVERY_TIME = 0 SECONDS
GO

ALTER DATABASE [TrialsDB] SET READ_WRITE
GO
[/sql]

Create table with data

[sql]
USE [TrialsDB]
GO
/****** Object: Table [dbo].[Product] Script Date: 5/12/2016 10:54:48 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Product](
[ProductID] [int] NOT NULL,
[Name] [nvarchar](max) NOT NULL,
[ProductNumber] [nvarchar](25) NOT NULL,
[MakeFlag] [bit] NOT NULL,
[FinishedGoodsFlag] [bit] NOT NULL,
[Color] [nvarchar](15) NULL,
[SafetyStockLevel] [smallint] NOT NULL,
[ReorderPoint] [smallint] NOT NULL,
[StandardCost] [money] NOT NULL,
[ListPrice] [money] NOT NULL,
[Size] [nvarchar](5) NULL,
[SizeUnitMeasureCode] [nchar](3) NULL,
[WeightUnitMeasureCode] [nchar](3) NULL,
[Weight] [decimal](8, 2) NULL,
[DaysToManufacture] [int] NOT NULL,
[ProductLine] [nchar](2) NULL,
[Class] [nchar](2) NULL,
[Style] [nchar](2) NULL,
[ProductSubcategoryID] [int] NULL,
[ProductModelID] [int] NULL,
[SellStartDate] [datetime] NOT NULL,
[SellEndDate] [datetime] NULL,
[DiscontinuedDate] [datetime] NULL,
[rowguid] [uniqueidentifier] ROWGUIDCOL NOT NULL,
[ModifiedDate] [datetime] NOT NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (1, N’Adjustable Race’, N’AR-5381′, 0, 0, NULL, 1000, 750, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’694215b7-08f7-4c0d-acb1-d734ba44c0c8′, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (2, N’Bearing Ball’, N’BA-8327′, 0, 0, NULL, 1000, 750, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’58ae3c20-4f3a-4749-a7d4-d568806cc537′, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (3, N’BB Ball Bearing’, N’BE-2349′, 1, 0, NULL, 800, 600, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 1, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’9c21aed2-5bfa-4f18-bcb8-f11638dc2e4e’, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (4, N’Headset Ball Bearings’, N’BE-2908′, 0, 0, NULL, 800, 600, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’ecfed6cb-51ff-49b5-b06c-7d8ac834db8b’, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (316, N’Blade’, N’BL-2036′, 1, 0, NULL, 800, 600, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 1, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’e73e9750-603b-4131-89f5-3dd15ed5ff80′, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (317, N’LL Crankarm’, N’CA-5965′, 0, 0, N’Black’, 500, 375, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, N’L ‘, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’3c9d10b7-a6b2-4774-9963-c19dcee72fea’, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (318, N’ML Crankarm’, N’CA-6738′, 0, 0, N’Black’, 500, 375, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, N’M ‘, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’eabb9a92-fa07-4eab-8955-f0517b4a4ca7’, CAST(0x00009A5C00A53CF8 AS DateTime))
[/sql]

Creating models and entity

If you don’t know how to create an entity in your solution, please read that here. I have mentioned the steps to be followed in that article. Once you have created the entity, you are good to go.

Here I am assuming that you have created an entity and got a model class as preceding.

[csharp]
//——————————————————————————
// <auto-generated>
// This code was generated from a template.
//
// Manual changes to this file may cause unexpected behavior in your application.
// Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//——————————————————————————

namespace IgniteUI.Models
{
using System;
using System.Collections.Generic;

public partial class Product
{
public int ProductID { get; set; }
public string Name { get; set; }
public string ProductNumber { get; set; }
public bool MakeFlag { get; set; }
public bool FinishedGoodsFlag { get; set; }
public string Color { get; set; }
public short SafetyStockLevel { get; set; }
public short ReorderPoint { get; set; }
public decimal StandardCost { get; set; }
public decimal ListPrice { get; set; }
public string Size { get; set; }
public string SizeUnitMeasureCode { get; set; }
public string WeightUnitMeasureCode { get; set; }
public Nullable<decimal> Weight { get; set; }
public int DaysToManufacture { get; set; }
public string ProductLine { get; set; }
public string Class { get; set; }
public string Style { get; set; }
public Nullable<int> ProductSubcategoryID { get; set; }
public Nullable<int> ProductModelID { get; set; }
public System.DateTime SellStartDate { get; set; }
public Nullable<System.DateTime> SellEndDate { get; set; }
public Nullable<System.DateTime> DiscontinuedDate { get; set; }
public System.Guid rowguid { get; set; }
public System.DateTime ModifiedDate { get; set; }
}
}
[/csharp]

Configure MVC application

As you have finished your installing, we can create a MVC application now. Open your Visual Studio and click on new project. Name your project, here I am going to name my project as IgniteUIGrid. Select MVC template and click OK.

Click on the reference and add DLL reference of IgiteUI from C:\Program Files (x86)\Infragistics\2016.1\Ignite UI\MVC\MVC6\Bin\dnx451 or from which ever the folder you installed IgniteUI.

Create controller and actions

Now create a controller as follows.

[csharp]
using System.Web.Mvc;

namespace IgniteUI.Controllers
{
public class ChartController : Controller
{
private IgniteUI.Models.TrialsDBEntities db = new IgniteUI.Models.TrialsDBEntities();

public ActionResult Index()
{
return View();
}
}
}
[/csharp]

Now we will create a JsonResult action for fetching the products from database.

[csharp]
[HttpGet]
public JsonResult Getproducts()
{
var model = db.Products.AsQueryable().GroupBy(g => g.Name, g => g.ReorderPoint, (key, g) => new
{
Name = key,
ReorderPoint = g.Take(1)
}).Take(10);
return Json(model, JsonRequestBehavior.AllowGet);
}
[/csharp]

Here I am just grouping the items together and taking the first value for Y axis. And as you know we will we setting ‘Name’ as X axis value in chart.

Now shall we create a view?

Create view

[html]
@using Infragistics.Web.Mvc;
@using IgniteUI.Models;
@model IQueryable<IgniteUI.Models.Product>
[/html]

Creating IgniteUI Chart

So our view is ready, now we will create an element where we can render our chart.

[html]
<div style="width: 100%;">
<div id="chart"></div>
</div>
[/html]

What is next? Yes you are right. We need an ajax call.

[js]
<script>
$(function () {
$.ajax({
type: ‘GET’,
url: ‘http://localhost:39044/chart/Getproducts’,
beforeSend: function () {
},
success: function (data) {
GenerateChart(data);
},
error: function (e) {
console.log(‘Error occured: ‘ + e.message);
}
});
});
</script>
[/js]

Here GenerateChart is where we actually build our chart.

[js]
function GenerateChart(chartData) {
$("#chart").igDataChart({
width: "100%",
height: "500px",
title: "Product vs Reorder Point",
subtitle: "Final products and reorder Point",
dataSource: chartData,
axes: [
{
name: "NameAxis",
type: "categoryX",
title: "Product Name",
label: "Name"
},
{
name: "YAxisReorderPoint",
type: "numericY",
minimumValue: 0,
title: "Reorder Point",
}
],
series: [
{
name: "NameReorderPoint",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "NameAxis",
yAxis: "YAxisReorderPoint",
valueMemberPath: "ReorderPoint"
}
]
});
}
[/js]

Go to your shared view folder, open _Layout.cshtml and add the following references to the view.

[html]
<!– Ignite UI Required Combined CSS Files –>
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<!–CSS file specific for chart styling –>
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<!– Ignite UI Required Combined JavaScript Files –>
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.dv.js"></script>
[/html]

Now please run your application and go to the http://localhost:39044/Chart, there you can see a chart with the data you have given.

Ignite_UI_Chart_Control

Sounds good? I hope you have got some knowledge about the Ignite UI chart control. That’s all for today. See you soon with other Ignite UI controls.

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Download source code

Background

As I am an MVP in C # Corner, I have got a chance to be a part of C# corner annual conference 2016, there we had been offered ultimate license of the IgniteUI product. I would like to thank Mr.Jason Beres and Mr.Dhananjay Kumar for this.

Now let us come to the point, if you don’t have any license with, no worries you can always give an evaluation try. If you wish to do so, please download the toolkit from here.

Prerequisites

As I said in the introduction part, we are going to create an IgniteUI grid in MVC application, so you must have a visual studio installed in your machine.

Table of Contents

Download and install IgniteUI

Once you download the needed files from the download link provided above, you are good to go and install it in your machine. Extract the downloaded file. Now double click on the exe file named Infragistics_20161_Platform. Please apply your license key if you have such a one, or you can use it as a trial. I am going to apply the license key I got.

Apply License Key

Select the components you need.

Platform Installer

Now the installing will get started.

Installing IgniteUI

Once the installing is finished, you will see a pop up as preceding. And you will be given a chance to register your product there and be a part of the forum and community.

Install Finished

Configure MVC application

As you have finished your installing, we can create a MVC application now. Open your Visual Studio and click on new project. Name your project, here I am going to name my project as IgniteUIGrid. Select MVC template and click OK.

Click on the reference and add DLL reference of IgiteUI from C:\Program Files (x86)\Infragistics\2016.1\Ignite UI\MVC\MVC6\Bin\dnx451 or from which ever the folder you installed IgniteUI.

Add IgniteUI Reference

So we have set our application ready for action.

Set up database

[sql]
USE [master]
GO

/****** Object: Database [TrialsDB] Script Date: 5/12/2016 10:56:41 AM ******/
CREATE DATABASE [TrialsDB]
CONTAINMENT = NONE
ON PRIMARY
( NAME = N’TrialsDB’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB.mdf’ , SIZE = 3072KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
LOG ON
( NAME = N’TrialsDB_log’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB_log.ldf’ , SIZE = 1024KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO

ALTER DATABASE [TrialsDB] SET COMPATIBILITY_LEVEL = 110
GO

IF (1 = FULLTEXTSERVICEPROPERTY(‘IsFullTextInstalled’))
begin
EXEC [TrialsDB].[dbo].[sp_fulltext_database] @action = ‘enable’
end
GO

ALTER DATABASE [TrialsDB] SET ANSI_NULL_DEFAULT OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_NULLS OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_PADDING OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_WARNINGS OFF
GO

ALTER DATABASE [TrialsDB] SET ARITHABORT OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_CLOSE OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_CREATE_STATISTICS ON
GO

ALTER DATABASE [TrialsDB] SET AUTO_SHRINK OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_UPDATE_STATISTICS ON
GO

ALTER DATABASE [TrialsDB] SET CURSOR_CLOSE_ON_COMMIT OFF
GO

ALTER DATABASE [TrialsDB] SET CURSOR_DEFAULT GLOBAL
GO

ALTER DATABASE [TrialsDB] SET CONCAT_NULL_YIELDS_NULL OFF
GO

ALTER DATABASE [TrialsDB] SET NUMERIC_ROUNDABORT OFF
GO

ALTER DATABASE [TrialsDB] SET QUOTED_IDENTIFIER OFF
GO

ALTER DATABASE [TrialsDB] SET RECURSIVE_TRIGGERS OFF
GO

ALTER DATABASE [TrialsDB] SET DISABLE_BROKER
GO

ALTER DATABASE [TrialsDB] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO

ALTER DATABASE [TrialsDB] SET DATE_CORRELATION_OPTIMIZATION OFF
GO

ALTER DATABASE [TrialsDB] SET TRUSTWORTHY OFF
GO

ALTER DATABASE [TrialsDB] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO

ALTER DATABASE [TrialsDB] SET PARAMETERIZATION SIMPLE
GO

ALTER DATABASE [TrialsDB] SET READ_COMMITTED_SNAPSHOT OFF
GO

ALTER DATABASE [TrialsDB] SET HONOR_BROKER_PRIORITY OFF
GO

ALTER DATABASE [TrialsDB] SET RECOVERY FULL
GO

ALTER DATABASE [TrialsDB] SET MULTI_USER
GO

ALTER DATABASE [TrialsDB] SET PAGE_VERIFY CHECKSUM
GO

ALTER DATABASE [TrialsDB] SET DB_CHAINING OFF
GO

ALTER DATABASE [TrialsDB] SET FILESTREAM( NON_TRANSACTED_ACCESS = OFF )
GO

ALTER DATABASE [TrialsDB] SET TARGET_RECOVERY_TIME = 0 SECONDS
GO

ALTER DATABASE [TrialsDB] SET READ_WRITE
GO
[/sql]

Create table with data

[sql]
USE [TrialsDB]
GO
/****** Object: Table [dbo].[Product] Script Date: 5/12/2016 10:54:48 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Product](
[ProductID] [int] NOT NULL,
[Name] [nvarchar](max) NOT NULL,
[ProductNumber] [nvarchar](25) NOT NULL,
[MakeFlag] [bit] NOT NULL,
[FinishedGoodsFlag] [bit] NOT NULL,
[Color] [nvarchar](15) NULL,
[SafetyStockLevel] [smallint] NOT NULL,
[ReorderPoint] [smallint] NOT NULL,
[StandardCost] [money] NOT NULL,
[ListPrice] [money] NOT NULL,
[Size] [nvarchar](5) NULL,
[SizeUnitMeasureCode] [nchar](3) NULL,
[WeightUnitMeasureCode] [nchar](3) NULL,
[Weight] [decimal](8, 2) NULL,
[DaysToManufacture] [int] NOT NULL,
[ProductLine] [nchar](2) NULL,
[Class] [nchar](2) NULL,
[Style] [nchar](2) NULL,
[ProductSubcategoryID] [int] NULL,
[ProductModelID] [int] NULL,
[SellStartDate] [datetime] NOT NULL,
[SellEndDate] [datetime] NULL,
[DiscontinuedDate] [datetime] NULL,
[rowguid] [uniqueidentifier] ROWGUIDCOL NOT NULL,
[ModifiedDate] [datetime] NOT NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (1, N’Adjustable Race’, N’AR-5381′, 0, 0, NULL, 1000, 750, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’694215b7-08f7-4c0d-acb1-d734ba44c0c8′, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (2, N’Bearing Ball’, N’BA-8327′, 0, 0, NULL, 1000, 750, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’58ae3c20-4f3a-4749-a7d4-d568806cc537′, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (3, N’BB Ball Bearing’, N’BE-2349′, 1, 0, NULL, 800, 600, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 1, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’9c21aed2-5bfa-4f18-bcb8-f11638dc2e4e’, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (4, N’Headset Ball Bearings’, N’BE-2908′, 0, 0, NULL, 800, 600, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’ecfed6cb-51ff-49b5-b06c-7d8ac834db8b’, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (316, N’Blade’, N’BL-2036′, 1, 0, NULL, 800, 600, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 1, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’e73e9750-603b-4131-89f5-3dd15ed5ff80′, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (317, N’LL Crankarm’, N’CA-5965′, 0, 0, N’Black’, 500, 375, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, N’L ‘, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’3c9d10b7-a6b2-4774-9963-c19dcee72fea’, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (318, N’ML Crankarm’, N’CA-6738′, 0, 0, N’Black’, 500, 375, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, N’M ‘, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’eabb9a92-fa07-4eab-8955-f0517b4a4ca7’, CAST(0x00009A5C00A53CF8 AS DateTime))
[/sql]

Creating models and entity

If you don’t know how to create an entity in your solution, please read that here. I have mentioned the steps to be followed in that article. Once you have created the entity, you are good to go.

Here I am assuming that you have created an entity and got a model class as preceding.

[csharp]
//——————————————————————————
// <auto-generated>
// This code was generated from a template.
//
// Manual changes to this file may cause unexpected behavior in your application.
// Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//——————————————————————————

namespace IgniteUIGrid.Models
{
using System;
using System.Collections.Generic;

public partial class Product
{
public int ProductID { get; set; }
public string Name { get; set; }
public string ProductNumber { get; set; }
public bool MakeFlag { get; set; }
public bool FinishedGoodsFlag { get; set; }
public string Color { get; set; }
public short SafetyStockLevel { get; set; }
public short ReorderPoint { get; set; }
public decimal StandardCost { get; set; }
public decimal ListPrice { get; set; }
public string Size { get; set; }
public string SizeUnitMeasureCode { get; set; }
public string WeightUnitMeasureCode { get; set; }
public Nullable<decimal> Weight { get; set; }
public int DaysToManufacture { get; set; }
public string ProductLine { get; set; }
public string Class { get; set; }
public string Style { get; set; }
public Nullable<int> ProductSubcategoryID { get; set; }
public Nullable<int> ProductModelID { get; set; }
public System.DateTime SellStartDate { get; set; }
public Nullable<System.DateTime> SellEndDate { get; set; }
public Nullable<System.DateTime> DiscontinuedDate { get; set; }
public System.Guid rowguid { get; set; }
public System.DateTime ModifiedDate { get; set; }
}
}
[/csharp]

Creating IgniteUI Grid

Now we are going to create a controller and view to show the grid. Click on the controller-> Add-> Controller. That will show you a pop up as preceding.

Ignite UI Controlelr With View

Have you noticed that there are two new items, Ignite UI controller with view and Ignite UI view. Click on the first option. This will generate a controller and a view according to your model selection. Lets do that.

In the next pop up you can see the options to set your view and also your IgniteUI control.

Configure view and controller

In the next tab, you can configure your widget according to your need. Now please select the features you would like to have in your grid. As of now I am going to select Filtering, Sorting, paging.

Configure IgniteUI widget

This will generate a controller named Scaffold and a view accordingly, Let us rename it to MyGrid. So your MyGridController.cs file will be looking as preceding.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Data.Entity;
using System.Web;
using System.Web.Mvc;

using Infragistics.Web.Mvc;

namespace IgniteUIGrid.Controllers
{
public class MyGridController : Controller
{
private IgniteUIGrid.Models.TrialsDBEntities db = new IgniteUIGrid.Models.TrialsDBEntities();

public ActionResult View()
{
var model = db.Products.AsQueryable();
return View(model);
}
}
}
[/csharp]

Now what about the view? Yes it is also being generated for you. Cool right? Below is the view generated.

[csharp]
@using Infragistics.Web.Mvc;
@model IQueryable<IgniteUIGrid.Models.Product>

@(Html.Infragistics()
.Grid(Model)
.ID("igGrid")
.Width("100%")
.AutoGenerateColumns(false)
.Columns(column =>
{
})
.Features(f =>
{
f.Filtering()
.Mode(FilterMode.Simple);
f.Paging()
.PageSize(5);
f.Resizing();
f.Sorting()
.Mode(SortingMode.Single);
})
.DataBind()
.Render())
[/csharp]

By default grid width is set to 600px, here I have changed it to 100%.

Once you have set everything, go to your shared view folder, open _Layout.cshtml and add the following references to the view.

[html]
<!– Ignite UI Required Combined CSS Files –>
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css" rel="stylesheet" />

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<!– Ignite UI Required Combined JavaScript Files –>
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.lob.js"></script>
[/html]

Now run your application, you can see a grid is populated as preceding.

Yes, you are right. It looks clumsy, we will solve this by selecting only the needed columns. For that you need to change the grid settings as follows.

[csharp]
@(Html.Infragistics()
.Grid(Model)
.ID("igGrid")
.Width("100%")
.AutoGenerateColumns(false)
.Columns(column =>
{
column.For(x => x.ProductID).HeaderText("Product ID").Width("30%");
column.For(x => x.Name).HeaderText("Name").Width("30%");
column.For(x => x.ProductNumber).HeaderText("Number").Width("20%");
column.For(x => x.SellEndDate).HeaderText("Sell End Date").Width("20%");
column.For(x => x.SellStartDate).HeaderText("Sell Start Date").Width("30%");
column.For(x => x.Size).HeaderText("Size").Width("30%");
})
.Features(f =>
{
f.Filtering()
.Mode(FilterMode.Simple);
f.Paging()
.PageSize(5);
f.Resizing();
f.Sorting()
.Mode(SortingMode.Single);
})
.DataBind()
.Render())
[/csharp]

Run your application and see the result.

Ignite UI Grid With Only Selected Columns

Now let us add few more columns, set the grid width, fix one column as stable (Should not move while scrolling), and set primary key. To add these features, you must change your settings as follows.

[csharp]
@(Html.Infragistics()
.Grid(Model)
.ID("igGrid")
.Width("100%")
.Height("500px")
.PrimaryKey("ProductID")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.Columns(column =>
{
column.For(x => x.ProductID).HeaderText("Product ID").Width("30%");
column.For(x => x.Name).HeaderText("Name").Width("30%");
column.For(x => x.ProductNumber).HeaderText("Number").Width("20%");
column.For(x => x.SellEndDate).HeaderText("Sell End Date").Width("20%");
column.For(x => x.SellStartDate).HeaderText("Sell Start Date").Width("30%");
column.For(x => x.Size).HeaderText("Size").Width("30%");
})
.Features(f =>
{
f.Filtering()
.Mode(FilterMode.Simple);
f.Paging()
.PageSize(5);
f.Sorting()
.Mode(SortingMode.Single);
f.ColumnFixing().FixingDirection(ColumnFixingDirection.Left);
f.ColumnFixing();
})
.DataBind()
.Render())
[/csharp]

Now if you run your grid, you may get an error as infragistics.lob.js:160 Uncaught Error: Column Fixing requires a different column width setting. The width of column with key ProductID should be set in pixels.. This is why because of we have set the column width of our keys in percentage. Let us change it to pixel and try again.

[csharp]
.Columns(column =>
{
column.For(x => x.ProductID).HeaderText("Product ID").Width("130px");
column.For(x => x.Name).HeaderText("Name").Width("250px");
column.For(x => x.ProductNumber).HeaderText("Number").Width("150px");
column.For(x => x.SellEndDate).HeaderText("Sell End Date").Width("270px");
column.For(x => x.SellStartDate).HeaderText("Sell Start Date").Width("270px");
column.For(x => x.Size).HeaderText("Size").Width("130px");
column.For(x => x.ListPrice).HeaderText("List Price").Width("150px");
})
[/csharp]

Run your grid. You can see the option to fix the columns.

Fix_column_in_Ignite_UI_Grid

So once you fix the column and try to scroll, the column you fixed will not move. You can set the same for other columns too.

After_fixed_columns_in_Ignite_UI_Grid

I hope you have got some knowledge about the Ignite UI grid control. That’s all for today. See you soon with other Ignite UI controls.

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Download Source Code

You can always download the source code from here: Radio button selection in JQXGrid

Background

I am using JQXGrid in one of my project, where I wanted to implement the radio button selection, when I talked with JQXGrid development team, I was said that the functionality is not yet available. But they have given an option as selectionmode: ‘checkbox’ with the help of that property we can implement the requirement. As you know, to load a jQWidget JQX Grid, there you need the following things as mandatory.

Using the code

First of all, load the needed references. You can download the needed files from here.

[html]
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script src="jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
[/html]

Now, we are going to set our data source, this time we will use a XML file as data source.

[xml]
<?xml version="1.0" encoding="iso-8859-1" standalone="yes"?>
<feed xml:base="http://services.odata.org/Northwind/Northwind.svc/" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom">
<title type="text">Orders</title>
<id>http://services.odata.org/Northwind/Northwind.svc/Orders</id>
<updated>2011-12-01T11:55:06Z</updated>
<link rel="self" title="Orders" href="Orders" />
<entry>
<id>http://services.odata.org/Northwind/Northwind.svc/Orders(10248)</id>
<title type="text"></title>
<updated>2011-12-01T11:55:06Z</updated>
<author>
<name />
</author>
<link rel="edit" title="Order" href="Orders(10248)" />
<link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Customer" type="application/atom+xml;type=entry" title="Customer" href="Orders(10248)/Customer" />
<link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Employee" type="application/atom+xml;type=entry" title="Employee" href="Orders(10248)/Employee" />
<link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Order_Details" type="application/atom+xml;type=feed" title="Order_Details" href="Orders(10248)/Order_Details" />
<link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Shipper" type="application/atom+xml;type=entry" title="Shipper" href="Orders(10248)/Shipper" />
<category term="NorthwindModel.Order" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
<content type="application/xml">
<m:properties>
<d:OrderID m:type="Edm.Int32">10248</d:OrderID>
<d:CustomerID>VINET</d:CustomerID>
<d:EmployeeID m:type="Edm.Int32">5</d:EmployeeID>
<d:OrderDate m:type="Edm.DateTime">1996-07-04T00:00:00</d:OrderDate>
<d:RequiredDate m:type="Edm.DateTime">1996-08-01T00:00:00</d:RequiredDate>
<d:ShippedDate m:type="Edm.DateTime">1996-07-16T00:00:00</d:ShippedDate>
<d:ShipVia m:type="Edm.Int32">3</d:ShipVia>
<d:Freight m:type="Edm.Decimal">32.3800</d:Freight>
<d:ShipName>Vins et alcools Chevalier</d:ShipName>
<d:ShipAddress>59 rue de l’Abbaye</d:ShipAddress>
<d:ShipCity>Reims</d:ShipCity>
<d:ShipRegion m:null="true" />
<d:ShipPostalCode>51100</d:ShipPostalCode>
<d:ShipCountry>France</d:ShipCountry>
</m:properties>
</content>
</entry>
<entry>
<id>http://services.odata.org/Northwind/Northwind.svc/Orders(10249)</id>
<title type="text"></title>
<updated>2011-12-01T11:55:06Z</updated>
<author>
<name />
</author>
<link rel="edit" title="Order" href="Orders(10249)" />
<link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Customer" type="application/atom+xml;type=entry" title="Customer" href="Orders(10249)/Customer" />
<link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Employee" type="application/atom+xml;type=entry" title="Employee" href="Orders(10249)/Employee" />
<link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Order_Details" type="application/atom+xml;type=feed" title="Order_Details" href="Orders(10249)/Order_Details" />
<link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Shipper" type="application/atom+xml;type=entry" title="Shipper" href="Orders(10249)/Shipper" />
<category term="NorthwindModel.Order" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
<content type="application/xml">
<m:properties>
<d:OrderID m:type="Edm.Int32">10249</d:OrderID>
<d:CustomerID>TOMSP</d:CustomerID>
<d:EmployeeID m:type="Edm.Int32">6</d:EmployeeID>
<d:OrderDate m:type="Edm.DateTime">1996-07-05T00:00:00</d:OrderDate>
<d:RequiredDate m:type="Edm.DateTime">1996-08-16T00:00:00</d:RequiredDate>
<d:ShippedDate m:type="Edm.DateTime">1996-07-10T00:00:00</d:ShippedDate>
<d:ShipVia m:type="Edm.Int32">1</d:ShipVia>
<d:Freight m:type="Edm.Decimal">11.6100</d:Freight>
<d:ShipName>Toms Spezialitäten</d:ShipName>
<d:ShipAddress>Luisenstr. 48</d:ShipAddress>
<d:ShipCity>Münster</d:ShipCity>
<d:ShipRegion m:null="true" />
<d:ShipPostalCode>44087</d:ShipPostalCode>
<d:ShipCountry>Germany</d:ShipCountry>
</m:properties>
</content>
</entry>
<link rel="next" href="http://services.odata.org/Northwind/Northwind.svc/Orders?$skiptoken=10447" />
</feed>
[/xml]

You can get the full data from the file orders.xml from the solution attached.

Now create a div element where we can bind the grid.

[html]
<div id=’jqxWidget’ style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid">
</div>
</div>
[/html]

Now we will define our grid as follows.

[js]
$("#jqxgrid").jqxGrid(
{
width: 850,
height: 450,
source: dataAdapter,
sortable: true,
selectionmode: ‘checkbox’,
altrows: true,
ready: function () {
$(‘#columntablejqxgrid .jqx-checkbox-default’).hide();
},
columns: [
{ text: ‘Ship Name’, datafield: ‘ShipName’, width: 250 },
{ text: ‘Shipped Date’, datafield: ‘ShippedDate’, width: 100, cellsformat: ‘yyyy-MM-dd’ },
{ text: ‘Freight’, datafield: ‘Freight’, width: 150, cellsformat: ‘F2’, cellsalign: ‘right’ },
{ text: ‘Ship City’, datafield: ‘ShipCity’, width: 150 },
{ text: ‘Ship Country’, datafield: ‘ShipCountry’ }
]
});
[/js]

As you can see we have applied dataAdapter as the source, below is the definition for your data adapter.

[js]
var dataAdapter = new $.jqx.dataAdapter(source);
[/js]

Now we will create the source object as follows.

[js]
var source =
{
datatype: "xml",
datafields: [
{ name: ‘ShippedDate’, map: ‘m\\:properties>d\\:ShippedDate’, type: ‘date’ },
{ name: ‘Freight’, map: ‘m\\:properties>d\\:Freight’, type: ‘float’ },
{ name: ‘ShipName’, map: ‘m\\:properties>d\\:ShipName’, type: ‘string’ },
{ name: ‘ShipAddress’, map: ‘m\\:properties>d\\:ShipAddress’, type: ‘string’ },
{ name: ‘ShipCity’, map: ‘m\\:properties>d\\:ShipCity’, type: ‘string’ },
{ name: ‘ShipCountry’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ }
],
root: "entry",
record: "content",
id: ‘m\\:properties>d\\:OrderID’,
url: url
};
[/js]

As the grid definition is over,it is time to run our application and check whether the grid is loading fine or not.

Grid with check box selection

what do you see? You are able to do multiple selection right? But what do we needed? A radio button selection, isn’t it? So we are suppose to able to select only one row right?. This is why, we haven’t done the needed implementation yet. Let us add some script then.

[js]
$(‘#jqxgrid’).on(‘rowselect’, function (event) {
// event arguments.
var args = event.args;
// row’s bound index.
var rowBoundIndex = args.rowindex;
var selectedIndexes = $(‘#jqxgrid’).jqxGrid(‘selectedrowindexes’);
for (var i = 0; i < selectedIndexes.length; i++) {
if (rowBoundIndex !== selectedIndexes[i]) {
$(‘#jqxgrid’).jqxGrid(‘unselectrow’, selectedIndexes[i]);
}
}
});
[/js]

We are just deleting the other row selection in the event rowselect. Now run your application again, I am sure you will be able to select only one row at a time.

Grid with radio button selection

Now we can see the complete code.

Complete code

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />

<script src="jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var url = "orders.xml";

// prepare the data
var source =
{
datatype: "xml",
datafields: [
{ name: ‘ShippedDate’, map: ‘m\\:properties>d\\:ShippedDate’, type: ‘date’ },
{ name: ‘Freight’, map: ‘m\\:properties>d\\:Freight’, type: ‘float’ },
{ name: ‘ShipName’, map: ‘m\\:properties>d\\:ShipName’, type: ‘string’ },
{ name: ‘ShipAddress’, map: ‘m\\:properties>d\\:ShipAddress’, type: ‘string’ },
{ name: ‘ShipCity’, map: ‘m\\:properties>d\\:ShipCity’, type: ‘string’ },
{ name: ‘ShipCountry’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ }
],
root: "entry",
record: "content",
id: ‘m\\:properties>d\\:OrderID’,
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);

// create jqxgrid.
$("#jqxgrid").jqxGrid(
{
width: 850,
height: 450,
source: dataAdapter,
sortable: true,
selectionmode: ‘checkbox’,
altrows: true,
ready: function () {
$(‘#columntablejqxgrid .jqx-checkbox-default’).hide();
},
columns: [
{ text: ‘Ship Name’, datafield: ‘ShipName’, width: 250 },
{ text: ‘Shipped Date’, datafield: ‘ShippedDate’, width: 100, cellsformat: ‘yyyy-MM-dd’ },
{ text: ‘Freight’, datafield: ‘Freight’, width: 150, cellsformat: ‘F2’, cellsalign: ‘right’ },
{ text: ‘Ship City’, datafield: ‘ShipCity’, width: 150 },
{ text: ‘Ship Country’, datafield: ‘ShipCountry’ }
]
});

$(‘#jqxgrid’).on(‘rowselect’, function (event) {
// event arguments.
var args = event.args;
// row’s bound index.
var rowBoundIndex = args.rowindex;
var selectedIndexes = $(‘#jqxgrid’).jqxGrid(‘selectedrowindexes’);
for (var i = 0; i < selectedIndexes.length; i++) {
if (rowBoundIndex !== selectedIndexes[i]) {
$(‘#jqxgrid’).jqxGrid(‘unselectrow’, selectedIndexes[i]);
}
}
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’ style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid">
</div>
</div>
</body>
</html>
[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Demo

Please see the demo here.

Background

For the past few months, I am working with a project where I use HighChart to manipulate the data and shows as Charts. Now the problem is, while exporting the data, the entire data was going to the HighChart server that is http://export.highcharts.com/. I wanted to get rid of this. So I used the option client side exporting by adding one extra JavaScript file https://code.highcharts.com/modules/offline-exporting.js.

Using the code

First we will populate the chart. For that you must add the needed references as follows.

[html]
<script src="https://code.jquery.com/jquery-2.2.4.min.js""></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
[/html]

Now add the chart configuration as follows

[js]
$(function () {
$(‘#myChart’).highcharts({
credits: {
enabled: false
},
exporting: {
chartOptions: {
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
scale: 3
},
title: {
text: ‘My blog vistor count for a week’
},
subtitle: {
text: ‘Monday to Sunday’
},
chart: {
type: ‘area’
},
xAxis: {
categories: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’,
‘Sun’]
},
series: [{
name:’Visitor Count’,
data: [1005, 558, 1467, 707, 1289, 867, 543]
}]
});
});
[/js]

Now if you run your application, you can see a chart as follows.

High Chart

Now it is time to check the exporting. If you click on export icon on the right top corner, you will given options to choose like on which format you need to export the data. Just click on anything you wish. You can see that the data is being send to the server http://export.highcharts.com/ in the top left side. To overcome this, you need to add a reference of the file called offline-exporting.js.

[html]
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
[/html]

That’s all. You are done.

Please be noted this feature is not supported in browser IE 8, So if you load this chart in any unsupported browser, the module will fall back to the export server. This can be handled with the option fallbackToExportServer: false. You need to set this option in your exporting settings as follows.

[js]
exporting: {
chartOptions: {
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
scale: 3,
fallbackToExportServer: false
}
[/js]

In Internet Explorer, it requires canvg library to export the chart to PNG format. But you don’t need to worry about this file. This will be automatically downloaded on demand by the system.

Reference

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Background

If you are aware of the header column names and the data (Static data), you can apply the colour coding in a simple way as shown in this link. There we are using a property called cellclassname to fire an external function which returns the coloured HTML in return.

But in my case, the situation was different. The data source (HTML table here) was dynamic, hence I could not predict the header names and the data. As you know, to load a jQWidget JQX Grid, there you need the following things as mandatory.

So to create/format the above mentioned properties, I am using an another way which we will discuss in this post.

Using the code

First of all, load the needed references. You can download the needed files from here.

[html]
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
<link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
[/html]

Now, we will create the HTML data. To make the processes easy, here I am going to paste a static HTML table(This table was dynamic for me).

[html]
<table id="initialTable" style="width: 300px;display:none;">
<thead>
<tr>
<th>Firstname
</th>
<th>Lastname
</th>
<th>Debits
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eve
</td>
<td>Jackson
</td>
<td>94
</td>
</tr>
<tr>
<td>Clara
</td>
<td>Oswald
</td>
<td>17
</td>
</tr>
<tr>
<td>Benedict
</td>
<td>Mason
</td>
<td>33
</td>
</tr>
<tr>
<td>Eve
</td>
<td>Jackson
</td>
<td>94
</td>
</tr>
<tr>
<td>Clara
</td>
<td>Oswald
</td>
<td>17
</td>
</tr>
<tr>
<td>Benedict
</td>
<td>Mason
</td>
<td>33
</td>
</tr>
<tr>
<td>Eve
</td>
<td>Jackson
</td>
<td>94
</td>
</tr>
<tr>
<td>Clara
</td>
<td>Oswald
</td>
<td>17
</td>
</tr>
<tr>
<td>Benedict
</td>
<td>Mason
</td>
<td>33
</td>
</tr>
<tr>
<td>Eve
</td>
<td>Jackson
</td>
<td>94
</td>
</tr>
<tr>
<td>Clara
</td>
<td>Oswald
</td>
<td>17
</td>
</tr>
<tr>
<td>Benedict
</td>
<td>Mason
</td>
<td>33
</td>
</tr>
</tbody>
</table>
[/html]

Then it is time to say where do you need to bind the grid.

[html]
<div id=’jqxWidget’ style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid">
</div>
</div>
[/html]

Now we will define our grid as follows.

[js]
$("#jqxgrid").jqxGrid(
{
width: 850,
autoheight: true,
source: dataAdapter,
columns: columnsArray,
pageable: true,
sortable: true,
filterable: true
});
[/js]

As you can see we have applied dataAdapter as the source, below is the definition for your data adapter.

[js]
var dataAdapter = new $.jqx.dataAdapter(source);
[/js]

Now we will create the source object as follows.

[js]
var source =
{
datatype: "json",
datafields: dataFieldsArray,
localdata: data
};
[/js]

As the grid definition is over, we can create our data, datafields, columns. Shall we? As I said earlier, our data source is a HTML table. We are looping through the trs to create the data and ths to create the datafields and columns.

[js]
// select rows.
var rows = $("#initialTable tbody tr");
// select columns.
var columns = $("#initialTable thead th");
var data = [];
var dataFieldsArray = [];
var columnsArray = [];
for (var i = 0; i < rows.length; i++) {
var row = rows&#91;i&#93;;
var datarow = {};
for (var j = 0; j < columns.length; j++) {
// get column’s title.
var columnName = $.trim($(columns&#91;j&#93;).text());
// select cell.
var cell = $(row).find(‘td:eq(‘ + j + ‘)’);
var type = ‘string’;
var format = ”;
var cellsalign = ‘left’;
if (!isNaN(cell.text())) {
type = ‘number’;
format = ‘d’;
cellsalign = ‘right’;
}
datarow&#91;columnName&#93; = $.trim(cell.text());
if (i === 0) {
dataFieldsArray.push({ name: columnName, type: type });
columnsArray.push({ name: columnName, dataField: columnName, cellsrenderer: cellsrenderer, cellsformat: format, cellsalign: cellsalign });
}
}
data&#91;data.length&#93; = datarow;
}
&#91;/js&#93;

Have you noticed that when we push the the items to the <em>columnsArray</em> we are calling the function <em>cellsrenderer</em>. This <em>cellsrenderer</em> function returns the HTML with coloured data as we expected.

[js]
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
if (parseFloat(rowdata.Debits) < 30) {
return ‘<span style="margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #ff0000;">’ + value + ‘</span>’;
} else {
return ‘<span style="margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #00ff00;">’ + value + ‘</span>’;
}
};
[/js]

Here in this function we will get the needed things like row, columnfield, value, defaulthtml, columnproperties, rowdata as parameters and we checks for the condition rowdata.Debits<30, if it is true we will apply the colour #ff0000 or #00ff00.

Once the formatting is done, we are pushing the items to the arrays. Now we can see the complete code.

Complete code

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
<link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

<script type="text/javascript">
$(document).ready(function () {
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
if (parseFloat(rowdata.Debits) < 30) {
return ‘<span style="margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #ff0000;">’ + value + ‘</span>’;
} else {
return ‘<span style="margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #00ff00;">’ + value + ‘</span>’;
}
};

// select rows.
var rows = $("#initialTable tbody tr");
// select columns.
var columns = $("#initialTable thead th");
var data = [];
var dataFieldsArray = [];
var columnsArray = [];
for (var i = 0; i < rows.length; i++) {
var row = rows&#91;i&#93;;
var datarow = {};
for (var j = 0; j < columns.length; j++) {
// get column’s title.
var columnName = $.trim($(columns&#91;j&#93;).text());
// select cell.
var cell = $(row).find(‘td:eq(‘ + j + ‘)’);
var type = ‘string’;
var format = ”;
var cellsalign = ‘left’;
if (!isNaN(cell.text())) {
type = ‘number’;
format = ‘d’;
cellsalign = ‘right’;
}
datarow&#91;columnName&#93; = $.trim(cell.text());
if (i === 0) {
dataFieldsArray.push({ name: columnName, type: type });
columnsArray.push({ name: columnName, dataField: columnName, cellsrenderer: cellsrenderer, cellsformat: format, cellsalign: cellsalign });
}
}
data&#91;data.length&#93; = datarow;
}

// prepare the data
var source =
{
datatype: "json",
datafields: dataFieldsArray,
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid(
{
width: 850,
autoheight: true,
source: dataAdapter,
columns: columnsArray,
pageable: true,
sortable: true,
filterable: true
});
});
</script>
</head>
<body class=’default’>
<table id="initialTable" style="width: 300px;display:none;">
<thead>
<tr>
<th>Firstname
</th>
<th>Lastname
</th>
<th>Debits
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eve
</td>
<td>Jackson
</td>
<td>94
</td>
</tr>
<tr>
<td>Clara
</td>
<td>Oswald
</td>
<td>17
</td>
</tr>
<tr>
<td>Benedict
</td>
<td>Mason
</td>
<td>33
</td>
</tr>
<tr>
<td>Eve
</td>
<td>Jackson
</td>
<td>94
</td>
</tr>
<tr>
<td>Clara
</td>
<td>Oswald
</td>
<td>17
</td>
</tr>
<tr>
<td>Benedict
</td>
<td>Mason
</td>
<td>33
</td>
</tr>
<tr>
<td>Eve
</td>
<td>Jackson
</td>
<td>94
</td>
</tr>
<tr>
<td>Clara
</td>
<td>Oswald
</td>
<td>17
</td>
</tr>
<tr>
<td>Benedict
</td>
<td>Mason
</td>
<td>33
</td>
</tr>
<tr>
<td>Eve
</td>
<td>Jackson
</td>
<td>94
</td>
</tr>
<tr>
<td>Clara
</td>
<td>Oswald
</td>
<td>17
</td>
</tr>
<tr>
<td>Benedict
</td>
<td>Mason
</td>
<td>33
</td>
</tr>
</tbody>
</table>

<p style="font-family: Verdana;">
Dynamically apply colour coding in Grid
</p>
<div id=’jqxWidget’ style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid">
</div>
</div>
</body>
</html>
[/html]

Output

Dynamically apply colour coding in Grid

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

[js]
labelFormatter: function () {
return this.name.toString().replace(‘ 00:00:00.000’, ”).replace(‘ 00:00:00.00’, ”).replace(‘ 00:00:00’, ”);
}
[/js]

Just add that function in your legend settings will do the remaining. Happy Coding!.

Please see my other posts code snippets here: Code Snippets

Kindest Regards
Sibeesh Venu

Download Source Code

Background

I have been working with the Grid controls for a long long time. So far I have worked with jQX Grid, jQ Grid, jQuery Datatables, Pivot tables, KO grid etc. It is always interesting to work with some controls. I always loved it. recently I worked with MVC grid. So I thought of sharing that experience with you all.

Create a MVC application

First, we will start with creating an MVC application. Open your visual studio, then click File->New->Project. Name your project.

Install MVC Grid

The next step we are going to do is, installing the MVC grid to our project. To install, please right click your solution and click on Manage NuGet packages.

Select NuGet Package

Now you can see a new window, please search for MVC grid in the search box. And then click Install.

Install_MVC_Grid_To_Project

Once you installed, you can see there is a new reference file has been added(GridMVC), you can also notice that two views are created (_Grig.cshtml,_GridPager.cshtml) and one CSS file and some scripts. Now we will move to our next step.

Dependencies

As I said before, MVC grid uses bootstrap for design. So the next thing we need to is to install bootstrap in our project. For that, go to NuGet packages again and search for bootstrap.

Install_Bootstrap_To_Project

You can see some new CSS files and scripts has been added to our project. So the set up has been done. Now what we need to do is to move on the coding part.

Create a controller

Now we can create a new controller, in my case I created a controller ‘HomeController’. In my controller I am going to call a model action which will return some dynamic data. See the code below.

[csharp]
public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{
Test t = new Test();
var myList= t.GetData();
return View(myList);
}

}
[/csharp]

As you can see I am creating an instance of my model Test, now we will create our model class. Shall we?

Create Model

I have create a model class with the name Test. Here I am creating some data dynamically using a for loop and assign those values to a list. Please see the codes below.

[csharp]
namespace AsyncActions.Models
{
public class Test
{
public List<Customer> GetData()
{
try
{
List<Customer> cst = new List<Customer>();
for (int i = 0; i < 100; i++)
{
Customer c = new Customer();
c.CustomerID = i;
c.CustomerCode = "CST" + i;
cst.Add(c);
}
return cst;
}
catch (Exception)
{
throw new NotImplementedException();
}

}
}
public class Customer
{
public int CustomerID { get; set; }
public string CustomerCode { get; set; }
}
}
[/csharp]

As you can see I am creating a list of type Customer. Is that fine? Now what is pending? Yes, a view.

Create a strongly typed view

Now we are going to create a strongly typed view.

Create_Strongly_Typed_View

When you create a view as strongly typed view, your view header will be as follows. @model List

So our view is ready, now we can do some codes in our view to populate our grid. Are you ready? First thing is you need to include the needed references to our view, you can do this in the file called Layout.cshtml. Here I am going to add those references directly to the view.

[html]
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<link href="~/Content/Gridmvc.css" rel="stylesheet" />
<script src="~/Scripts/gridmvc.min.js"></script>
[/html]

Add the grid namespace

You can add the grid namespace as follows.

[html]
@using GridMvc.Html
[/html]

Next thing is to add grid implementation.

MVC Grid Implementation

To add a MVC grid as our requirement, you need to add the codes as below.

[csharp]
@Html.Grid(Model).Columns(columns =>
{
columns.Add(foo => foo.CustomerID).Titled("Customer ID").SetWidth(50).Sortable(true).Filterable(true);
columns.Add(foo => foo.CustomerCode).Titled("Customer Code").SetWidth(50).Sortable(true).Filterable(true);
}).WithPaging(20)

[/csharp]

As you can see we are using the columns Customer.CustomerID and Customer.CustomerCode.

Output

MVC_Grid_With_Dynamic_Data

Add more Grid features

To set the paging we can use the option WithPaging(20).
To add title we can use Titled property.
To set width we can use SetWidth property.
To set sort we can use Sortable property.
To set filter we can use Filterable property.

You can always see the additional options here .

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Background

We all works in grid controls. Sometimes you may need to customize the grid and its column values. Here I am giving you custom demo of the same. In this article we are going to customize the grid column contents to a href tags.

Using the code

To show this demo, I am using jQWidget jQX Grid control. If you are new to jQX Grid, you can find out some introduction here: jQWidget JQX Grid

Now we are going to load the grid first. I hope you have already checked how to load the grid. Please see the below code.

Create an HTML page

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Href Columns In Grid – Sibeesh Passion</title>
</head>
<body>
<h3>Href Columns In Grid – Sibeesh Passion</h3>
<br />
<div id="jqxgrid"></div>
</body>
</html>

[/html]

Add the needed references

[html]
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
<link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
[/html]

Here comes the main part.

Grid Settings or Grid Initialization

[js]
<script type="text/javascript">
$(document).ready(function () {
var columntohref = function (row, column, value) {
if (value.indexOf(‘#’) != -1) {
value = value.substring(0, value.indexOf(‘#’));
}
var format = { target: ‘"_blank"’ };
var html = $.jqx.dataFormat.formatlink(value, format);
return html;
}
var data =
{
datatype: "json",
datafields: [{ "name": "LinkName", "type": "string" }, { "name": "Link", "type": "string" }],
url: "CustomData.txt"
};
$("#jqxgrid").jqxGrid(
{
source: data,
columns: [{ "text": "LinkName", "dataField": "LinkName", width: "300" }, { "text": "Link", "dataField": "Link", cellsrenderer: columntohref, width: "300" }]
});
});
</script>
[/js]

Sample data

Following is the contents of CustomData.txt

[js]
[{"LinkName":"Sibeesh Passion","Link":"http://www.sibeeshpassion.com"},{"LinkName":"C-Sharp Corner","Link":"http://www.c-sharpcorner.com"},{"LinkName":"Facebook","Link":"http://www.fb.com"},{"LinkName":"Google","Link":"http://www.google.com"}]
[/js]

As you can find out in the above code we are using cellsrenderer property to call the function columntohref which does the formatting. We are formatting the data as below ,

[js]
$.jqx.dataFormat.formatlink(value, format)
[/js]

Shall we check our output now?

Output

Column values to a href

Complete Code

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Href Columns In Grid – Sibeesh Passion</title>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
<link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

<script type="text/javascript">
$(document).ready(function () {
var columntohref = function (row, column, value) {
if (value.indexOf(‘#’) != -1) {
value = value.substring(0, value.indexOf(‘#’));
}
var format = { target: ‘"_blank"’ };
var html = $.jqx.dataFormat.formatlink(value, format);
return html;
}
var data =
{
datatype: "json",
datafields: [{ "name": "LinkName", "type": "string" }, { "name": "Link", "type": "string" }],
url: "CustomData.txt"
};
$("#jqxgrid").jqxGrid(
{
source: data,
columns: [{ "text": "LinkName", "dataField": "LinkName", width: "300" }, { "text": "Link", "dataField": "Link", cellsrenderer: columntohref, width: "300" }]
});
});
</script>
</head>
<body class=’default’>
<h2>Href Columns In Grid – Sibeesh Passion</h2>
<div id="jqxgrid"></div>
</body>
</html>
[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Background

I am working in a dashboard application. So for me performance was the main criteria to take care. We have used server side paging to improve the performance. This I will share in my next article. Now we will try to load a client side data on demand. Let us say when ever user scroll down. Sounds fine? Ok let us start then.

Using the code

To show this demo, I am using jQWidget jQX Grid control. If you are new to jQX Grid, you can find out some introduction here: jQWidget JQX Grid

Now we are going to load the grid first. I hope you have already checked how to load the grid. Please see the below code.

Create an HTML page

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Load Data To Grid On Scroll – Sibeesh Passion</title>
</head>
<body>
<h3>Load Data To Grid On Scroll – Sibeesh Passion</h3>
<br />
<div id="jqxgrid"></div>
</body>
</html>

[/html]

Add the needed references

[html]
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
<link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
[/html]

Here comes the main part.

Grid Settings or Grid Initialization

[js]
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data = new Array();
var firstNames =
[
"Sibeesh", "Ajay", "Ansary", "Aghil", "Shanto", "Libin", "Vignesh", "Ramesh", "Sathian", "Elango", "karthik"
];

var lastNames =
[
"Venu", "Bhasy", "Rasheed", "Ghosh", "Thomas", "Lawrence", "Vicky", "K", "K", "S", "Srinivasan"
];

var productNames =
[
"Shoe", "Sandals", "Shampoo", "Soap", "Hair Lotion", "Creams", "Bags", "Watch", "Books", "Mobile", "Tab", "Laptop"
];

var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "20.75", "13.25", "124.0"
];

// generate sample data.
var generatedata = function (startindex, endindex) {
var data = {};
for (var i = startindex; i < endindex; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);

row["id"] = i;
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;

data[i] = row;
}
return data;
}

var source =
{
datatype: "array",
localdata: {},
totalrecords: 1000000
};

// load virtual data.
var rendergridrows = function (params) {
var data = generatedata(params.startindex, params.endindex);
return data;
}
var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid(
{
width: 850,
source: dataAdapter,
virtualmode: true,
rendergridrows: rendergridrows,
columns: [
{ text: ‘Id’, datafield: ‘id’, width: 100 },
{ text: ‘First Name’, datafield: ‘firstname’, width: 120 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 120 },
{ text: ‘Product’, datafield: ‘productname’, width: 180 },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 80, cellsalign: ‘right’ },
{ text: ‘Unit Price’, datafield: ‘price’, width: 90, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ text: ‘Total’, datafield: ‘total’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});
});
</script>
[/js]

As you can find out in the above code we are generating the data dynamically using a function declaration generatedata.

Have you noticed that in the grid settings we have given virtualmode: true. This is very important. This property is meant to be used for handling the dynamic data in grid.

And another property you must be aware of is rendergridrows: rendergridrows. This means, we are rendering the grid data on demand. Like when user change the pager or scroll. So we are going to call our generatedata function in the rendergridrows. We are passing the start index and end index to the function, so that the dynamic data won’t be repeated.

[js]
var rendergridrows = function (params) {
var data = generatedata(params.startindex, params.endindex);
return data;
}
[/js]

Once the data is ready, we will pass it to the source object and source object to dataAdapter and finally dataAdapter to grid.

Shall we check our output now?

Output

Load Data On Scroll

Load Data On Scroll

Complete Code

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Load Data To Grid On Scroll – Sibeesh Passion</title>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
<link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data = new Array();
var firstNames =
[
"Sibeesh", "Ajay", "Ansary", "Aghil", "Shanto", "Libin", "Vignesh", "Ramesh", "Sathian", "Elango", "karthik"
];

var lastNames =
[
"Venu", "Bhasy", "Rasheed", "Ghosh", "Thomas", "Lawrence", "Vicky", "K", "K", "S", "Srinivasan"
];

var productNames =
[
"Shoe", "Sandals", "Shampoo", "Soap", "Hair Lotion", "Creams", "Bags", "Watch", "Books", "Mobile", "Tab", "Laptop"
];

var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "20.75", "13.25", "124.0"
];

var generatedata = function (startindex, endindex) {
var data = {};
for (var i = startindex; i < endindex; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);

row["id"] = i;
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;

data[i] = row;
}
return data;
}

var source =
{
datatype: "array",
localdata: {},
totalrecords: 1000000
};

// load virtual data.
var rendergridrows = function (params) {
var data = generatedata(params.startindex, params.endindex);
return data;
}
var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid(
{
width: 850,
source: dataAdapter,
virtualmode: true,
rendergridrows: rendergridrows,
columns: [
{ text: ‘Id’, datafield: ‘id’, width: 100 },
{ text: ‘First Name’, datafield: ‘firstname’, width: 120 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 120 },
{ text: ‘Product’, datafield: ‘productname’, width: 180 },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 80, cellsalign: ‘right’ },
{ text: ‘Unit Price’, datafield: ‘price’, width: 90, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ text: ‘Total’, datafield: ‘total’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});
});
</script>

</head>
<body>
<h3>Load Data To Grid On Scroll – Sibeesh Passion</h3>
<br />
<div id="jqxgrid"></div>
</body>
</html>
[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

To load a grid from a JSON, you can follows the steps as discussed in this article: Load jQWidget JQX Grid From JSON

Background

If you are new to JQWidget JQX Grid, Please find out here: http://sibeeshpassion.com/category/jqwidgets/

Download the Source Code

Please download the source code from here: Change Themes Dynamically

Using the code

I hope you have implemented your grid as shown in that article. Now I guess your page will be looking like this.

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Themes Dynamically In Grid – Sibeesh Passion</title>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>

<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data =
{
datatype: "json",
datafields: [{ "name": "AreaCode", "type": "string" }, { "name": "Revenue", "type": "number" }],
url: "jsonData.txt"
};
$("#jqxgrid").jqxGrid(
{
source: data,
columns: [{ "text": "Area Code", "dataField": "AreaCode", "cellsalign": "left", "cellsformat": "d" }, { "text": "Revenue", "dataField": "Revenue", "cellsalign": "right", "cellsformat": "c2" }],
});
});
</script>
</head>
<body>
<h3>Change Themes Dynamically In Grid – Sibeesh Passion</h3>
<br />
<div id=’jqxWidget’ style="float: left; width: 99.9%;">
<div id="jqxgrid"></div>
</div>
</body>
</html>

[/html]

Now let us make sure that grid is working fine. Please run your project.

Change Themes Dynamically In Grid

Cool, so grid is loaded. Now need to add a select control in which we are going to load theme names so that user can select the theme and apply. Is that fine?

[html]
<select id="selectOptions" onchange="applyNewCSS()">
<option value="0">Select Template</option>
<option value="metro">metro</option>
<option value="office">office</option>
<option value="orange">orange</option>
<option value="energyblue">energyblue</option>
<option value="darkblue">darkblue</option>
<option value="shinyblack">shinyblack</option>
<option value="lightness" selected="selected">lightness</option>
<option value="android">android</option>
</select>
[/html]

The next thing is we need to add the CSS links to the page, here I am going to add some of the CSS references as follows.

[html]
<link href="JQXItems/jqwidgets/styles/jqx.darkblue.css" rel="stylesheet" title="darkblue" />
<link href="JQXItems/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet" title="energyblue" />
<link href="JQXItems/jqwidgets/styles/jqx.metro.css" rel="stylesheet" title="metro" />
<link href="JQXItems/jqwidgets/styles/jqx.metrodark.css" rel="stylesheet" title="metrodark" />
<link href="JQXItems/jqwidgets/styles/jqx.office.css" rel="stylesheet" title="office" />
<link href="JQXItems/jqwidgets/styles/jqx.ui-darkness.css" rel="stylesheet" title="ui-darkness" />
<link href="JQXItems/jqwidgets/styles/jqx.ui-le-frog.css" rel="stylesheet" title="ui-le-frog" />
<link href="JQXItems/jqwidgets/styles/jqx.ui-lightness.css" rel="stylesheet" title="ui-lightness." />
<link href="JQXItems/jqwidgets/styles/jqx.ui-sunny.css" rel="stylesheet" title="ui-sunny" />
[/html]

Have you noticed that we are calling the function applyNewCSS in the on change event of the select control. So next thins we will add that function.

[js]
function applyNewCSS() {
var css = $.trim($("#selectOptions").val());
if (css == ‘metro’) {
$("#jqxgrid").jqxGrid({ theme: ‘metro’ });
}
else if (css == ‘metrodark’) {
$("#jqxgrid").jqxGrid({ theme: ‘metrodark’ });
}
else if (css == ‘office’) {
$("#jqxgrid").jqxGrid({ theme: ‘office’ });
} else if (css == ‘orange’) {
$("#jqxgrid").jqxGrid({ theme: ‘orange’ });
} else if (css == ‘energyblue’) {
$("#jqxgrid").jqxGrid({ theme: ‘energyblue’ });
} else if (css == ‘darkblue’) {
$("#jqxgrid").jqxGrid({ theme: ‘darkblue’ });
} else if (css == ‘black’) {
$("#jqxgrid").jqxGrid({ theme: ‘black’ });
} else if (css == ‘shinyblack’) {
$("#jqxgrid").jqxGrid({ theme: ‘shinyblack’ });
} else if (css == ‘lightness’) {
$("#jqxgrid").jqxGrid({ theme: ‘lightness’ });
} else if (css == ‘ui-le-frog’) {
$("#jqxgrid").jqxGrid({ theme: ‘ui-le-frog’ });
} else if (css == ‘ui-darkness’) {
$("#jqxgrid").jqxGrid({ theme: ‘ui-darkness’ });
} else if (css == ‘ui-sunny’) {
$("#jqxgrid").jqxGrid({ theme: ‘ui-sunny’ });
}
else if (css == ‘android’) {
$("#jqxgrid").jqxGrid({ theme: ‘android’ });
}
}
[/js]

So we can add the theme to the grid as $(“#jqxgrid”).jqxGrid({ theme: ‘theme name’ });

Here we are applying the theme to the grid according to the user selection. Oops, we forgot one thing. If you apply CSS style sheet directly, the styles won’t get applied in the page contents. For that we need to disable the remaining style sheets and enable the selected one alone.

Following code will do that magic.

[js]
var i, link_tag;
for (i = 0, link_tag = document.getElementsByTagName("link") ; i < link_tag.length; i++) {
if ((link_tag[i].rel.indexOf("stylesheet") != -1) && link_tag[i].title) {
link_tag[i].disabled = true;
if (link_tag[i].title == css) {
link_tag[i].disabled = false;
}
}
set_cookie(‘style’, css, 30);
}
[/js]

We are finding all of the link reference and find out whose rel property has the word ‘stylesheet’. Now it is time to see how it woks.

Change Themes Dynamically In Grid

Change Themes Dynamically In Grid

You can see that the grid themes are changing according to the user selection of theme.That’s all we have done it.

Complete Code

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Themes Dynamically In Grid – Sibeesh Passion</title>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>

<link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
<link href="JQXItems/jqwidgets/styles/jqx.darkblue.css" rel="stylesheet" title="darkblue" />
<link href="JQXItems/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet" title="energyblue" />
<link href="JQXItems/jqwidgets/styles/jqx.metro.css" rel="stylesheet" title="metro" />
<link href="JQXItems/jqwidgets/styles/jqx.metrodark.css" rel="stylesheet" title="metrodark" />
<link href="JQXItems/jqwidgets/styles/jqx.office.css" rel="stylesheet" title="office" />
<link href="JQXItems/jqwidgets/styles/jqx.ui-darkness.css" rel="stylesheet" title="ui-darkness" />
<link href="JQXItems/jqwidgets/styles/jqx.ui-le-frog.css" rel="stylesheet" title="ui-le-frog" />
<link href="JQXItems/jqwidgets/styles/jqx.ui-lightness.css" rel="stylesheet" title="ui-lightness." />
<link href="JQXItems/jqwidgets/styles/jqx.ui-sunny.css" rel="stylesheet" title="ui-sunny" />

<script type="text/javascript">
function applyNewCSS() {
var css = $.trim($("#selectOptions").val());
var i, link_tag;
for (i = 0, link_tag = document.getElementsByTagName("link") ; i < link_tag.length; i++) {
if ((link_tag[i].rel.indexOf("stylesheet") != -1) && link_tag[i].title) {
link_tag[i].disabled = true;
if (link_tag[i].title == css) {
link_tag[i].disabled = false;
}
}
}
if (css == ‘metro’) {
$("#jqxgrid").jqxGrid({ theme: ‘metro’ });
}
else if (css == ‘metrodark’) {
$("#jqxgrid").jqxGrid({ theme: ‘metrodark’ });
}
else if (css == ‘office’) {
$("#jqxgrid").jqxGrid({ theme: ‘office’ });
} else if (css == ‘orange’) {
$("#jqxgrid").jqxGrid({ theme: ‘orange’ });
} else if (css == ‘energyblue’) {
$("#jqxgrid").jqxGrid({ theme: ‘energyblue’ });
} else if (css == ‘darkblue’) {
$("#jqxgrid").jqxGrid({ theme: ‘darkblue’ });
} else if (css == ‘black’) {
$("#jqxgrid").jqxGrid({ theme: ‘black’ });
} else if (css == ‘shinyblack’) {
$("#jqxgrid").jqxGrid({ theme: ‘shinyblack’ });
} else if (css == ‘lightness’) {
$("#jqxgrid").jqxGrid({ theme: ‘lightness’ });
} else if (css == ‘ui-le-frog’) {
$("#jqxgrid").jqxGrid({ theme: ‘ui-le-frog’ });
} else if (css == ‘ui-darkness’) {
$("#jqxgrid").jqxGrid({ theme: ‘ui-darkness’ });
} else if (css == ‘ui-sunny’) {
$("#jqxgrid").jqxGrid({ theme: ‘ui-sunny’ });
}
else if (css == ‘android’) {
$("#jqxgrid").jqxGrid({ theme: ‘android’ });
}
}
$(document).ready(function () {
// prepare the data
var data =
{
datatype: "json",
datafields: [{ "name": "AreaCode", "type": "string" }, { "name": "Revenue", "type": "number" }],
url: "jsonData.txt"
};
$("#jqxgrid").jqxGrid(
{
source: data,
columns: [{ "text": "Area Code", "dataField": "AreaCode", "cellsalign": "left", "cellsformat": "d" }, { "text": "Revenue", "dataField": "Revenue", "cellsalign": "right", "cellsformat": "c2" }],
});
});
</script>
</head>
<body>
<h3>Change Themes Dynamically In Grid – Sibeesh Passion</h3>
<br />
<div id=’jqxWidget’ style="float: left; width: 99.9%;">
<div id="jqxgrid"></div>
</div>
<br />
<br />
<select id="selectOptions" onchange="applyNewCSS()">
<option value="0">Select Template</option>
<option value="metro">metro</option>
<option value="office">office</option>
<option value="orange">orange</option>
<option value="energyblue">energyblue</option>
<option value="darkblue">darkblue</option>
<option value="shinyblack">shinyblack</option>
<option value="lightness" selected="selected">lightness</option>
<option value="android">android</option>
</select>
</body>
</html>

[/html]

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to do this requirement? Did you try jQWidget yet? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu