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

Bind Json Data to JQWidget JQX Grid

SibeeshVenu — Thu, 18 Jun 2015 09:12:56 +0000

Introduction

Hi All, How are you today? Today we will learn how we can bind a Json data to JQWidget, JQX Grid. I hope you will like it.

Downloads

Download the source files here: BindJSONToGrid.rar

Background

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

Using the code

Here I am using Visual Studio 2012. We will have a txt file in which we will have the JSON data, you can use this file or you can manually load Json data from server side.

So let us start

First of all we must include the needed files for the grid.

[html]

[/html]

No we can start the grid implementation. For that create a ready function and add the codes as follows.
[js]

[/js]

Now what else we need? Yes, we need to create a div where we can render our grid.

[html]

Bind Json Data to JQwidgets JQX grid – Sibeesh Passion

[/html]

What about our data? We have not seen our data right?

[js]
[{"AreaCode":"B697-31","Revenue":12747128.190000001},{"AreaCode":"B697-92","Revenue":7922559.1600000048},{"AreaCode":"B697-76","Revenue":7541039.540000001},{"AreaCode":"B697-46","Revenue":7076495.5800000066},{"AreaCode":"B553-131","Revenue":5738816.5099999979},{"AreaCode":"B553-193","Revenue":4608556.52},{"AreaCode":"B697-74","Revenue":3895194.1099999994},{"AreaCode":"D158-233","Revenue":3572808.989999996},{"AreaCode":"B697-78","Revenue":3512657.6999999937},{"AreaCode":"B672-31","Revenue":2955916.9800000032},{"AreaCode":"B553-46","Revenue":2806813.7100000042}]
[/js]

All set now. So shall we see the grid now?

Output

Things to remember

Make sure that your data type is json in source object.

[js]
datatype: "json"
[/js]

Make sure your json is valid

Conclusion

I hope you will like this article. Please share me your valuable thoughts and comments. Your feedback is always welcomed.

Thanks in advance. Happy coding!

Kindest Regards
Sibeesh Venu

Bind JSON to Grid – Sibeesh Passion

Convert JSON Data Into Data Grid Columns

Bind Json Data to JQWidget JQX Grid

Bind Json Data to JQwidgets JQX grid – Sibeesh Passion