Grid – Sibeesh Passion

Custom Deferred Grid Using MVC Web API And Angular JS

SibeeshVenu — Mon, 29 Feb 2016 00:00:41 +0000

[toc]

Introduction

In this article we are going to see how to create a custom deferred grid in MVC using Web API and Angular JS. We will be creating a custom UI for the grid and using web API and angular JS $http services we will fetch the data from the database. Normally we uses ADO.Net Entity data model as the model class when we work with a Web API right? Instead of using an Entity data model, here we are going to use our normal SqlDataAdapter and SqlConnection and stored procedure to get the data from our database. We uses Virtual Repeat in Angular JS for loading the data in UI, so that the data will be loaded when ever there is a user action that is scrolling (Virtual Scrolling). So that in the view port we will load only few items first. Now shall we go and see this in detail? I hope you will like this.

Download the source code

You can always download the source code here:

Background

We have so many plugins available to show the data in a grid format. Isn’t it? if you want to know a few of them, you can find it here. Now, what if you need to show the data in a grid format without using any additional plugins? What if you need to load the data to that grid dynamically that is whenever the user scrolls the grid? If you could not find the answer to these questions, here in this post I am going to share an option. I hope you will enjoy reading.

Create an MVC application

Click File-> New-> Project then select MVC application. Before going to start the coding part, make sure that Angular JS is installed. You can all the items mentioned above from NuGet. Right click on your project name and select Manage NuGet packages.

Angular JS NuGet Package Visual Studio

Once you have installed, please make sure that all the items are loaded in your scripts folder.

Using the code

I hope everything is set now, then it is time to start our coding. First we will create a controller action and a view. Below is the code snippet of our controller.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Custom_Deffered_Grid_Using_MVC_Web_API_And_Angular_JS.Controllers
{
public class DefaultController : Controller
{
// GET: Default
public ActionResult Index()
{
return View();
}
}
}
[/csharp]

Here Default/em> is my controller name. Now create a view for this action, and load the needed references.

[html]

@{
ViewBag.Title = “Index”;
}

Index

[/html]

You can get this files from the source code attached with this article. And the file Default.js is the additional file where we are requested to do our additional scripts. So far the basic implementation of our view is done. Now we will create a Web API and additional model class to fetch the data from the database. Are you ready?

Below is my Web API controller.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Custom_Deffered_Grid_Using_MVC_Web_API_And_Angular_JS.Models;
namespace Custom_Deffered_Grid_Using_MVC_Web_API_And_Angular_JS.Controllers
{
public class DataAPIController : ApiController
{
DataModel dm = new DataModel();
public string getData(int id)
{
var d = dm.fetchData(id);
return d;
}
}

}
[/csharp]

Have you noticed that I have included using Custom_Deffered_Grid_Using_MVC_Web_API_And_Angular_JS.Models; in the section? This is to ensure that we can use the model classes whatever we have creates so far. In this case DataModel is our model class and we are creating an instance for the same.

[csharp]
DataModel dm = new DataModel();
[/csharp]

The controller action getData accepting the parameter id right? This is actually the page offset value which we are passing from the client side. Now we will create our model class, you can find the code snippets below for that.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Configuration;
namespace Custom_Deffered_Grid_Using_MVC_Web_API_And_Angular_JS.Models
{
public class DataModel
{
public string fetchData(int pageOffset)
{
string connection = ConfigurationManager.ConnectionStrings[“TrialsDBEntities”].ConnectionString;
using (SqlConnection cn = new SqlConnection(connection))
{
SqlCommand cmd = new SqlCommand(“usp_Get_SalesOrderDetailPage”, cn);
cmd.Parameters.Add(“@pageoffset”, SqlDbType.Int).Value = pageOffset;
cmd.CommandType = CommandType.StoredProcedure;
try
{
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
cn.Open();
da.Fill(dt);
return GetJson(dt);
}
catch (Exception)
{
throw;
}

}
}
}
}
[/csharp]

As I said before, instead of using an entity model we uses our normal sql connections and sql data adapter to load the data. Before going to use this function, please make sure that you have added the below references.

[csharp]
using System.Data;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Configuration;
[/csharp]

Now coming back to the fetchData function , We uses the connection string TrialsDBEntities from the web config file. So it is mandatory that you must have a connection string with that name in your web config file. Once that is done, we calls the stored procedure usp_Get_SalesOrderDetailPage and fill the data using SqlDataAdapter.

