How to bind JSON data to HTML table using the Ignite UI data source

Learn more about IgniteUI DataSource here

IgniteUI DataSorce or igDataSource is a component of the Ignite UI framework. It binds various UI components to the data of the various forms like JSON, XML etc.

Step 1: Creating the Data

Let us say you have a JSON data as shown in the listing below:

Data could be in the following form,

  1. Plain JavaScript array
  2. JSON object
  3. XML

In real projects data will be pulled in the system from the remote services. Remote service could be WCF, REST or Web API.

Step 2: Create the render function

Let us say we have a requirement to render the data in a HTML table. We have created a HTML table as shown in the listing below:

Next to render the table we need to,

  1. Create template using the jQuery template. In the template we are using the column name from the key of the JSON data.
  2. Attach the template to HTML table
  3. Create data view on the data source and attach to the HTML table

Render table function can be written as shown in the listing below:

Step 3: Create the igDataSource

In the last step we need to create the data source from the JSON data. In Ignite UI, igDataSource connects the data and the view. igDataSource can be created as shown the listing below:

We need to set the value for the datasource and the callback properties. Datasource property is set to the JOSN array and callback property is set to the renderTable function. In the renderTable function we are creating the template and rendering the table.

Running the application

On running the application, we will get JSON data rendered in the HTML table using the igDataSource. Rendered table should look as shown in the image below:

I hope you find this post useful. Thanks for reading.

Read More

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.

Read More