Three simple steps to work with Ignite UI in Visual Studio

Learn more about Ignite UI here

In this post we will learn to get it started with Ignite UI in three simple steps. We are going to create a simple IG Grid in the visual studio. Essentially we would create a jQuery based web application using the Visual Studio IDE.

image

To create the Grid follow the steps as discussed below.

Step 1

Create a blank web application by choosing ASP.NET Web Application template from the Web tab.

image

On the next screen we need to select Empty template and click ok.

image

Step 2

Once project is created successfully, we need to add reference of the Ignite UI library in the project. There are three different ways we can work with Ignite UI reference.

  1. Use the CDN
  2. Download library and add it to the project
  3. In Visual Studio use the NuGet package manager.

We are going to use NuGet package manager. To use that right click on project and from the context menu choose Manage NuGet Packages. Next search for the Ignite UI.

image

In the search result, we should get the Ignite UI Trial package as shown in the image above. Install the package in the project.

After successful installation of the Ignite UI package, we will find Ignite UI JS files, CSS files etc. being added to the project in the solution explorer. Along with the required file there are two more files are added for the reference.

  1. Ignite-ui-demo.html
  2. Ignite-ii-demo.js

Step 3

Let us go ahead and create two files index.html and index.js for HTML and JavaScript respectively. On the index.html, we need to add following references of the Ignite UI library to bootstrap the application.

Index.html

We added reference of the

  • IG CSS
  • IG theme
  • Jquery
  • Modernizer
  • IG JS files.

Create a simple Ignite UI Grid

To validate the bootstrapping, let us create a simple Grid with the JSON data. On the HTML, we just need a div element. We can create a div element as shown in the listing below:

 

Next we have the data in the JSON format as shown in the listing below.

 

In the real time application JSON data will get downloaded to the application from the REST services or Web API.

Very easily Ignite UI Grid can be created by calling igGrid method on the div element.

 

In the Grid we are setting the following properties

  1. Data source. It is set to the JSON object.
  2. AutogeneratedColumns : It is set to false
  3. Columns : It is set to the object properties which would be the part of the grid
  4. Features: In this property sorting , sorting directions can be set. We will discuss more about this in further posts.

This is what all we need to create a simple IG Grid. I hope you find this post useful. Happy coding.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>