Another thing to be notified here is we are passing that DataTable to a function called GetJson. So you must have the definition for that too.

[csharp]
public string GetJson(DataTable dt)
{
try
{
if (dt == null)
{
throw new ArgumentNullException(“dt”);
}
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List> rows =
new List>();
Dictionary row = null;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName.Trim(), dr[col]);
}
rows.Add(row);
}
return serializer.Serialize(rows);
}
catch (Exception)
{
throw;
}
}
[/csharp]

What this function does it, converting the data table to a JSON format. So far, the coding related to Web API is done, now it is time to create a database, table, a stored procedure.

Create a database

The following query can be used to create a database in your SQL Server.

[sql]
USE [master]
GO

/****** Object: Database [TrialsDB] Script Date: 25-Feb-16 12:34:32 PM ******/
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]

Now we will create a table 🙂

Create table in database

Below is the query to create table in database.

[sql]
USE [TrialsDB]
GO

/****** Object: Table [dbo].[SalesOrderDetail] Script Date: 25-Feb-16 12:35:45 PM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[SalesOrderDetail](
[SalesOrderID] [int] NOT NULL,
[SalesOrderDetailID] [int] IDENTITY(1,1) NOT NULL,
[CarrierTrackingNumber] [nvarchar](25) NULL,
[OrderQty] [smallint] NOT NULL,
[ProductID] [int] NOT NULL,
[SpecialOfferID] [int] NOT NULL,
[UnitPrice] [money] NOT NULL,
[UnitPriceDiscount] [money] NOT NULL,
[LineTotal] AS (isnull(([UnitPrice]*((1.0)-[UnitPriceDiscount]))*[OrderQty],(0.0))),
[rowguid] [uniqueidentifier] ROWGUIDCOL NOT NULL,
[ModifiedDate] [datetime] NOT NULL,
CONSTRAINT [PK_SalesOrderDetail_SalesOrderID_SalesOrderDetailID] PRIMARY KEY CLUSTERED
(
[SalesOrderID] ASC,
[SalesOrderDetailID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
[/sql]

Can we insert some data to the table now?

Insert data to table

To insert the data, I will attach a database script file along with the download file, you can either run that or insert some data by using the below query. By the way if you would like to know how to generate scripts with data in SQL Server, you can check here.

[sql]
USE [TrialsDB]
GO

INSERT INTO [dbo].[SalesOrderDetail]
([SalesOrderID]
,[CarrierTrackingNumber]
,[OrderQty]
,[ProductID]
,[SpecialOfferID]
,[UnitPrice]
,[UnitPriceDiscount]
,[rowguid]
,[ModifiedDate])
VALUES
(
,
,
,
,
,
,
,
,)
GO
[/sql]

Along with this, we can create a new stored procedure which will fetch the data. Following is the query to create the stored procedure.

[sql]
USE [TrialsDB]
GO
/****** Object: StoredProcedure [dbo].[usp_Get_SalesOrderDetailPage] Script Date: 25-Feb-16 12:53:07 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
— =============================================
— Author:
— Create date:
— Description:
— =============================================
ALTER PROCEDURE [dbo].[usp_Get_SalesOrderDetailPage] @pageOffset int=0 AS BEGIN — SET NOCOUNT ON added to prevent extra result sets from
— interfering with SELECT statements.

SET NOCOUNT ON;

WITH CTE_Sales(SlNo, SalesOrderID,SalesOrderDetailID,CarrierTrackingNumber,OrderQty,ProductID,UnitPrice,ModifiedDate) AS
( SELECT ROW_NUMBER() over (
ORDER BY ModifiedDate DESC) AS SlNo,
SalesOrderID,
SalesOrderDetailID,
CarrierTrackingNumber,
OrderQty,
ProductID,
UnitPrice,
ModifiedDate
FROM dbo.SalesOrderDetail)
SELECT *
FROM CTE_Sales
WHERE SlNo>=@pageOffset
AND SlNo<@pageOffset+10 END

–[usp_Get_SalesOrderDetailPage] 4
[/sql]

Here we are using Common Table Expressions in SQL Server. If you are new to CTE, you can always see here Common Table Expression Example for some more informations regarding that. It seems the database is ready with the data now. Then we can go back to our view. We will change our view as follows with the custom styles.

[html]

@{
ViewBag.Title = “Index”;
}

Index

Please scroll the Grid to load the data from database. This is a simple demo of deffered or virtual data loading in Angular JS.
We created this application MVC with Web API to fetch the data. I hope you enjoyed the demo. Please visit again 🙂

SlNo: {{item.SlNo}}, SalesOrderID: {{item.SalesOrderID}}

SalesOrderDetailID: {{item.SalesOrderDetailID}}, CarrierTrackingNumber: {{item.CarrierTrackingNumber}}

OrderQty: {{item.OrderQty}}, ProductID: {{item.ProductID}}

UnitPrice: {{item.UnitPrice}}

[/html]

As you can see form the above code, our Angular JS controller is ng-controller=”AppCtrl as ctrl” and the Angular JS app is ng-app=”MyApp”. We uses md-virtual-repeat as a repeater control, so that it can be used to loop through the object item in ctrl.dynamicItems. Now it is time to create our Angular JS scripts. Shall we?

We can create our Angular App and Controller as follows.

Now in the controller we will add a function with some predefined items as follows.

[js]
var DynamicItems = function () {
this.loadedPages = {};
this.numItems = 0;
this.PAGE_SIZE = 10;
this.fetchNumItems_();
};
[/js]

Here loadedPages is the data collection which is keyed by the page number (Our parameter id in the controller). And numItems is the total number of items. PAGE_SIZE is the number of items to be fetched from each requests.

Now we will create a function to calculate the length of the records.

[js]
DynamicItems.prototype.getLength = function () {
return this.numItems;
};
[/js]

This numItems can be set in the below function.

[js]
DynamicItems.prototype.fetchNumItems_ = function () {
$timeout(angular.noop, 300).then(angular.bind(this, function () {
this.numItems = 1000;
}));
};
[/js]

Here we are setting the numItems as 1000 for demo purposes, you can always get the count from database and assign it here with a $http request as we load the data from database here, you are yet to see that, no worries.

Below is the function to get the item by index.

[js]
DynamicItems.prototype.getItemAtIndex = function (index) {
var pageNumber = Math.floor(index / this.PAGE_SIZE);
var page = this.loadedPages[pageNumber];

if (page) {
return page[index % this.PAGE_SIZE];
} else if (page !== null) {
this.fetchPage_(pageNumber);
}
};
[/js]

Here is the main part that to load the data from database using a $http service in Angular JS.

[js]
DynamicItems.prototype.fetchPage_ = function (pageNumber) {
this.loadedPages[pageNumber] = null;
$timeout(angular.noop, 300).then(angular.bind(this, function () {
var thisObj = this;
this.loadedPages[pageNumber] = [];
var pageOffset = pageNumber * this.PAGE_SIZE;
var myData;
var url = ”;
url = ‘api/DataAPI/’ + pageOffset;
$http({
method: ‘GET’,
url: url,
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
myData = JSON.parse(response.data);
pushLoadPages(thisObj, myData)
}, function errorCallback(response) {
console.log(‘Oops! Something went wrong while fetching the data. Status Code: ‘ + response.status + ‘ Status statusText: ‘ + response.statusText);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}));
};
[/js]

As you can see calls our Web API ( url = ‘api/DataAPI/’ + pageOffset;) from $http service, the callback function successCallback will get the data from database as a response. Once we get the response, we will pass the data to a function pushLoadPages to push the data items to the loadedPages. Cool right? Below is the code snippets for that function.

[js]
function pushLoadPages(thisObj, servData) {
if (servData != undefined) {
for (var i = 0; i < servData.length; i++) {
thisObj.loadedPages[pageNumber].push(servData[i]);
}
}
}
[/js]

Here is the complete code for our Angular JS.

Angular JS Complete Code

[js]
(function () {
‘use strict’;
angular
.module(‘MyApp’, [‘ngMaterial’, ‘ngMessages’, ‘material.svgAssetsCache’])
.controller(‘AppCtrl’, function ($http, $timeout) {
var DynamicItems = function () {
this.loadedPages = {};
this.numItems = 0;
this.PAGE_SIZE = 10;
this.fetchNumItems_();
};
DynamicItems.prototype.getItemAtIndex = function (index) {
var pageNumber = Math.floor(index / this.PAGE_SIZE);
var page = this.loadedPages[pageNumber];

if (page) {
return page[index % this.PAGE_SIZE];
} else if (page !== null) {
this.fetchPage_(pageNumber);
}
};
DynamicItems.prototype.getLength = function () {
return this.numItems;
};
DynamicItems.prototype.fetchPage_ = function (pageNumber) {
this.loadedPages[pageNumber] = null;
$timeout(angular.noop, 300).then(angular.bind(this, function () {
var thisObj = this;
this.loadedPages[pageNumber] = [];
var pageOffset = pageNumber * this.PAGE_SIZE;
var myData;
var url = ”;
url = ‘api/DataAPI/’ + pageOffset;
$http({
method: ‘GET’,
url: url,
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
myData = JSON.parse(response.data);
pushLoadPages(thisObj, myData)
}, function errorCallback(response) {
console.log(‘Oops! Something went wrong while fetching the data. Status Code: ‘ + response.status + ‘ Status statusText: ‘ + response.statusText);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
function pushLoadPages(thisObj, servData) {
if (servData != undefined) {
for (var i = 0; i < servData.length; i++) {
thisObj.loadedPages[pageNumber].push(servData[i]);
}
}
}
}));
};
DynamicItems.prototype.fetchNumItems_ = function () {
$timeout(angular.noop, 300).then(angular.bind(this, function () {
this.numItems = 1000;
}));
};
this.dynamicItems = new DynamicItems();
});
})();
[/js]

Now it is time to see the output.

Output

Custom Deferred Grid Using MVC Web API And Angular JS Output

Custom Deferred Grid Using MVC Web API And Angular JS Deferred Output

Have a happy coding.

Reference

Angular JS Materials

Conclusion

Did I miss anything that you may think which is needed? Did you try Web API yet? Have you ever wanted to do this requirement? 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 Stack Overflow 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

Convert JSON Data Into Data Grid Columns

SibeeshVenu — Tue, 19 Jan 2016 09:00:37 +0000

In this post we will see how we can show our JSON data in a client side grid. Here we are going to use jquery.columns grid, which is light weight and pretty easy to use. For the demo purpose we will create a JSON dynamically in client side and format it as a grid. I hope you will like this.

Using the code

First of all you need to download the needed files from here.

Then add reference to your page.

[html]

[/html]

Creating a JSON dynamically

You can create a JSON array as follows.

[js]
var myData = new Array();
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
function createData(num) {
myData = [];
for (var i = 0; i < num; 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["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;
myData[i] = row;
}
}
[/js]

Here the function createData will create a JSON array.

Next we need to create a table and give this array as a data source to the grid.

[html]

[/html]

[js]
$(function () {
createData(25);
$(‘#dataGrid’).columns({
data: myData
});
});
[/js]

Pretty simple right?

Complete code

[html]

Convert JSON Data Into Data Grid Columns

[/html]

Output

If everything goes fine, you can see as an output in your page.

JSON Data Into Data 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

Working With JQX Grid With Filtering And Sorting And Searching

SibeeshVenu — Sat, 29 Nov 2014 19:16:00 +0000

Introduction

We have all worked with JQ Grid. Today I got a requirement to implement JQWidget JQX Grid in my web application. Here I will explain how to implement JQX Grid in our application.

Download the needed files

JQX Grid With Filtering And Sorting

This article has been selected as Asp.Net Community Article of the Day Tuesday, December 30, 2014
(Working with JQX Grid with Filtering and Sorting and Searching)

What you must know

jQuery : What is jQuery?
JavaScript : JavaScript Tutorial
CSS 3 : CSS3 Introduction
HTML : HTML(5) Tutorial
DOM Manipulations in jQuery : jQuery – DOM Manipulation Methods

Background

We can implement the JQX Grid in MVC and in our web application. You can find the demo here: jqxGrid.

You can download the necessary file from http://www.jqwidgets.com/download/.

What made me choose JQX Grid

What made me choose JQX Grid? The answer is simple. We have so many client-side grid providers (JQGrid, Telerik, JQX and so on). If you are not aware of those, please have a look at:http://www.sitepoint.com/10-jquery-grids/

But for my requirements the client needs a toggle panel in which the filtering conditions occur. When I searched, JQX Grid has the best performance. (Some others support the same features, but they were a little slow.)

Using the code

There is a procedure we must follow to implement the JQX in our application.

Step 1

Download all the necessary files.

Step 2

Create a new web application.

Working With JQX Grid With Filtering And Sorting And Searching

Step 3

Add the selected folders to your application.

Working With JQX Grid With Filtering And Sorting And Searching

Step 4

Add a new page.

[html]

[/html]

Step 5

Add the style sheets and necessary JavaScript files.
[html]

[/html]

(Make sure that you add the JavaScript files in order.)

Step 6

Create the DOM elements in which you want to show the JQX Grid.
[html]

[/html]

Step 7

Generate some dynamic JSON data so that you can easily generate the JQX Grid. You can get the data from the database and convert it to JSON. If you are unfamiliar with how to convert JSON then you can get it here: Json.NET 6.0.6.

If you are not aware of how to add the newtonsoft and use it then please see this video. And please dont forget to rate his video. He has done good a job :).

JSON Serialization and DeSerialization

Here I am generating data dynamically in a JavaScript file. Please find the generatedata.js file in the bundle of the JQX Grid. Please add this to your script section.
[js]

[/js]

If you go into the generatedata.js, you can see a function generatedata, that is for creating the data (JSON array) dynamically .
[js]
function generatedata(rowscount, hasNullValues) {
// prepare the data
var data = new Array();
if (rowscount == #ff0000) rowscount = 100;
var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];
var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];
var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Caramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];
var priceValues =
[
“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
];
for (var i = 0; i < rowscount; 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[“available”] = productindex % 2 == 0;
if (hasNullValues == true) {
if (productindex % 2 != 0) {
var random = Math.floor(Math.random() * rowscount);
row[“available”] = i % random == 0 ? null : false;
}
}
row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“name”] = row[“firstname”] + ” “ + row[“lastname”];
row[“productname”] = productNames[productindex];
row[“price”] = price;
row[“quantity”] = quantity;
row[“total”] = price * quantity;
var date = new Date();
date.setFullYear(2014, Math.floor(Math.random() * 12), Math.floor(Math.random() * 27));
date.setHours(0, 0, 0, 0);
row[“date”] = date;
data[i] = row;
}
return data;
}
[/js]

Step 8

Now here is the main part. Add the main code to your script tag in the page. Here we are appending the Grid to the element that has the id jqxgrid.
[js]

[/js]

Step 9: Now build and run your code, you will get output as in the following:

Working With JQX Grid With Filtering And Sorting And Searching

Have a happy coding 🙂

History

First version on: 13-Oct-2014 10:30 PM.

Advanced JQX Grid With All Functionality

SibeeshVenu — Wed, 29 Oct 2014 19:05:41 +0000

In this article we will see how we can implement or create a JQWidget’s JQX grid in our application. It is a client side grid which is good in performance and speed. We will see the advanced properties of a JQWidget JQX gris in this article.

This article has been selected as Asp.Net Community Article of the Day Sunday January 11 ,2015.

If you are new to the term JQX Grid then please find out the articles related to JQWidget category here: http://sibeeshpassion.com/category/products/jqwidgets/

If you need to bind the data source dynamically, please read here: http://sibeeshpassion.com/Convert-CellSet-to-HTML-table-And-From-HTML-To-Json-To-Array. For the past days I have been working on JQX Grid. Now I will share that Grid with all the functionality.

Download the source code

Advanced JQXGrid

Background

In my previous article, one member asked for some functionality. So I thought of sharing that info. Please note that I have not implemented all the functionalities. I have selected some important features that we may use in our programming life.

Using the code

As we discussed in the previous articles, we need a web application with all the contents of JQX Widgets (http://sibeeshpassion.com/working-with-jqx-grid-with-filtering-and-sorting/ ).

What is JQX Grid?

jqxGrid is powerful datagrid widget built entirely with open web standards. It offers rich functionality, easy to use APIs and works across devices and browsers. jqxGrid delivers advanced data visualization features and built-in support for client and server-side paging, editing, sorting and filtering.

What we need?

Simple HTML
[html]

[/html]

Include the extra UI elements
[html]

[/html]

Include Reference

[html]

[/html]

What we add new?
[js]

[/js]

This script is for adding the functionality of Paging :). You can add the functionality to the grid as
[js]
pageable: true.
[/js]

And if you want different stylish paging then you can set that like this:
[js]
pagermode: ‘simple’,
[/js]
[js]

[/js]

This script is for adding the functionality of Editing :). You can add the functionality to the grid as
[js]
editable: true.
[/js]
[js]

[/js]

These scripts are for adding the functionality of Hierarchy columns. If we want to separate the data in the column header then you can include the following scripts.
[js]

[/js]

When you want to export your grid to any formate, please include those scripts. You can implement the same just like the following:
[js]
$(“#excelExport”).jqxButton({ theme: theme }); //Assign styles to the button
$(“#xmlExport”).jqxButton({ theme: theme });
$(“#csvExport”).jqxButton({ theme: theme });
$(“#tsvExport”).jqxButton({ theme: theme });
$(“#htmlExport”).jqxButton({ theme: theme });
$(“#jsonExport”).jqxButton({ theme: theme });
$(“#excelExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’); // To export to xlx
});
$(“#xmlExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xml’, ‘jqxGrid’); //To export to XML
});
$(“#csvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘jqxGrid’); // To export to csv
});
$(“#tsvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘tsv’, ‘jqxGrid’); // To export to tsv
});
$(“#htmlExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘html’, ‘jqxGrid’); // To export to html
});
$(“#jsonExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘json’, ‘jqxGrid’); // To export to JSON
});
[/js]

If you want to print your grid:
[js]
$(“#print”).jqxButton();
$(“#print”).click(function () {
var gridContent = $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘html’);
var newWindow = window.open(”, ”, ‘width=800, height=500′),
document = newWindow.document.open(),
pageContent =
‘\n’ +
‘\n’ +
‘\n’ +
‘\n’ +
‘jQWidgets Grid\n’ +
‘\n’ +
‘\n’ + gridContent + ‘\n\n’;
document.write(pageContent);
document.close();
newWindow.print();
});
[/js]

Now we need data to populate the grid, right? Since we are familiar with a simple header JQX Grid from the previous article, now we can go for a hierarchy column grid. So let’s say we have XML as follows:

[xml]

72
Formaggi Fortini s.r.l.
24 – 200 g pkgs.
32.3800
1996-07-04 00:00:00
59 rue de l-Abbaye
34.8000
Ravenna

Viale Dante, 75

Mozzarella di Giovanni

42
Leka Trading
32 – 1 kg pkgs.
32.3800
1996-07-04 00:00:00
59 rue de l-Abbaye
14.0000
Singapore

471 Serangoon Loop, Suite #402

Singaporean Hokkien Fried Mee

……..

……..

[/xml]

Please find the orderdetailsextended.xml from the source.

Implementing a JQX GRid with advanced features
[js]

[/js]

In the preceding script you can see a code part as follows:
[js]
columngroups:
[
{ text: ‘Product Details’, align: ‘center’, name: ‘ProductDetails’ },
{ text: ‘Order Details’, parentgroup: ‘ProductDetails’, align: ‘center’, name: ‘OrderDetails’ },
{ text: ‘Location’, align: ‘center’, name: ‘Location’ }
]
[/js]

This is where the column grouping is happening. And if you want to add a column under this column you can set that as follows:
[js]
{ text: ‘Name’, columngroup: ‘ProductDetails’, cellsalign: ‘center’, align: ‘center’, datafield: ‘ProductName’, width: 120 }
[/js]

You can specify this as needed and your data source.Now this is how our page looks like.
[html]

[/html]

That is all. We have successfully created a wonderful JQX Grid as in the following:

Advanced JQX Grid With All Functionality

Now you may think, why are those export buttons outside? It looks different, right? Now we can work on it. In the JQX Grid there is an option called showtoolbar, by setting this to true we can have a toolbar along with the grid. There we can bind all of these buttons if you want. So shall we start?
[js]
showtoolbar: true,
[/js]

Add that line to your JQX grid implementation. Next we need to append the UI elements to the tool bar, right?
[js]
rendertoolbar:function (toolbar) {
var me = this;
var container = $(“

”);
var input = $(‘

weight: bold;line-height: 28px; min-
width: 80px;padding: 3px 5px 3px 10px;color: #fff; “>Excel

div style=”background-color: #555555;float: left; font-weight: bold;line-
height: 28px; min-width: 80px;padding: 3px 5px 3px 10px;color: #fff; margin-
left: 3px;” id=”print” >Print’);
toolbar.append(container);
container.append(input);
}
[/js]

Add the preceding function also. 🙂 Now this is how your JQX Grid Implementation must be:
[js]
$(“#jqxgrid”).jqxGrid(
{
width: 900,
source: dataAdapter,
filterable: true,
sortable: true,
pageable: true,
autorowheight: true,
altrows: true,
columnsresize: true,
showtoolbar: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“

”);
var input = $(‘

height: 28px; min-width: 80px;padding: 3px 5px 3px 10px;color: #fff; “>Your First Div

width: 80px;padding: 3px 5px 3px 10px;color: #fff; margin-
left: 3px;” id=”Div2″ >Your Second Div

’);
toolbar.append(container);
container.append(input);
},
columns: [
{ text: ‘Supplier Name’, cellsalign: ‘center’, align: ‘center’, datafield: ‘SupplierName’, width: 110 },
{ text: ‘Name’, columngroup: ‘ProductDetails’, cellsalign: ‘center’, align: ‘center’, datafield: ‘ProductName’
, width: 120 },
{ text: ‘Quantity’, columngroup: ‘ProductDetails’, datafield: ‘Quantity’, cellsformat: ‘d’, cellsalign: ‘cente
r’, align: ‘center’, width: 80 },
{ text: ‘Freight’, columngroup: ‘OrderDetails’, datafield: ‘Freight’, cellsformat: ‘d’, cellsalign: ‘center’,
align: ‘center’, width: 100 },
{ text: ‘Order Date’, columngroup: ‘OrderDetails’, cellsalign: ‘center’, align: ‘center’, cellsformat: ‘d’, da
tafield: ‘OrderDate’, width: 100 },
{ text: ‘Order Address’, columngroup: ‘OrderDetails’, cellsalign: ‘center’, align: ‘center’, datafield: ‘Order
Address’, width: 100 },
{ text: ‘Price’, columngroup: ‘ProductDetails’, datafield: ‘Price’, cellsformat: ‘c2′, align: ‘center’, cellsa
lign: ‘center’, width: 70 },
{ text: ‘Address’, columngroup: ‘Location’, cellsalign: ‘center’, align: ‘center’, datafield: ‘Address’, width
: 120 },
{ text: ‘City’, columngroup: ‘Location’, cellsalign: ‘center’, align: ‘center’, datafield: ‘City’, width: 80 }
],
columngroups: [
{ text: ‘Product Details’, align: ‘center’, name: ‘ProductDetails’ },
{ text: ‘Order Details’, parentgroup: ‘ProductDetails’, align: ‘center’, name: ‘OrderDetails’ },
{ text: ‘Location’, align: ‘center’, name: ‘Location’ }
]
});
[/js]

Now your output looks like the following:

Advanced JQX Grid With All Functionality

What if you want to share this Grid with your friends? For that we have a jQuery share pluggin, Minimal jQuery Plugin For Social Share Buttons – Sharer.

Include the following files from the downloded rar from the preceding link

jquery.sharer.css

jquery.sharer.js

sharer.png

[js]

[/js]

Include the script to your page
[js]
$(“.social-buttons”).sharer();
[/js]

Add a div where you can see the share buttons
[js]

[/js]

Well, that’s all; you have now done everything. We can now see the page as,

Advanced JQX Grid With All Functionality

To set the page size add the following line to your grid settings:
[js]
pagesize: 50,
[/js]

To set the custom pagesize options add the following line to your grid settings:
[js]
pagesizeoptions: [‘5′,’10’,’15’,’20’,’30’,’40’,’50’],
[/js]

To allow resizing of the columns add the following line to your grid settings:
[js]
columnsresize: true,
[/js]

To allow column re-ordering options add the following line to your grid settings:

[js]
columnsreorder: true,
[/js]

Be sure that you added the jqxgrid.columnsreorder.js JavaScript file.

To allow an Excel-like filter add the following line to your grid settings:
[js]
filtermode: ‘excel’,
[/js]

Then you will get a filtering option as follows:

Advanced JQX Grid With All Functionality

To enable the tooltip add the following line to your grid settings
[js]
enabletooltips: true,
[/js]

To apply themes add the following line to your grid settings
[js]
theme: ‘metro’,
[/js]

Please be noted that you must include the style sheet accordingly, In this case you have to include the following
[html]

[/html]

You can find so many CSS in jqwidgets/styles folder.

To enable auto height add the following line to your grid settings
[js]
autoheight: true,
[/js]

To show the default filter icon always add the following line to your grid settings
[js]
autoshowfiltericon: false,
[/js]

Happy Coding 🙂

History

First Version: 20-Oct-2014
Second Version: 23-Oct-2014

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?

Kindest Regards
Sibeesh Venu