Getting Started with Ignite UI igGrid

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">
        <!-- this is where grid will be initialized. -->
    </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.