Jordan Tsankov's blog

A Look Into The Future–Using the Ignite UI Geographic Proportional Symbol Series Map

2012-12-16T16:57:53Z

The Ignite UI map is already a control that boasts a wide variety of features , proving useful in a number of different scenarios. I have been posting about the map’s current capabilities; this post and another one which will follow shortly will shed some light on some upcoming features.

Today we shall be looking into the Proportional Symbol Series – a nice touch on the standard symbol series. With this new type of series , you will be able to visually display some of the series’ item statistics by utilizing the size of the symbol as a visual cue.

Now without further ado – let’s get on with it !

Setup

As with all other jQuery-based controls , you will have to load up a set of required JavaScript scripts in order for the Ignite UI map to work and be rendered.

Here’s the set of includes you need on your webpage , as usual I’m using the CDN-hosted versions; you’re free to use locally-stored files if you wish.

   1: <script src="http://www.modernizr.com/downloads/modernizr-latest.js" type="text/javascript"></script>   1:     2: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript">   1: </script>   2: <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js" type="text/javascript">   1: </script>   2: <script src="js/infragistics.loader.js">   1: </script>   2:     3: <script src="MapHelper.js"></script>

The last file being loaded is a custom script with some useful functions for the Ignite UI map control – they can be used alongside the control’s default methods. Feel free to check the file out – it’s provided in the archived sample on the bottom of this post. You can also see the code here:

   1: function MapHelper(options) {   2: var self = this;   3: //  Initialize with the options supplied   4: this.mapSelector = options.mapSelector;   5: this.shapeDataSource = options.shapeDataSource;   6:     7: // Attaches an event handler which zooms the map so that all map shapes are visible   8: this.autoZoom = function() {   9:     $(document).on("igmaprefreshcompleted", self.mapSelector, autoZoomHandler);  10: }  11:    12: //  Finds the extent of all shapes in the map control and calculates a proper  13: //  map window so that all shapes are visible.  14: //  Detaches from the refreshCompleted event of the map control after   15: //  themap rectangle is set to the map control  16: function autoZoomHandler() {  17:     var shapes = self.getAllShapesExtent();  18:     if (shapes.length > 0) {  19:         var allShapesBounds = self.findShapeArrayBounds(shapes);  20:         var mapWindow = self.calculateMapWindow(allShapesBounds);  21:         $(self.mapSelector).igMap("option", "windowRect", mapWindow);  22:         $(document).off("igmaprefreshcompleted", self.mapSelector, autoZoomHandler);  23:     }  24: }  25:    26: this.mapShapes = function (mapShape) {  27:     var shapeData = self.shapeDataSource;  28:     var shapeEnumerator = shapeData.converter().getEnumerator();  29:     var mappedShapes = [];  30:     while (shapeEnumerator.moveNext()) {  31:         mappedShapes.push(mapShape(shapeEnumerator.current()));  32:     }  33:    34:     return mappedShapes;  35: }  36:    37: this.getAllShapesExtent = function () {  38:     var shapeData = self.shapeDataSource;  39:     var shapeEnumerator = shapeData.converter().getEnumerator();  40:     var shapesArray = [];  41:     while (shapeEnumerator.moveNext()) {  42:         shapesArray.push(shapeEnumerator.current());  43:     }  44:     return shapesArray;  45: }  46:    47: this.findShapeArrayBounds = function(shapeArray) {  48:     //  Store to improve performance and readability  49:     var sCount = shapeArray.length;  50:    51:     if (sCount > 0) {  52:         var left, top, right, bottom;  53:    54:         //  Enumerate shapes  55:         for (var s = 0; s < sCount; s++) {  56:             var currentShapeBounds = self.findShapeBounds(shapeArray[s]);  57:    58:             if (currentShapeBounds.left < left || !left) left = currentShapeBounds.left;  59:             if (currentShapeBounds.right > right || !right) right = currentShapeBounds.right;  60:    61:             if (currentShapeBounds.top > top || !top) top = currentShapeBounds.top;  62:             if (currentShapeBounds.bottom < bottom || !bottom) bottom = currentShapeBounds.bottom;  63:         }  64:    65:         return {  66:             left: left,  67:             right: right,  68:             top: top,  69:             bottom: bottom  70:         };  71:     }  72: }  73:    74: this.findShapeBounds = function(shape) {  75:     var left, top, right, bottom;  76:     var points = shape.points.item(0);  77:     var pCount = points.count();  78:     //  Enumerate shape points  79:     if (pCount > 0) {  80:         //  Find bounds of the state  81:         for (var i = 0; i < pCount; i++) {  82:             currentPoint = points.item(i);  83:    84:             if (currentPoint.__x < left || !left) left = currentPoint.__x;  85:             if (currentPoint.__x > right || !right) right = currentPoint.__x;  86:    87:             if (currentPoint.__y > top || !top) top = currentPoint.__y;  88:             if (currentPoint.__y < bottom || !bottom) bottom = currentPoint.__y;  89:         }  90:    91:         return {  92:             left: left,  93:             right: right,  94:             top: top,  95:             bottom: bottom  96:         };  97:     }  98: }  99:   100: this.calculateMapWindow = function(minViewWindow, zoomRatio) { 101:     if (!zoomRatio) { 102:         zoomRatio = 1; 103:     } 104:     //  Calculate central point and required radius 105:     var width = minViewWindow.right - minViewWindow.left; 106:     var height = minViewWindow.top - minViewWindow.bottom; 107:     var centered = { 108:         longitude: minViewWindow.right - width / 2, 109:         latitude: minViewWindow.top - height / 2, 110:         radius: (width > height) ? width / 2 * zoomRatio : height / 2 * zoomRatio 111:     }; 112:     //  Calculate map window in relative units 113:     var zoomRect = $(self.mapSelector).igMap("getZoomFromGeographic", self.geographicFromCentered(centered)); 114:     return zoomRect; 115: } 116:   117: //  Calculates the geographic coordinates of a square around a central point and radius 118: this.geographicFromCentered = function(centered) { 119:     var geographic = 120:     { 121:         left: centered.longitude - centered.radius, 122:         top: centered.latitude - centered.radius, 123:         width: centered.radius * 2, 124:         height: centered.radius * 2 125:     }; 126:     return geographic; 127: } 128: }

Now , let’s try to understand how does the scaling work.

   1: $.ig.loader({   2:     scriptPath: "./js/",   3:     cssPath: "./css/",   4:     resources: "igMap"   5: });   6:     7: $.ig.loader("igMap", function () {   8:     var worldCitiesSource = new $.ig.ShapeDataSource({   9:         shapefileSource: 'world_cities.shp',  10:         databaseSource: 'world_cities.dbf',  11:         importCompleted: function (shapeSource) {  12:             var helper = new MapHelper({  13:                 mapSelector: "#map",  14:                 shapeDataSource: shapeSource  15:             });  16:             var citiesData = helper.mapShapes(function (shape) {  17:                 return {  18:                     longitude: shape.points.item(0).item(0).__x,  19:                     latitude: shape.points.item(0).item(0).__y,  20:                     name: shape.fieldValues.NAME,  21:                     //  23620000 is the max number in the data  22:                     //  32 is scaling factor -> change to increase/decrease the size of the circles  23:                     population: shape.fieldValues.POPULATION / 23620000 * 32,  24:                     country: shape.fieldValues.COUNTRY,  25:                     isCapital: shape.fieldValues.CAPITAL === "Y"  26:                 };  27:             });  28:             createMap(citiesData);  29:         }  30:     });  31:     worldCitiesSource.dataBind();  32: });  33:    34: function createMap(worldCities) {  35:     $("#map").igMap({  36:         width: "700px",  37:         height: "700px",  38:         verticalZoomable: true,  39:         horizontalZoomable: true,  40:         windowResponse: "immediate",  41:         dataSource: worldCities,  42:         series: [{  43:             type: 'geographicProportionalSymbol',  44:             name: 'worldCities',  45:             latitudeMemberPath: 'latitude',  46:             longitudeMemberPath: 'longitude',  47:             radiusMemberPath: 'population',  48:             markerType: 'automatic' //  It is mandatory to set any kind of marker because the default is (?!) 'none'  49:                                     //  Whatever you set the control will always draw circles of varying size  50:         }]  51:     });  52: }

The first few lines are loading of the appropriate resources , this is present in all of the setups where we use the Infragistics Loader to load our control resource files.

What we do next is we create a shape data source , specifying the location of our shape files. Once the files have been loaded up , we use the shape files source as a parameter to pass to our Map Helper object , which we use to enumerate through the source’s shapes. The symbols’ size is each city’s population value , based on the largest population value in the data source. Once we’ve established a formula for calculating the size of each symbol , we pass the now “prepared” data source to the map initialization function , which we’ve described in the createMap function. It’s just the standard way of initializing the map control.

On line 47 , we’re binding the radius of the symbol shapes to the radius calculating function we defined on line 23. We also define the mandatory latitude and longitude properties , which are needed to pinpoint individual entries within the series.

To download the sample project , click on this link.

Check out my previous blogs on the Ignite UI Map here , here , here and here. And also here.

How to use Contour Line Map Series in Infragistics Ignite UI Map

2012-12-09T20:21:00Z

I have recently covered the Ignite UI symbol & shape series in these two blogs. Today , I will be introducing yet another type of series of the map – the contour line series. This type of series is useful for when you want to illustrate how a set of values are distributed over a region of space on the map. Altitude , precipitation , population – all of these come to mind as being possible scenarios that would call for the use of a contour line series.

Let’s get on with it !

Setup

As with all other Ignite UI components , you will need to include some JavaScript references to your project. My preferred way of doing so is by obtaining them through the Google-hosted CDN. With that out of the way , add a reference to the script loader as well – we’ll use that to fetch the resources we need for the Ignite UI Map.

   1: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>   1:     2: <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js" type="text/javascript">   1: </script>   2: <script src="http://www.modernizr.com/downloads/modernizr-latest.js" type="text/javascript">   1: </script>   2: <script src="js/infragistics.loader.js"></script>

When we’re done with referencing the script files , we’re free to get to the map itself. Now , those of you that have followed recent posts about the Ignite UI Map may have a hunch about what’s coming next – initializing a contour line series map is a lot similar to the shape series one , except there are some additional properties you will need to make use of. We will cover those right away.

   1: $.ig.loader(function () {   2:     $("#map").igMap({   3:         width: "700px",   4:         verticalZoomable: true,   5:         horizontalZoomable: true,   6:         overviewPlusDetailPaneVisibility: "visible",   7:         series: [{   8:             type: "geographicContourLine",   9:             name: "contour",  10:             fillScale: {  11:                 type: "value",  12:                 brushes: ["red", "green", "blue", "yellow"]  13:             },  14:             longitudeMemberPath: "x",  15:             latitudeMemberPath: "y",  16:             valueMemberPath: "val",  17:             dataSource: points  18:         }],  19:         windowResponse: "deferred"  20:     });  21: });

The differences in setup spring up at line 10 – the fillScale property is what is used to specify the brush that will be used to color the shapes in the series. The left-most color and the right-most one will be used for the minimum and maximum values , respectively. The values in between will be colored by mixing in the appropriate brushes , according to the palette provided.

The longitudeMemberPath , latitudeMemberPath and valueMemberPath specify which fields in the data source represent longitute , latitude and value respectively. These will most likely value from data source to data source , so remember to update these accordingly.

Now , you probably noticed that there is also a dataSource property provided too , now here’s something you’ll need to remember when using it. When you supply a dataSource property , it will work with a set of javascript-defined objects such as this one:

   1: var points = [   2: { x: 10, y: 10, val: 1 },   3: { x: 10, y: 0, val: 2 },   4: { x: 0, y: 10, val: 3 },   5: { x: 0, y: 0, val: 4 },   6: { x: 20, y: 20, val: 1 },   7: { x: 20, y: 0, val: 2 },   8: { x: 0, y: 20, val: 3 },   9: { x: 0, y: 0, val: 4 }  10: ];

If , however , you intend on using an .ITF file , you will need to use the triangulationDataSource property and provide a path to your .ITF file. Keep in mind that your server should be able to handle .ITF files – if you’re having errors retrieving the files ( and are using locally-hosted files , of course ) you will most likely need to adjust the handling of the ITF MIME type.

Additionally , there are three properties – triangleMemberVertexPath1 , triangleMemberVertexPath2 and triangleMemberVertexPath3 that are used to define the property names in the ITF file which hold the indexes of the vertices for each triangle. Make use of those as well if you’re working with triangulated files.

Take a look at another sample on this topic on this page.

Or download the example project by following this link.

Drill-Down Using The Ignite UI Map

2012-11-28T19:48:27Z

This blog post will bring the last addition to my series on the Ignite UI Map – this time we’ll look into drill-down functionality.The feature is not something that comes out-of-the-box for the control , so I will present an alternative solution to achieving the same effect.

Drill-down is when a selection of a series item shows up additional series contained within that item , each one bearing distinct data related to it. In this example , we will be using a map of the United States , showing each state’s counties upon selection.

Let’s get on with it !

Implementation

First , as usual , you will need to reference the required JavaScript libraries – we’ll use the CDN-hosted versions of jQuery and Modernizr:

   1: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>   2: <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js" type="text/javascript"></script>   3: <script src="http://www.modernizr.com/downloads/modernizr-latest.js" type="text/javascript"></script>

Of course , we also need to add the Ignite UI /js and /css folders to the project as well , and then add a reference to the Infragistics Loader.

Now , let’s define some bushes and outlines that we will use throughout the process – we’ll need a pair for when the counties series is invisible , a pair for when any of the series is visible and finally a pair for drawing the non-selected states ( when you select a state and view its counties , all the other states are visible yet non-selected )

   1: var outline_visible = "rgba(123,166,180, 1)";   2: var brush_visible = "rgba(173,216,230, 0.5)";   3:     4: var outline_nonselected = "rgba(100, 100, 200, 0.3)";   5: var brush_nonselected = "rgba(200, 200, 200, 0.3)";   6:     7: var outline_invisible = "rgba(255,255,255,0)";   8: var brush_invisible = "rgba(255,255,255,0)";

Next , we will create a styleSelector object that will be used for the styling of the counties. Notice how we use the bushes in direct conjunction with each shape style’s visibility.

   1: function CountiesByStateSelector() {               2:     var _selectedStateFIPS = "";   3:     this.stateFIPS = function (state) {   4:         if (arguments.length == 0) {   5:             return _selectedStateFIPS;   6:         }   7:         else {   8:             _selectedStateFIPS = state;   9:         }  10:     };  11:    12:     this.selectStyle = function (shapeData, shapeProperties) {  13:         // STATE_FIPS is the property in the .dbf files that holds the ID for each county/state  14:         var shapeState = shapeData.fields.item("STATE_FIPS");  15:           16:         if (shapeState === _selectedStateFIPS || _selectedStateFIPS === "") {  17:             shapeProperties.visibility($.ig.Visibility.prototype.visible);  18:             return this.visibleStyle;  19:         }  20:         else {  21:             shapeProperties.visibility($.ig.Visibility.prototype.collapsed);  22:             return this.invisibleStyle;  23:         }  24:     };  25: }  26:    27: CountiesByStateSelector.prototype.invisibleStyle = {  28:     fill: brush_invisible,  29:     stroke: outline_invisible  30: };  31:    32: CountiesByStateSelector.prototype.visibleStyle = {  33:     fill: brush_visible,  34:     stroke: outline_visible  35: };

And finally we’re ready to instantiate the map itself , we do it in a standard way – no beating around the bush with this one , it’s straightforward and you’re probably used to it already. Bear in mind you will need to .shp and .dbf files – one for the state series and one for the county series. Here’s the code snippet:

   1: $.ig.loader({   2:     scriptPath: "./js/",   3:     cssPath: "./css/"   4: });   5:     6: var shapeDataStates;   7: var shapeCounties;   8: $.ig.loader("igMap", function () {   9:     shapeDataStates = new $.ig.ShapeDataSource({  10:         shapefileSource: 'usa_states.shp',  11:         databaseSource: 'usa_states.dbf'  12:     });  13:    14:     shapeCounties = new $.ig.ShapeDataSource({  15:         shapefileSource: 'usa_counties.shp',  16:         databaseSource: 'usa_counties.dbf'  17:     });  18:     shapeDataStates.dataBind();  19:     shapeCounties.dataBind();  20:    21:     $("#map").igMap({  22:         width: "500px",  23:         horizontalZoomable: true,  24:         verticalZoomable: true,  25:         overviewPlusDetailPaneVisibility: "visible",  26:         series: [{  27:             type: 'geographicShape',  28:             name: 'usaStates',  29:             shapeDataSource: shapeDataStates,  30:             markerType: 'none',  31:             outline: outline_visible,  32:             brush: brush_visible  33:         }, {  34:             type: 'geographicShape',  35:             name: 'usaCounties',  36:             shapeDataSource: shapeCounties,  37:             markerType: 'none',  38:             outline: outline_invisible,  39:             brush: brush_invisible  40:         }],  41:         seriesMouseLeftButtonUp: countyInfo,  42:         windowResponse: "deferred",  43:         windowRect: {  44:             left: 0.26,  45:             top: 0.33,  46:             width: 0.1,  47:             height: 0.12  48:         }  49:     });  50: });

Now , some of you might have noticed that we’ve also defined an event handler for one of the series events – seriesMouseLeftButtonUp. This event is what will trigger the drill-down behavior , displaying the corresponding counties for a selected state. Here’s the code for the handler:

   1: function countyInfo(evt, ui) {   2:     clearInfoPanel();   3:     if (!first_run && ui.item.fields.item("COUNTY") != undefined) {   4:         $("#info").append("<p class='infoMap'>State: " + ui.item.fields.item("STATE") + "</p>");   5:         $("#info").append("<p class='infoMap'>County: " + ui.item.fields.item("COUNTY") + "</p>");   6:         $("#info").append("<p class='infoMap'>Square Miles: " + ui.item.fields.item("SQUARE_MIL") + "</p>");   7:     }   8:     if (selectedCountiesSelector.stateFIPS() != ui.item.fields.item("STATE_FIPS")) {   9:         //  Update the map only if another state is selected  10:         selectedCountiesSelector.stateFIPS(ui.item.fields.item("STATE_FIPS"));  11:         first_run = false;  12:           13:         $("#info").append("<p class='infoMap'>State: " + ui.item.fields.item("STATE") + "</p>");  14:         var stateShapes = getStateShapes(selectedCountiesSelector.stateFIPS());  15:         var stateBounds = findShapeArrayBounds(stateShapes);  16:         var mapWindow = calculateMapWindow(stateBounds, 1);  17:    18:         $("#map").igMap("option", "windowRect", mapWindow);  19:    20:         $("#map").igMap("option", "series", [{  21:             name: "usaStates",  22:             outline: outline_nonselected,  23:             brush: brush_nonselected  24:         }]);  25:    26:         //  Initiate repainting of the counties series  27:         $("#map").igMap("option", "series", [{  28:             name: "usaCounties",  29:             shapeStyleSelector: selectedCountiesSelector  30:         }]);  31:     }  32: }

What happens here is that , first , we update a small information frame with data from the currently selected item. The crucial bits are lines 8 & 10 , and then from 14 to 30.

On lines 8 & 10 , we check if the newly selected state is different than the last one and if it is , we save its ID ( in this case called STATE_FIPS ).

Then , on line 14 we use this ID to look up all the shapes for the selected state. We have a function written just for this case.

On line 15 we use these shapes to get the bounds of all the shapes contained within the state.

And on line 16 we reposition the view rectangle ( the map window ) to zoom in on the state that we have selected.

Here are the functions used:

   1: function getStateShapes(stateFIPS) {   2:     //  Finds all shapes in the current data source that have   3:     //  a specific ID (the field is called STATE_FIPS in this case)   4:     var shapeEnumerator = shapeDataStates.converter().getEnumerator();   5:     var shapesArray = [];   6:     while (shapeEnumerator.moveNext()) {   7:         var currentItem = shapeEnumerator.current();   8:         if (currentItem.fields.item("STATE_FIPS") === stateFIPS) {   9:             shapesArray.push(currentItem);  10:         }  11:     }  12:     return shapesArray;  13: }  14:    15: function findShapeArrayBounds(shapeArray) {  16:     //  Store to improve performance and readability  17:     var sCount = shapeArray.length;  18:    19:     if (sCount > 0) {  20:         var left, top, right, bottom;  21:    22:         //  Enumerate shapes  23:         for (var s = 0; s < sCount; s++) {  24:             var currentShapeBounds = findShapeBounds(shapeArray[s]);  25:    26:             if (currentShapeBounds.left < left || !left) left = currentShapeBounds.left;  27:             if (currentShapeBounds.right > right || !right) right = currentShapeBounds.right;  28:    29:             if (currentShapeBounds.top > top || !top) top = currentShapeBounds.top;  30:             if (currentShapeBounds.bottom < bottom || !bottom) bottom = currentShapeBounds.bottom;  31:         }  32:    33:         return {  34:             left: left,  35:             right: right,  36:             top: top,  37:             bottom: bottom  38:         };  39:     }  40: }  41:    42: function findShapeBounds(shape) {  43:     var left, top, right, bottom;  44:     var points = shape.points.item(0);  45:     var pCount = points.count();  46:     //  Enumerate shape points  47:     if (pCount > 0) {  48:         //  Find bounds of the state  49:         for (var i = 0; i < pCount; i++) {  50:             currentPoint = points.item(i);  51:    52:             if (currentPoint.__x < left || !left) left = currentPoint.__x;  53:             if (currentPoint.__x > right || !right) right = currentPoint.__x;  54:    55:             if (currentPoint.__y > top || !top) top = currentPoint.__y;  56:             if (currentPoint.__y < bottom || !bottom) bottom = currentPoint.__y;  57:         }  58:    59:         return {  60:             left: left,  61:             right: right,  62:             top: top,  63:             bottom: bottom  64:         };  65:     }  66: }  67:    68: function calculateMapWindow(minViewWindow, zoomRatio) {  69:     if (!zoomRatio) {  70:         zoomRatio = 1;  71:     }  72:     //  Calculate central point and required radius  73:     var width = minViewWindow.right - minViewWindow.left;  74:     var height = minViewWindow.top - minViewWindow.bottom;  75:     var centered = {  76:         longitude: minViewWindow.right - width / 2,  77:         latitude: minViewWindow.top - height / 2,  78:         radius: (width > height) ? width / 2 * zoomRatio : height / 2 * zoomRatio  79:     };  80:     //  Calculate map window in relative units  81:     var zoomRect = $("#map").igMap("getZoomFromGeographic", geographicFromCentered(centered));  82:     return zoomRect;  83: }  84:    85: //  Calculates the geographic coordinates of a square around a central point and radius  86: function geographicFromCentered(centered) {  87:     var geographic =  88:     {  89:         left: centered.longitude - centered.radius,  90:         top: centered.latitude - centered.radius,  91:         width: centered.radius * 2,  92:         height: centered.radius * 2  93:     };  94:     return geographic;  95: }

And of course , you will need to have a DOM element to render the map into , let’s just use a div. While we’re at it , let’s also make one for the info panel.

   1: <div id="map"></div>   2: <div id="info" style="border: 1px solid black; width: 200px; height: 200px;">Information<br /></div>

And that’s it , you’ve got yourself a drill-down map of the United States !

Download this sample by clicking on this link and play around it it. You’ll see all the code in action.

Additionally , you can view more samples on this page.

How to Use IgniteUI Cascading ComboBox

2012-10-26T08:07:00Z

The introduction of IgniteUI brought a breeze of freshness to most of the existing jQuery controls we had. The Combo Box control now boasts new functionality : being able to set up relationships between the data in different combo boxes. If the options on combo boxes vary depending on the selection in another combo box – cascading will make everything very simple. Let’s see how it’s done.

Usage

First thing’s first , you will need to add a few javascript libraries as references to your project. You can grab all of them , except one , off CDNs:

 1:
//  type="text/javascript">
// ]]>


 2:
//  type="text/javascript">
// ]]>


 3:
//  type="text/javascript">
// ]]>


 4:
// >
// ]]>

To get the Infragistics Loader , go to your Infragistics products installation folder , open up the IgniteUI folder and copy the /css and /js folders into your project. With that done , all the required resources are now present and waiting to be loaded up.

Next up , we’ll want some HTML elements to build the combo boxes on top of – either use a or a .

Parent Combo

<span id="combo1">span>

  

Child Combo

<span id="combo2">span>

And now we’re ready to dive into javascript !

First thing you should do is , of course , load up the required resources for the combo box. Do it by using the Infragistics Loader like this:

$.ig.loader({

    scriptPath: '/js/',

    cssPath: '/css/',

    resources: "igCombo"

});

Now comes the initializing of the combo boxes themselves. I’ll post the code first ( it’s really a few lines ) and then go into detail about the data source targets as they are a bit more tricky.

Here’s the code:

$.ig.loader(function () {

    $("#combo1").igCombo({

        textKey: "type",

        valueKey: "type",

        dataSource: favorites,

        selectedItems: [{ index: 0 }],

    });

  

    $("#combo2").igCombo({

        cascadingDataSources: dict,

        parentCombo: $("#combo1")

    });

});

The textKey & valueKey properties are probably familiar to you , the first combo box is a pretty straightforward one. The second one is defined by using just those two lines of code – the first property tells the combo box which data source holds the different lists of selections. The second property tells it which object ( combo ) holds the corresponding keys that link to these lists of selections.

Here are the arrays in question , defined in a separate data.js file :

favorites = [

    { type: "Food" },

    { type: "Color" },

    { type: "Sport" }

];

  

foods = [

    { type: "Fruits" },

    { type: "Vegetables" },

    { type: "Meat" },

    { type: "Candy" }

];

  

colors = [

    { type: "Red" },

    { type: "Blue" },

    { type: "Orange" },

    { type: "Green" },

    { type: "Yellow" },

    { type: "Black" }

];

  

sports = [

    { type: "Basketball" },

    { type: "Football" },

    { type: "Baseball" },

    { type: "Tennis" }

];

  

dict = {

    "Food": { dataSource: foods, textKey: "type" },

    "Color": { dataSource: colors, textKey: "type" },

    "Sport": { dataSource: sports, textKey: "type" },

};

Right down in the bottom , the dict variable acts as a dictionary which holds all the parent combo’s values as keys and all the related datasources as values. That’s how the child combo box knows which one to load.

Here are a few snaps of how the combo boxes would work.

And here you can download the sample project I made.

Finally , check out the online samples page as well !

Infragistics jQuery Map’s Shape Series: An Introduction

2012-10-10T11:12:00Z

As a follow-up in the series of blogs , this one will be about the other major type of maps – shape series. While the symbol series are all about individual points or “places” , the shape series are meant to define regions. This means that they are very useful for displaying statistical information such as population density in different areas and country boundaries.

If you’ve read the blog about symbol series , then you will for the most part have an idea on how to set this type of map up and I strongly suggest doing so. The following guide will try to explain what the main differences are between shape series and symbol series , as well as explain how to set this type of map up.

Shapefiles

First of all , you will need to supply yourself with a pair of a shapefile and a database file – those are used together in order to define the shape regions. The database file usually may hold additional information for each of the shapes defined.

The .shp file is what holds the geographic reference – all the polygons are defined in this file.

The .dbf file is , as previously mentioned , an attribute file which holds a table. Columns represent different attributes and rows are an entry , per shape , for each attribute.

You can find a lot of shapefiles on the following address: http://www.statsilk.com/maps/download-free-shapefile-maps , they come in a lot of different flavors depending on the data you’re looking to represent.

Setup

Once you have the files , you can now get into defining the Infragistics jQuery Map widget. Here’s the basic properties you need in order to have a working map:

$("#map").igMap({

    width: "100%",

    crosshairVisibility: "visible",

    verticalZoomable: true,

    horizontalZoomable: true,

    overviewPlusDetailPaneVisibility: "visible",

    panModifier: "control",

    backgroundContent: {

        type: "openStreet"

    },

    series: [{

        type: "geographicShape",

        name: "landSeries",

        markerType: "none",

        shapeMemberPath: "points",

        shapefileUri: "path/to/your/shapefile/file.shp",

        databaseUri: "path/to/your/dbf_file/file.dbf",

        brush: "rgba(178,0,0,.4)", // darkish red with high transparency

        outline: "rgba(0,0,0,1)"   // black

    }],

    windowResponse: "immediate"

});

Line 14 , the markerType property is set to none because we won’t actually be displaying any markers. You might remember this is relevant to the symbol series where different series need to have a different marker type so that they could be easily distinguished.

Lines 16 and 17 point to your .shp and .dbf file , respectively.

On lines 18 and 19 , the brush and shape properties describe the color of the fill area and outline of the shapes.

That’s mostly it , if you require a slightly more advanced example – take a look at this one on our official samples page.

You can also download my example by following this link.

How to handle tooltip events in the Infragistics jQuery Map

2012-09-24T11:48:29Z

In this next blog post , we will solve one of the issues we had with displaying information about specific series items back to the user. The way we did it was by using a rather hacky approach which was just to show that it’s indeed doable. Now , let’s go ahead and find out what the intended way was – by using tooltips !

Preparing for tooltips

The tooltips that are being displayed are styled through jQuery’s templating engine. This means that we will need to prepare a template object. To see the mark-up of a template , check the following code sample out:

   1: <script id="officeTemp" type="text/x-jquery-tmpl">   1:     2:     <div>   3:     <table>   4:         <tr>   5:             <td>   6:                 ${item.Country}   7:             </td>   8:         </tr>   9:         <tr>  10:             <td>  11:                 ${item.Name}  12:             </td>  13:         </tr>  14:         <tr>  15:             <td>  16:                Latitude: ${item.Latitude}  17:             </td>  18:         </tr>  19:         <tr>  20:             <td>  21:                Longitude: ${item.Longitude}  22:             </td>  23:         </tr>  24:     </table></script>

The template can consist of any valid HTML mark-up , the choice in our case being a table so that we can get a distinct order in the tooltip information without applying additional styles. The code at lines 6 , 11 , 16 and 21 tells the templating engine to use the current item ( think of it as a collection where the template will be applied to every item ) and fill in rows with properties of that item.

We know to set up our template in this manner since we are familiar with the structure of our series objects – here’s one.

 1: { "Name": "Infragistics Bulgaria Development Lab", "Country": "Bulgaria", "Latitude": 42.641262, "Longitude": 23.334461 }

Now with the template done , we have to enable tooltips on the series we want them to describe. This is done with two lines of code ( 21 and 22 ) :

 1: $.ig.loader(function () { 2:     $("#map").igMap({ 3:         width: "100%", 4:         crosshairVisibility: "visible", 5:         verticalZoomable: true, 6:         horizontalZoomable: true, 7:         overviewPlusDetailPaneVisibility: "visible", 8:         panModifier: "control", 9:         backgroundContent: { 10:             type: "openStreet" 11:         }, 12:         series: [{ 13:             type: "geographicSymbol", 14:             name: "capitals", 15:             dataSource: europeCapitals, 16:             latitudeMemberPath: "Lat", 17:             longitudeMemberPath: "Lon", 18:             markerType: "automatic", 19:             markerBrush: "#FF0000", 20:             markerOutline: "#00FF00", 21:             showTooltip: true, 22:             tooltipTemplate: "officeTemp" 23:         ], 24:         windowResponse: "immediate" 25:     }); 26: });

This will tell the map to use the specific template for this series , which of course means you could have a different template used for another one of your series. You would just need to define a separate new template and then make your other series point to it.

There are a few other things you can use and these are…

Events

The Infragistics jQuery Map tooltips come with a set of events , namely two pairs. There’s two events for when a tooltip is displayed and two events for when a tooltip is getting hidden.

tooltipShowing – fired just when a tooltip is about to be displayed. This event is cancellable.
tooltipShown – fired after a tooltip has been shown. This event is not cancellable.
tooltipHiding – fired just when a tooltip is about to be hidden. This event is cancellable.
tooltipHidden – fired after a tooltip has been hidden. This event is not cancellable.

I will be using the tooltipShowing and tooltipHiding events to show you how to implement an event logger and distinguish which series did the event come from.

First of all , bear in mind that the Showing event is going to be called every time the tooltip is to be displayed – that means even while moving your mouse within the same series item. This means that you will get a long queue of the Showing events where in reality you only need to use one. I’ll show you my way of solving this issue.

 1: $.ig.loader(function () { 2:     var tooltip = false; 3:     $("#map").igMap({ 4:         width: "100%", 5:         crosshairVisibility: "visible", 6:         verticalZoomable: true, 7:         horizontalZoomable: true, 8:         overviewPlusDetailPaneVisibility: "visible", 9:         panModifier: "control", 10:         backgroundContent: { 11:             type: "openStreet" 12:         }, 13:         series: [{ 14:             type: "geographicSymbol", 15:             name: "capitals", 16:             dataSource: europeCapitals, 17:             latitudeMemberPath: "Lat", 18:             longitudeMemberPath: "Lon", 19:             markerType: "automatic", 20:             markerBrush: "#FF0000", 21:             markerOutline: "#00FF00", 22:             showTooltip: true, 23:             tooltipTemplate: "capTemp" 24:         }, 25:         { 26:             type: "geographicSymbol", 27:             name: "igOffices", 28:             dataSource: igOffices, 29:             latitudeMemberPath: "Latitude", 30:             longitudeMemberPath: "Longitude", 31:             markerType: "automatic", 32:             markerBrush: "#000000", 33:             markerOutline: "#00FFFF", 34:             showTooltip: true, 35:             tooltipTemplate: "officeTemp" 36:         }], 37:         windowResponse: "immediate", 38:         seriesMouseLeftButtonUp: function (evt, ui) { 39:             $("#info").append("" + ui.item.Name + " clicked !
"); 40:         }, 41:         tooltipShowing: function (evt, ui) { 42:             if (tooltip) evt.cancel = true; 43:             else { 44:                 $("#info").append("Showing " + ui.item.Name + " tooltip from the " + ui.series.name + " series !
"); 45:                 tooltip = true; 46:             } 47:         }, 48:         tooltipHiding: function (evt, ui) { 49:             $("#info").append("Hiding " + ui.item.Name + " tooltip from the " + ui.series.name + " series !
"); 50:             tooltip = false; 51:         } 52:     }); 53: });

Starting off , at line 2 I have defined my own bool value that will keep track of whether a tooltip is currently displayed or not. This is used from lines 41 to 51.

Line 41 is where we define the event handler for the tooltipShowing event – the one we know we’ll have trouble with. What we’re doing there is we’re checking the boolean variable – if it’s true , then a tooltip has already been shown and we don’t want to call the event again so we cancel it ( this is why we used the cancellable events for this example ). If , however , a tooltip is not currently being displayed – we go ahead and let the event be called , then set the boolean to true in order to prevent the event from being called next time.

Line 48 – this is where we handle hiding of tooltips. This is not a place where events will be “stacked” , so we don’t need to check the boolean. We , however , need to set it to false because every time this event is called , we’re hiding the currently displayed tooltip and making room for a new one to pop up.

Download the enhanced example ( it’s the same as with the first post but now has tooltips added to it ).

Introduction to the jQuery Map

2012-09-12T08:50:00Z

Hey people ! This post , along with four more will try to shed light on the latest addition to the range of Infragistics jQuery controls – the jQuery Map. Albeit in a CTP stage , you can expect to squeeze a lot of use out of this widget. This blog post will focus on the basics of the control and how to use it in your applications and the rest of the topics will be centered on specific features.

Setting the map up

Of course , the first thing you should add to your project is add a reference to the jQuery library. You can use the CDN-hosted jQuery .js file which you will need to put this inside your page header. In there , you should also include a jQueryUI.js reference and a Modernizr reference. Modernizr should be included in your Visual Studio project and as for jQueryUI , you can get yourself a custom build at jQueryUI.

Finally , you will also need to reference our resource loader.

With these files referenced , your header should have these lines of code:

       1: <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

       2: <script type="text/javascript" src="Scripts/jquery-ui-1.8.11.js">

       3: <script type="text/javascript" src="Scripts/modernizr-2.0.6-development-only.js">

       4: <script type="text/javascript" src="Scripts/js/infragistics.loader.js">

Your next step would be using the resource loader to get all the map-specific files loaded up. In case you’re new to NetAdvantage 12.1 , here’s a quick run-down on using the resource loader:

       1: $.ig.loader({

       2:     scriptPath: '{Resources root}/js/',

       3:     cssPath: '{Resources root}/css/',

       4:     resources: '*' // replace the star with desired controls

       5: });

       6:  

       7: // here's an example

       8: $.ig.loader({

       9:     scriptPath: '/Scripts/js/',

      10:     cssPath: '/Content/css/',

      11:     resources: 'igMap'

      12: });

After following these steps , you have completed the setup phase and can move on to…

Rendering a map

Let’s do it baby steps – here are the bare-bones of getting a map on your web page. I will explain the important map options as well.

       1: $.ig.loader(function () {

       2:     $("#map").igMap({

       3:         width: "100%",

       4:         crosshairVisibility: "visible",

       5:         verticalZoomable: true,

       6:         horizontalZoomable: true,

       7:         overviewPlusDetailPaneVisibility: "visible",

       8:         panModifier: "control",

       9:         backgroundContent: {

      10:             type: "openStreet"

      11:         },

      12:         windowResponse: "immediate"

      13:     });

      14: });

The most important option in the lines above is the backgroundContent one – it specifies which map service do you want your widget to work with. Currently , you may choose between openStreet , bing and cloudMade. I have chosen to use OpenStreet in this example because it requires no registration – unlike Bing or CloudMade.

Another useful option is the panModifier – it establishes a key which will switch the mouse drag mode. Instead of panning the map , you will be presented with a selection-like rectangle which lets you define an area to zoom in on.

Here’s a snippet of the resulting map:

As you can see , the map is fine and dandy but it is blank. In order to add an overlay that contains some locations , we will need to explore one more option – series. Within the object scope of this option , you can provide a series of points to be plotted on the map.

Spicing it up

If you only wanted to display an empty map , then you are all set. Yet I believe most of you would want to have some data on there , so let’s get down to describing series. The simplest scenario is having a single set of locations on one map – this is illustrated in the snippet below:

       1: var europeCapitals = [

       2: { "Name": "Copenhagen", "Latitude": 55.676111, "Longitude": 12.56833 },

       3: { "Name": "London", "Latitude": 51.507222, "Longitude": -0.1275 },

       4: { "Name": "Paris", "Latitude": 48.8567, "Longitude": 2.3508 },

       5: { "Name": "Madrid", "Latitude": 40.4, "Longitude": -3.683333 }];

       6:  

       7: $.ig.loader(function () {

       8:     $("#map").igMap({

       9:         width: "100%",

        crosshairVisibility: "visible",

        verticalZoomable: true,

        horizontalZoomable: true,

        overviewPlusDetailPaneVisibility: "visible",

        panModifier: "control",

        backgroundContent: {

            type: "openStreet"

        },

        series: [{

            type: "geographicSymbol",

            name: "capitals",

            dataSource: europeCapitals,

            latitudeMemberPath: "Latitude",

            longitudeMemberPath: "Longitude",

            markerType: "automatic",

            markerBrush: "#FF0000",

            markerOutline: "#00FF00"

        }],

        windowResponse: "immediate

    });

});

The code above has the locations of four different capital cities , which are fed to the map on line 21. Lines 22 and 23 define the names of which properties within your data source hold latitude and longitude information. markerType is something that would be better left off as automatic – it tells the map what types of symbols to put for every entry in the data source – valid options are circle , triangle , square , pyramid , diamond , pentagon , hexagon , tetragram , pentagram and hexagram. These come in handy when you have more extra series you wish to plot – I’ll demonstrate that in a second.

Now , here is what the code above will leave you with:

Again , this is only a snippet of the entire world map – the point was to show you that the locations we’ve described are clearly marked on their respective places. They , however , bear no information to the place they represent unless you decide to actually zoom in on them. A very simple solution to this ( for now , as there will be a blog post regarding another way of handling this issue ) is to use one of the provided events and handle clicks on the series symbols.

This last snippet will show how to include a second series to the map and how to use one of the provided events for the widget to relay information back to the user. Of course , I will try to elaborate on things right after the snippet.

       1: var europeCapitals = [

       2: { "Name": "Copenhagen", "Lat": 55.676111, "Lon": 12.56833 },

       3: { "Name": "London", "Lat": 51.507222, "Lon": -0.1275 },

       4: { "Name": "Paris", "Lat": 48.8567, "Lon": 2.3508 },

       5: { "Name": "Madrid", "Lat": 40.4, "Lon": -3.683333 }

       6: ];

       7:  

       8: var igOffices = [

       9: { "Name": "Infragistics Europe", "Country": "England", "Latitude": 51.53554, "Longitude": -0.45306 },

{ "Name": "Infragistics Bulgaria Development Lab", "Country": "Bulgaria", "Latitude": 42.641262, "Longitude": 23.334461 }

];

  

$.ig.loader(function () {

    $("#map").igMap({

        width: "100%",

        crosshairVisibility: "visible",

        verticalZoomable: true,

        horizontalZoomable: true,

        overviewPlusDetailPaneVisibility: "visible",

        panModifier: "control",

        backgroundContent: {

            type: "openStreet"

        },

        series: [{

            type: "geographicSymbol",

            name: "capitals",

            dataSource: europeCapitals,

            latitudeMemberPath: "Lat",

            longitudeMemberPath: "Lon",

            markerType: "automatic",

            markerBrush: "#FF0000",

            markerOutline: "#00FF00"

        },

        {

            type: "geographicSymbol",

            name: "igOffices",

            dataSource: igOffices,

            latitudeMemberPath: "Latitude",

            longitudeMemberPath: "Longitude",

            markerType: "automatic",

            markerBrush: "#000000",

            markerOutline: "#00FFFF"

        }],

        windowResponse: "immediate",

        seriesMouseLeftButtonUp: function (evt, ui) {

            alert(ui.item.Name);

        }

    });

});

First off , we get a second data source – the company’s office locations in Europe. Then , lines 34 to 43 describe the second series – we’ve given it a different name and a different data source , as well as different brush colors. Lines 45 to 47 describe the event handler discussed earlier. ui.item represents the series item that triggered the event , that’s why we directly display its Name attribute; other accessible properties of the ui object are ui.series , ui.positionX , ui.positionY , ui.actualItemBrush / ui.actualSeriesBrush.

Here you have it , both series displayed on the map. You can see how the control handles marker types automatically – the second series we’ve added got assigned the triangle symbol.

Finally , let’s get through something that some of you probably noticed but couldn’t figure the meaning of. Both of the series objects I have defined up there have a name property defined , which is seemingly useless – it does not show up anywhere and does not really affect the map itself in any way. This , however , lets you address the series through methods that the map widget has , such as the addItem one. Here’s a small example of how to add a new European capital to the existing series:

       1: $("#btn").click(function () {

       2:     $("#map").igMap("addItem", { "Name": "Stockholm", "Lat": 59.329444, "Lon": 18.068611 }, "capitals");

       3: });

You can also use insertItem and removeItem. These three methods automatically notify the widget that the data source has been updated.

   1: .igMap( "insertItem", item:object, index:number, targetName:string );

   2: .igMap( "removeItem", index:number, targetName:string );

And if you update your data sources in run-time ( and not using the two methods above ) , here’s how to trigger notifies that you’ve either inserted or removed an item:

   1: .igMap( "notifyInsertItem", dataSource:object, index:number, newItem:object );

   2: .igMap( "notifyRemoveItem", dataSource:object, index:number, oldItem:object );

Conclusion

I hope this introductory post has helped you grasp the basics of our Infragistics jQuery Map and has motivated you to start toying with it so you can see for yourself the amount of flexibility it offers.

View additional samples for this control here or , perhaps , download my sample project and take a look at it.

Touch Support in NetAdvantage for ASP.NET 12.1

2012-07-25T06:56:00Z

We , the people of today , have mobility rooted deeply into our lives. We are constantly on the move , be it due to work routines or leisure activities. We are also used to being surrounded by high-tech gadgetry – it helps us in our everyday tasks and brings entertainment right at our fingertips , literally. Along came a new way of interacting with devices: enter touch screen. It brought the traditional way of “pointing at” and “touching” things we desire back to a field where peripheral devices were a must. Surely , “mobile” is the new hype and it has settled in for a long ride.

In compliance with this , the 12.1 release of NetAdvantage for ASP.NET brings touch support to the table for every control in the package ( of course , this means the controls that can be interacted with ). As of 12.1 , you should expect the controls to behave very similarly ( sometimes even identically ) on a PC and a mobile device with touch screen.

What this means for you as a developer is that all of your future ASP.NET projects will be tablet-ready , with the controls being able to handle all the corresponding touch device events. While we’re on this subject , I’ll elaborate on what issues you will run into ( and why ) when giving your controls a test drive under a touch environment.

Drag & Drop – there isn’t any. This is not good news , not at all , but there is a good explanation for this one. The default action of a touch device when subjected to a hold-and-move motion ( which is exactly how you would expect to perform a drag and drop on such a device ) is to scroll in the moved direction.

The lack of drag & drop means you’re left without column reordering in the Data Grid and Hierarchical Data Grid – well , it’s there but it won’t work in the conventional way. You will be able to utilize this behavior using the code behind. The same applies for the group by feature. No drag & drop also means you would be better off not to count on the splitter as it is a control that ( unless used for collapsing and expanding page segments ) is entirely reliant on this feature.

Selections – be aware that when working with controls that support multiple selections , this will not function properly on a touch device. To understand why this is so , let’s think about how we select a group of things on a computer.

Drawing a selection rectangle over the desired items – this breaks down to us clicking and holding at the top left point of the desired rectangle and dragging the pointer towards the bottom right point. As we’ve covered in the section above that is about drag & drop , when we try to repeat the same actions on a touch device we will end up with a scroll gesture being performed.
Using the shift and control key modifiers. The shift key lets us specify a from-to range of items whereas control is for a finer selection of multiple items. Well , the issue here is obvious – having these two keys on a device with a touch screen would kill the purpose of a touch screen.

WebVideoPlayer – it’s worth mentioning that the video player will try to fall back to the default device video player if the Modernizr Javascript library is undefined on your page. If , however , you have the library loaded up ( it’s a requirement for the video player to be rendered correctly ) then you will get the WebVideoPlayer , themed accordingly and with all the options coming with it.

With these differences aside , the controls should be performing in similar matter as when interacted with on a PC. Why don’t you try it out and head over to the NetAdvantage for ASP.NET samples page on your tablet and check out how specific controls work.

Using the Infragistics Pivot Grid in a LightSwitch Application

2012-07-05T16:39:00Z

All of you LightSwitch-using people have one more reason to be happy about our 2012.1 release of Infragistics for LightSwitch line – the Pivot Grid makes its appearance and comes to aid with your LoB development. This post will give you the basics on what to do in order to start using this flexible grid in your applications. Bear in mind that I’m using VS 2012 – you may notice that in some of the attached images. I advise you to use VS 2012 as LightSwitch is bundled together with the IDE – you do not need to install it separately.

Let’s get on with it !

Set it up

First off , you should make a new LightSwitch project to test out the pivot grid in. Once you’re done with that , make sure you have the Infragistics extensions enabled for the current project. Assuming they’re off , this is how to enable them for the project ( and all future projects , while we’re at it )

Right click on the project within your Solution Explorer and click on Properties. You shall be presented with the following screen:

Make sure the checkbox corresponding to Infragistics LightSwitch Extensions is marked – you could optionally enable the extensions for all future projects by ticking off the second checkbox in that same row.

For our next step , let us add a data source to the project so we can “wrap” the grid around it and display information. To do this , we right click the Data Sources item in the project ( within the Solution Explorer ) and select Add a Data Source.

Here’s the Solution Explorer showing this current project. Once you’ve taken the steps above , follow the on-screen wizard which will help you choose the type/entities of your data source. After providing the data , we should also provide means of displaying it.

Right click on the Screens item ( the one right under Data Sources ) and choose to Add a Screen. Doing so will take you to the screen selection window where you will have the chance to choose between several different screen types – the one you need is the Editable Grid Screen.

The final step is converting the automatically created data grids into the Infragistics Pivot Grid. When you double-click the newly created screen , the following window should be loaded into your designer:

The little arrow next to the highlighted Data Grid tells us that you can actually change the type of that item. Click on it and select Infragistics Pivot Grid. The highlighted row , as well as the item called Data Grid Row should get updated properly.

That’s it ! When you run your application , this is what will show up on your screen:

The right part of the pivot grid ( the part where you select data to position on the grid ) has been clipped on this image – yet it will be where you expect it to be in your app !

So there you have it – an on-point walkthrough to using the Pivot Grid in LightSwitch applications. Do not hesitate to try it out and drop a comment beneath to say whether it was easy !

Cell Merging in WebDataGrid and WebHierarchicalDataGrid

2012-06-08T10:22:00Z

With the NetAdvantage 12.1 release , all grid controls now have the cell merging feature added to them. This includes NetAdvantage for ASP.NET’s WebDataGrid and WebHierarchicalDataGrid. This post will guide you through using this feature. Damyan Petev wrote a blog post about the same feature used with the jQuery grids so make sure to check that out as well !

What this feature is about is readability. Cells are merged upon sorting a column and what really happens is that repeated values are grouped under a single entry. It looks something like this:

Notice that the Country column is sorted , also notice how there are only two entries in – this is an improvement over the following grid:

On the first screen , it is much easier to quickly identify repeating values ( since they are just marked with a blank entry where there should be one ). It would also be a lot easier to notice “odd one out” – have a single different value in a long list of repeating values.

Enabling cell merging

Since this feature comes in use when a column is sorted , you enable it in the Behaviors tag. You should need enable Sorting and just toggle on the property responsible for cell merging – here is how you do it in code:

<ig:WebDataGrid runat="server" Height="350px" Width="600px" ID="webDataGrid" 

    AutoGenerateColumns="False" DataSourceID="SqlDataSource1">

    <Columns>

        <ig:BoundDataField DataFieldName="EmployeeID" Key="EmployeeID">

            <Header Text="Employee ID" />

        </ig:BoundDataField>

        <ig:BoundDataField DataFieldName="FirstName" Key="FirstName">

            <Header Text="First Name" />

        </ig:BoundDataField>

        <ig:BoundDataField DataFieldName="LastName" Key="LastName">

            <Header Text="Last Name" />

        </ig:BoundDataField>

        <ig:BoundDataField DataFieldName="Country" Key="Country">

            <Header Text="Country" />

        </ig:BoundDataField>

    </Columns>

    <Behaviors>

        <ig:Sorting Enabled="True" EnableCellMerging="True" SortingMode="Multi"></ig:Sorting>

    </Behaviors>

</ig:WebDataGrid>

On line 18 , the sorting feature is defined and the cell merging property is set to true. With this done , you enable both sorting and cell merging. You could still have the old sorting functionality by not enabling cell merging – you can not , however , only have cell merging enabled on a column. In case you’re wondering , the SortingMode property defines whether or not you can sort more than one column at a time. When you have it set to Multi , you can hold down the Control key on your keyboard and click on multiple columns – all of them will become sorted.

Working with the WebHierarchicalGrid is no different than the WebDataGrid. You need to keep in mind that if you require cell merging on all child grids , you will need to define the behavior for each hierarchical level. Here’s an example of a grid with no cell merging:

And now , here’s the same grid with sorting and cell merging. Please note how both the child grid and the root level grid are sorted and have the sorted columns with merged cells.

To make the transition , you need the following code. It does not differ from the way you enable cell merging for a WebDataGrid , except now you have to do it for every child grid as well.

<ig:WebHierarchicalDataGrid runat="server" Height="350px" Width="600px" 

    ID="webHierarchicalGrid" DataSourceID="WebHierarchicalDataSource1" AutoGenerateColumns="true">

    <Bands>

        <ig:Band DataMember="AccessDataSource1_DefaultView" DataKeyFields="EmployeeID" AutoGenerateColumns="true">

            <Behaviors>

                <ig:Sorting Enabled="true" EnableCellMerging="true" SortingMode="Multi" />

            </Behaviors>

        </ig:Band>

    </Bands>

    <Behaviors>

        <ig:Sorting Enabled="true" EnableCellMerging="true" SortingMode="Multi"></ig:Sorting>

    </Behaviors>

</ig:WebHierarchicalDataGrid>

On line 6 we take care of the sorting & cell merging issue for the first level child grids. Further down , line 11 , we do the same for root level. Sorting is independent on all levels – selected columns will not reset if you interact with a different level grid.

Metro Style Support in NetAdvantage for XAML 2012 Vol.1

2012-06-04T12:04:00Z

The 12.1 release of NetAdvantage for XAML brings Metro support to the table. With this addition , you can now develop Metro-styled applications using all the benefits of our Infragistics components–without losing any style !

First off , the Metro theme that is provided with the 12.1 release has improved support for touch gestures. The interaction zones have been improved – smaller components such as arrows and handles have been made bigger.

Comparing the two calendar controls , it’s clear that the one on the right will provide better experience on a touch device. Separate components within the control are well-defined ( the year selector and today’s date at the bottom ) and the text is sharper.

Let’s take a look at the grid as well:

The grid with the Metro theme stands out with less detail on the layout itself but more focus on the content. The icons and text are high contrast and stand out more – as per Metro design guidelines.

Finally , let’s take a look at a slider.

As with the other controls , this one has components that are easy on the eye and easily accessible on a touch device – the handle is bigger and the buttons’ zones are actually bigger than the ones in the original grid ( you might be thrown away by the fact they are borderless , yet they are wider – this is again following the Metro conventions )

Here’s a preview of the controls that support the Metro theme

To apply the theme , you can fire up your color tuner – check out this article about it – and select the project you need. Both the color tuner and the Metro theme come with the 12.1 release of NetAdvantage for WPF / Silverlight , so you should have no issues with setting the theme as soon as you get the new version.

You can preview the Metro theme for all of the supported controls by going to the Silverlight samples page , selecting a control and going to Features List –> Visual –> Style –> Theming.

How to use the Infragistics Color Tuner in XAML Applications

2012-05-14T19:19:00Z

In the 12.1 release of NetAdvantage for Silverlight , developers may now start using the Infragistics Color Tuner to style their applications. The Color Tuner is a Visual Studio add-in that lets you pick a color palette that you can apply to any and all the controls within your project with just two clicks ! And the beauty of all this is that the color tuner requires no additional setup – you can instantly use it as soon as you get the 12.1 version. It integrates with already existing projects as well !

In order to bring up the Color Tuner panel , you have to do the following thing:

With your Visual Studio open , go to View > Other Windows > Infragistics Color Tuner. Having done that , you should be presented with the following window

This is the project selection pane. In here , you will see all the currently loaded projects that the Color Tuner can apply a theme to – basically all your XAML projects.

Once you settle on which project you want to enhance visually , click away on the corresponding Modify Theme button to be taken to the second pane. That is where things get interesting !

What you see is the theme selector. The top part displays the themes you’ve got installed with your NetAdvantage suite. At the bottom , you have your custom themes that you have saved. The 3 distinct themes you see here can be modified by providing a different baseline color – you can then save the new theme for later use.

Now , if you select Use on any theme , you shall be taken to the controls selection. Let’s see what that window looks like…

In here you see all the available XAML controls that can be styled. The ones that are present in your selected project ( and can have their appearance changed by the selected theme ) will automatically be selected for you. Bear in mind that not all controls are affected by different styles. Once you get past this window , the style will be applied – the required files will be pulled into your project and referenced within your App.xaml file.

Alternatively , you can also click on Color Tune / Edit on any of the themes and it will bring you to this panel:

This right here is the color tuner , literally. Based on which theme you selected , you will be presented with its palette and also the option to select a baseline color. This baseline color will then be used to alter the original palette in either of the two possible options – by blending it with each color in the palette or by using its hue and saturation values and replacing the values in the palette.

If you look at my Themes Selection image above , you will see that I have a modified Metro palette – I used a green baseline color and then used hue/saturation replacement.

Hopefully , you now know how to use the Infragistics Color Tuner – and will have a lot effort cut off of your styling endeavors ! Give this a go and see how easy it is to use for yourself.

How to use the Infragistics jQuery Pie Chart

2012-05-03T09:16:00Z

With the arrival of the 12.1 release of Infragistics for jQuery , the Pie Chart control is no longer in a CTP state. This brings an amazing opportunity to display quantitative relations in an easily-understandable way. After reading this blog post , you should have enough knowledge on how to operate the Pie Chart control.

Where to start

First thing’s first , you’ll need to load the required files so that the chart gets rendered properly. As of 12.1 , you’ve got the Infragistics Loader to do that for you. What you need to do is put this bit of code in your header file:

<script type="text/javascript">

    $.ig.loader({

        scriptPath: 'Scripts/js/',

        cssPath: 'Styles/css/',

        resources: 'igPieChart'

    });

</script>

This means that you’ll need to move the /js/ and /css/ folders into your project setup. If you need some additional help on using the Infragistics Resource Loader – take a look at this post by Atanas Dyulgerov !

With all the required files now loaded , your next step is getting some data for the chart. We need some object that have some sort of a label and also a numeric value.

var data = [

    { Item: "Bread", Amount: 30 },

    { Item: "Butter", Amount: 40 },

    { Item: "Cheese", Amount: 50 }

];

This will suffice. The Item property will be used as a label for the slices of our pie chart; Amount is the property that will determine how big each slice will be. What’s next is , yup , instantiating the chart. Here’s how you do it:

$('#chart1').igPieChart({

    dataSource: data,

    width: '500px',

    height: '500px',

    valueMemberPath: 'Amount',

    labelMemberPath: 'Item',

    radiusFactor: .5,

    legend: { element: 'legend', type: 'item' }

});

The valueMemberPath should be set to point to the property name holding the numeric values – in our case Amount. labelMemberPath represents each slice’s label so we set it to be Item. Then at line 7 you see an option called radiusFactor. This determines the scaling of the pie chart itself. The width and height property you’ve set are for the entire widget; with radiusFactor you change how should the chart inside scale off of those. Setting the radiusFactor to 1 will make the circle as big as the biggest dimension ( width or height or both if they’re equal ).

Right at line 8 , you see the legend property. Let’s get over this really quick.

When you define this property, you must specify an element which will be used for the legend to get rendered inside – in our case it’s an empty div.

<div id="chart1"></div>

<div id="legend"></div>

One of these is used , as you may see in the JavaScript snippet above , to hold the chart. The second one is used for the legend. When you preview the page , you should get something that looks like this:

There you have it – the Infragistics for jQuery Pie Chart in a few simple steps. Next up , let’s talk about some slightly more intricate topics.

Events

One of the really useful events you can manipulate is the sliceClick one. It provides information about the slice that has been clicked , as well as the pie chart itself. Here’s an example of using the event for “exploding” a slice – whenever a slice has been clicked , it will stand out a bit more. We’ll also grab the slice’s value so we can display it as well. Here’s the code:

sliceClick: function (evt, ui) {

    ui.slice.isExploded = !ui.slice.isExploded;

    if (ui.slice.isExploded) $("#value").text(ui.slice.item.Amount);

}

What we’re doing is we’re just changing the state of the clicked slice – making it exploded if it wasn’t and vice versa. Line 3 checks whether the slice is exploded and if it is , we fetch the residing item’s numeric value and display it. Here’s what the entire thing looks like:

Using Checkbox Columns with the Infragistics jQuery Grid

2012-04-26T18:43:00Z

Coming with the 12.1 release of the Infragistics jQuery product line is a new feature for both the jQuery Grid and jQuery Hierarchical Grid. Checkbox columns let your grid render boolean variables as checkboxes – this way you don’t need to map the true/false values to meaningful text before displaying in a grid.

The difference

With a standard grid setup at hand , let’s see how it deals with boolean values within the data source. We have the following array of objects:

var data = [

    { Item: "Bread", InStock: true },

    { Item: "Butter", InStock: false },

    { Item: "Cheese", InStock: true },

    { Item: "Chocolate", InStock: false }

];

And then you have a straightforward Infragistics Grid setup that’s used to display this data.

$("#grid1").igGrid({

    dataSource: data,

    autoGenerateColumns: false,

    width: "400px",

    columns: [

             { headerText: "Product", key: "Item", dataType: "string" },

             { headerText: "In Stock", key: "InStock", dataType: "bool" }

        ],

    features: [

        { 

            name: "Updating",

            enableAddRow: false,

            enableDeleteRow: false

        }

    ]

});

The “In Stock” column will display the values just as they are – true / false. Which is okay but it certainly can be a bit better. Here’s what the grid looks like right now:

In update mode , you get a dropdown menu when clicking on any of the “In Stock” column’s rows. It will let you change the value of that certain item to true or false.

In this exact case it makes almost no difference whether we have to select items from the dropdown individually for every row – there are only a limited amount of rows present.

Imagine , however , that we had a few thousand entries and again you need to update certain values. The entire process becomes so much easier when the column holding boolean values looks like this:

And editing these values now is simple as double-clicking on the checkbox and then clicking done !

The implementation

In order to get the checkboxes in place of the true/false values , you will need to modify your Infragistics jQuery Grid setup to look like this:

$("#grid1").igGrid({

   dataSource: data,

   autoGenerateColumns: false,

   renderCheckboxes: true,

   width: "400px",

   columns: [

            { headerText: "Product", key: "Item", dataType: "string" },

            { headerText: "In Stock", key: "InStock", dataType: "bool" }

       ],

   features: [

       { 

           name: "Updating",

           enableAddRow: false,

           enableDeleteRow: false

       }

   ]

});

Notice line 4 – this property tells the grid to render all columns with dataType: "bool” in them as checkboxes. You don’t need to change anything else to make the grid work like this – the renderCheckboxes property affects the Updating feature as well.

Adding expand/collapse animations to WebHierarchicalDataGrid

2012-03-29T19:09:00Z

What we’ll cover in this post is adding an animation to the expand and/or collapse actions within an Infragistics WebHierarchicalDataGrid. Utilizing this visual effect is literally a one-liner and will not interfere with your existing code in any way – it’s just possible that you’ve missed on this feature while browsing the control samples.

How to do it

So you’ve got an Infragistics Hierarchical Grid control on your page , right? If not , just drag one over from the toolbox. Chances are you’ve got something like this on your page now:

<ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid1" runat="server" Height="350px"

    Width="400px">

</ig:WebHierarchicalDataGrid>

Don’t forget that you also need a ScriptManager control in order for most of the Infragistics controls to work. Pull one of those over to your page if you don’t have one. Then all you need to add is this line of code somewhere inside the WebHierarchicalGrid tags:

<ExpandCollapseAnimation SlideOpenDirection="Horizontal" SlideCloseDirection="Horizontal"

SlideOpenDuration="1000" SlideCloseDuration="1000" />

What you’ve got there is an element defining the type of animation you want and the duration of said animation.

You can see the two attributes called SlideOpenDirection and SlideCloseDirection. Those two have a total of four possible values:

Horizontal – nodes expand from left to right and collapse in the opposite direction.
Vertical – nodes expand from top to bottom and collapse in the opposite direction.
Both – nodes expand from the top left , going towards the bottom right corner and collapse in the opposite direction.
Auto – the control picks an animation direction for its nodes

Instead of slide animations , you can have nodes within the hierarchical grid fade in and out. To achieve this , you got two other sets of attributes you can use – FadeOpenEquationType and FadeCloseEquationType. These have a set of possible values as well – here they are:

Bounce – nodes “blink” when expanded and collapsed.
EaseIn – nodes gradually become visible when expanded and gradually fade out when collapsed. The animation starts out slow and then speeds up.
EaseOut – nodes gradually become visible when expanded and gradually fade out when collapsed. The animation starts out fast and then slows down.
Linear – nodes gradually become visible when expanded and gradually fade out when collapsed .The animation maintains constant speed throughout its length.

Regardless of whether you have SlideOpen & SlideClose / FadeOpen & FadeClose , you have a matching set of attributes that let you define the duration of each animation. For example , if you have SlideClose , you will want to use SlideCloseDuration to specify how long you want the animation to run for. These attributes take a value as a parameter , and that value is treated as milliseconds.

View the control samples on animation by clicking on this link.