C# Corner MVP Summit 2013 – HTML5 & jQuery Session recap

We had an awesome time at the C# corner MVP Summit 2013, Noida. Every year C# corner MVPs, authors and the experts in this forum meet up and share their knowledge with others. We are glad that we are part of this event this year by being the platinum sponsors. And I had a fantastic time doing the demos for Jason’s session on HTML5 & jQuery. Jason explained about HTML5 – new HTML elements, CSS3 and JavaScript API followed by some amazing features of jQuery library, jQuery widgets, data access & styling. He also demoed the HTML5 video player which seamlessly plays in the browser without having to worry about the plugins.

So here’s a glimpse of the event followed by a quick recap of the demos that I did!

C# Corner MVP awards being announced!

It was a packed room with super experts!

Jason giving out the C# Corner MVP awards!

It’s all about HTML5, jQuery and Ignite UI!

Getting started with my Ignite UI demos!

Expert advice!

Demo: Ignite UI – igGrid & igPieChart

I showed how quickly you can add igGrid & igPieChart on the page, add features, and bind data to it.

Before you get started with igGrid & igPieChart, remember I showed you an awesome feature that Ignite UI provides – the igLoader.

The igLoader is used to load scripts and styles modules. You should specify the CssPath and ScriptPath relative to the page that instantiates the loader and add the loader in jQuery. Also do not forget to set the resources appropriately. In this demo I set the resources to “igGrid.*” so that I get all the features of the grid and loaded. Since I was also showing the demo on igPieChart, I included that too. If you want to know more about igLoader, have a look at the link – getting started with igLoader.

$.ig.loader({

   scriptPath: 'scripts/ig',

    cssPath: 'css/',

    theme: 'Metro',

    resources: 'igGrid.*,igPieChart'

})

Make sure you add HTML elements that will render your grid, piechart, & a slider (jQuery UI slider is used here to show how easy it is to access the api of igPieChart ):

  <p >Radius :

Now here is the full source code of

1. igGrid – bound to a local json data with full features enabled,
2. igPieChart – bound to the same data,
3. jQuery Slider – used to demo accessing the api of igPieChart

$.ig.loader(function(){
    var data= [
        { "Budget": 60, "Label": "Administration" },
        { "Budget": 40, "Label": "Sales" },
        { "Budget": 60, "Label": "IT" },
        { "Budget": 40, "Label": "Marketing" },
        { "Budget": 60, "Label": "Development" },
        { "Budget": 20, "Label": "Support"}]
    $('#grid').igGrid({
        dataSource: data,
        features: [
            {
                name: "Paging",
                type: "local",
                pageSize: 13
            },
            {
                name: "Sorting",
                type: "local"
            },
            {
                name: "Selection"
            },
            {
                name: "Filtering",
                type: "local",
                filterDropDownItemIcons: false,
                filterDropDownWidth: 200
            },
            {
                name: "Updating",
                enableDataDirtyException: false
            },
            {
                name: "Tooltips"
            },
            {
                name: "RowSelectors"

            },
            {
                name: "Resizing"
            },
            {
                name: "Summaries"
            },
            {
                name: "Hiding"
            },
            {
                name: "GroupBy"
            },
            {
                name: "MultiColumnHeaders"
            }
        ]
    });

    $('#chart').igPieChart({
        dataSource: data,
        valueMemberPath: 'Budget',
        labelMemberPath: 'Label',
        explodedSlices: '0 2'
    });

    $('#slider').slider({
        slide: function(evt, ui)
        {
          $('#chart').igPieChart('option','radiusFactor', ui.value / 1000);
        },
        min: 0,
        max: 1000,
    });
});

With Ignite UI you can do a lot more stuffs than you just saw! Check Craig’s blog post for get started videos.

If you have any questions email me nish@infragistics.com or find me on twitter @nishanil.

-Nish