Getting Started with Ignite UI igGrid

Sunny Sharma
8y
6.1k
0
3

Article

Hello everyone, hope you're doing well. I received an Infragistics Ultimate subscription yesterday and I'm really happy about it. It is gifted to every C# Corner MVP. Thank you Casey McGuigan, Infragistics, for the lovely gift and C# Corner for making it happen.

and I was like,

Thus, I happily headed to Infragistics.com, redeemed my coupon and I had the subscription activated in my account. I can explore a whole bunch of applications. They offer a wide range of intuitive UI tools. "JavaScript / HTML5" controls are my first love here and I'm gonna explore them first.

From the list of available downloads, I chose "Ignite UI 2016 Vol.1 Complete Bundle". I downloaded and installed it. To proceed, go to your Program Files > Infragistics > 2016.1 > Ignite UI folder.

Inside the folder, I saw a few folders that contain the files for a variety of projects. The lovely part is, if you're a developer, working with ASP.NET MVC, there's a library available for you.

For now, I wanted to give JS/HTML combination a start. Thus, I created a blank Application. I also pasted a CSS & a JS folder into the project from the above location.

I have highlighte a few of them. Under CSS,you need to add "infragistics.css" from the Structure folder and any theme of your choice from the Themes folder. For the script part, two libraries are required at the basic level: "infragistics.core.js" and "infragistics.lob.js".

Please note that Ignite UI has a dependency on jQuery and jQuery UI. Hence, I added them too, using NuGet commands:

Install-Package jQuery

Install-Package jQuery.UI.Combined

Thus, I wanted to try igGrid, just out of interest. I took a blank HTML5 document and added the following required JS & CSS files:

I also added a container to hold my grid:

OK, the structure is ready now. The time to write the scripts to generate the grid has come and the script is as follows:

Next, initialize the grid and bind the data to it.

As simple as that. I'm just amazed that it allow me to generate a grid, using a couple of lines of the code and nothing more. Wow! Surprisingly, that's all the code I had to write.

Here's the complete HTML for the page:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="css/themes/metro/infragistics.theme.css" rel="stylesheet" />
<link href="css/structure/infragistics.css" rel="stylesheet" />
<script src="Scripts/jquery-3.0.0.js"></script>
<script src="Scripts/jquery-ui-1.11.4.js"></script>
<script src="js/infragistics.core.js"></script>
<script src="js/infragistics.lob.js"></script>
</head>
<body>
<div id="dataGrid">
</div>
<script>
//prepare data
var data = [
{ FirstName: "John", LastName: "M.", ContactNo: "9898989801" },
{ FirstName: "Raj", LastName: "Kumar", ContactNo: "9898989802" },
{ FirstName: "Manoj", LastName: "Sarkar", ContactNo: "9898989803" },
{ FirstName: "Neeraj", LastName: "Pal", ContactNo: "9898989804" },
{ FirstName: "Praveen", LastName: "Yadav", ContactNo: "9898989805" },
{ FirstName: "Shubham", LastName: "Saxena", ContactNo: "9898989806" },
{ FirstName: "Vaibhav", LastName: "Kohli", ContactNo: "9898989807" }
];
//on load
(function ($) {
//initialize the grid
$('#dataGrid')
.igGrid({
dataSource: data
});
})(jQuery);
</script>
</body>
</html>

And I hit F5, and I got this nice looking grid on my screen. Claps for igGrid! Just with a few lines of code you will be able to create a beautiful and responsive grid layout.

igGrid is very flexible and it allows a whole lot of grid customization. That's it for now, hope you loved it too.

Download the sample code from my github repo here.

I will be exploring every option of it and will keep you posted. Follow me for the updates in regards to further posts on Ignite UI. Hope you enjoyed reading this. Please share your valuable feedback in the comments section.

Up Next

Ebook Download

View all

Hands on ASP.NET GridView

Read by 12k people

Download Now!

Learn

View all