Client Side Grid – Sibeesh Passion

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