Ignite UI Code Sample

This article is an attempt to learn Infragistics Ignite UI [which itself built on jQuery], How powerful features it has and how easily it can be used to achieve many of our UI requirements. Best part of Ignite UI Grid is that it has built in support for Filtering, Column Hiding, Sorting, Column Rearrange, etc with just few lines of code. Including pagination!
Infragistics Ignite UI (formerly Net Advantage for jQuery) includes high-performance ASP.NET MVC and jQuery controls based on CSS3 and HTML5 for Web Developers who need to deliver the best cross-platform user experiences.
The below sample code is to demonstrate few of features and properties:

<!DOCTYPE html>
<html>
<head>
    <title>Ignite Grid Sample</title>
    <!-- Ignite UI Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/structure/infragistics.css" rel="stylesheet" />
    <script src="http://modernizr.com/igsb-highlights/modernizr-latest.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
 
    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.lob.js"></script>
</head>

<body>
  <div class="content-wrapper">
        <!-- the igGrid target element-->  
        <table id="grdIgnite" style="width: auto;"></table>
  </div>
<script type="text/javascript">
    $(function () {
        var data = [
        { "Charactor": "Rajesh koothrappali", "Portrayed by": "Kunal Nayyar", "TV series": "Big Bang Theory" },
        { "Charactor": "Leonard Hofstadter", "Portrayed by": "Johnny Galecki", "TV series": "Big Bang Theory" },
        { "Charactor": "Sheldon Cooper", "Portrayed by": "Jim Parsons", "TV series": "Big Bang Theory" },
        { "Charactor": "Neal Caffrey", "Portrayed by": "Matt Bomer", "TV series": "White Collar" },
        { "Charactor": "Peater Burke", "Portrayed by": "Tim DeKay", "TV series": "White Collar"},
        { "Charactor": "Seeley Booth", "Portrayed by": "David Boreanaz", "TV series": "Bones"},
        { "Charactor": "Brennan Bones", "Portrayed by": "Emily Deschanel", "TV series": "Bones"},
        { "Charactor": "Ted Mosby", "Portrayed by": "Josh Radnor", "TV series": "How I Met Your Mother" },
    { "Charactor": "Barney Stinson", "Portrayed by": "Neil Patrick Harris ", "TV series":"How I Met Your Mother" },
    { "Charactor": "Jake Peralta", "Portrayed by": "Andy Samberg", "TV series": "Brooklyn Nine-Nine" },
        { "Charactor": "Jessica ", "Portrayed by": "Zooey Deschanel ", "TV series": "New Girl"},
        { "Charactor": "Nicholas Miller", "Portrayed by": "Jake Johnson", "TV series": "New Girl" },
        { "Charactor": "Leslie Knope", "Portrayed by": "Amy Poehler", "TV series": "Parks and Recreation" },
        { "Charactor": "Tom Haverford", "Portrayed by": "Aziz Ansari", "TV series": "Parks and Recreation" },
        { "Charactor": "Andy Dwyer", "Portrayed by": "Chris Pratt", "TV series": "Parks and Recreation" },
        { "Charactor": "Ron Swanson", "Portrayed by": "Nick Offerman", "TV series": "Parks and Recreation" }
                ];
        $("#grdIgnite").igGrid({
            caption: 'TV Shows',
            height: "550px",
            width: "900px",
            dataSource: data, //JSON Array           
            features: [
                    {
                        name: 'Filtering'
                    },
                    {
                        name: 'GroupBy'
                    },
                    {
                        name: 'Hiding'
                    },
                    {
                        name: 'Paging',
                        type: 'local',
                        pageSize: 6
                    },
                    {
                        name: "ColumnMoving",
                        mode: "immediate",
                        addMovingDropdown: true,
                        mode: "deferred",
                        type: "render"
                    }
                ]
        });
    });
Advertisements

HTML5 DataList Example

As part of HTML5 specification a new tag has been introduced. Using this tag, we can define a list of data which then can be used as list for an input box. We can create a simple Autocomplete feature using this tag.

<label>Enter Country name:</label>
<input type="text" list="countries" />

<datalist id="countries">
    <option value="Afghanistan">
    <option value="SriLanka">
    <option value="United Kingdom">
    <option value="United States">
    <option value="Chile">
    <option value="Australia">
    <option value="Yemen">
    <option value="Singapore">
    <option value="Zimbabwe">
</datalist>

Not every browser out there supports html5 datalist for now. So far IE 10 and above, Firefox, Chrome and Opera 19 above supports html5 datalist tag.