Documenting grid feature tags

Fixes #174

Author: mpavlinov

README.md

@@ -123,7 +123,51 @@ when there are overlapping properties. Also changing top-level attribute will ap
         }
     }
 
-### Aply new set of Control Options
+### Other custom tags
+
+There are two custom tags `<column>` and `<features>` that are used in igGrid/igTreeGrid/igHierarchicalGrid to configure the `columns` and `features` options accordingly.
+
+#### Example:
+
+		<ig-grid [widgetId]='id'>
+			<column [key]="'ProductID'" [headerText]="'Product ID'" [width]="'165px'" [dataType]="'number'"></column>
+			<column [key]="'ProductName'" [headerText]="'Product Name'" [width]="'250px'" [dataType]="'string'"></column>
+			<column [key]="'QuantityPerUnit'" [headerText]="'Quantity per unit'" [width]="'250px'" [dataType]="'string'"></column>
+			<column [key]="'UnitPrice'" [headerText]="'Unit Price'" [width]="'100px'" [dataType]="'number'"></column>
+			<features>
+				<paging [pageSize]="currPageSize"></paging>
+				<filtering></filtering>
+                <selection></selection>
+                <group-by></group-by>
+			</features>
+		</ig-grid>
+
+Each of the grids features is also represented by a custom tag.
+
+#### Examples:
+
+|  Feature Name      |          Tag              |
+|--------------------|---------------------------|
+| ColumnMoving       | `<column-moving>`         |
+| Filtering          | `<filtering>`             |
+| GroupBy            | `<group-by>`              |
+| Hiding             | `<hiding>`                |
+| CellMerging        | `<cell-merging>`          |
+| AppendRowsOnDemand | `<append-rows-on-demand>` |
+| MultiColumnHeaders | `<multi-column-headers>`  |
+| Paging             | `<paging>`                |
+| Responsive         | `<responsive>`            |
+| Resizing           | `<resizing>`              |
+| RowSelectors       | `<row-selectors>`         |
+| Selection          | `<selection>`             |
+| Sorting            | `<sorting>`               |
+| Summaries          | `<summaries>`             |
+| ColumnFixing       | `<column-fixing>`         |
+| Tooltips           | `<tooltips>`              |
+| Updating           | `<updating>`              |
+
+
+### Apply new set of Control Options
 
 In order to change the more options at once (or recreate the component with another set of options), the new configuration can be applied to the `options` property.
 

src/igniteui.angular2.ts

@@ -102,8 +102,7 @@ export class Feature<Model> {
 
 	constructor(el: ElementRef) {
 		this._el = el;
-		let nodeName = el.nativeElement.nodeName.toLowerCase();
-		this.name  = nodeName.charAt(0).toUpperCase() + nodeName.slice(1);
+		this.name  = this.normalizeName(el.nativeElement.nodeName.toLowerCase());
 		this.featureName = "igGrid" + this.name;
 		for (var propt in jQuery.ui["igGrid" + this.name].prototype.events) {
 			this[propt] = new EventEmitter();
@@ -171,6 +170,14 @@ export class Feature<Model> {
 			return jQuery.proxy(feature[name], feature);
 		}
 	}
+
+	normalizeName(str) {
+		//convert hyphen to camelCase
+		let name = str.replace(/-([a-z])/g, function (group) {
+			return group[1].toUpperCase();
+		})
+		return name.charAt(0).toUpperCase() + name.slice(1);
+	}
 }
 
 @Directive({
@@ -424,7 +431,7 @@ export class IgGridUpdatingFeature extends Feature<IgGridUpdating> {
 }
 
 @Directive({
-	selector: 'groupBy',
+	selector: 'group-by',
 	inputs: ["disabled","create","groupByAreaVisibility","initialExpand","emptyGroupByAreaContent","emptyGroupByAreaContentSelectColumns","expansionIndicatorVisibility","groupByLabelWidth","labelDragHelperOpacity","indentation","defaultSortingDirection","groupedColumns","resultResponseKey","groupedRowTextTemplate","type","groupByUrlKey","groupByUrlKeyAscValue","groupByUrlKeyDescValue","summarySettings","columnSettings","expandTooltip","collapseTooltip","removeButtonTooltip","modalDialogGroupByOnClick","modalDialogGroupByButtonText","modalDialogCaptionButtonDesc","modalDialogCaptionButtonAsc","modalDialogCaptionButtonUngroup","modalDialogCaptionText","modalDialogDropDownLabel","modalDialogRootLevelHierarchicalGrid","modalDialogDropDownButtonCaption","modalDialogClearAllButtonLabel","emptyGroupByAreaContentSelectColumnsCaption","modalDialogDropDownWidth","modalDialogDropDownAreaWidth","modalDialogAnimationDuration","modalDialogWidth","modalDialogHeight","modalDialogButtonApplyText","modalDialogButtonCancelText","useGridColumnFormatter","persist","groupByDialogContainment","dialogWidget","inherit"],
 	outputs: ["groupedColumnsChanging","groupedColumnsChanged","modalDialogMoving","modalDialogClosing","modalDialogClosed","modalDialogOpening","modalDialogOpened","modalDialogContentsRendering","modalDialogContentsRendered","modalDialogButtonApplyClick","modalDialogButtonResetClick","modalDialogGroupingColumn","modalDialogGroupColumn","modalDialogUngroupingColumn","modalDialogUngroupColumn","modalDialogSortGroupedColumn"]
 })
@@ -523,7 +530,7 @@ export class IgGridGroupByFeature extends Feature<IgGridGroupBy> {
 }
 
 @Directive({
-	selector: 'columnMoving',
+	selector: 'column-moving',
 	inputs: ["disabled","create","columnSettings","mode","moveType","addMovingDropdown","movingDialogWidth","movingDialogHeight","movingDialogAnimationDuration","movingAcceptanceTolerance","movingScrollTolerance","scrollSpeedMultiplier","scrollDelta","hideHeaderContentsDuringDrag","dragHelperOpacity","movingDialogCaptionButtonDesc","movingDialogCaptionButtonAsc","movingDialogCaptionText","movingDialogDisplayText","movingDialogDropTooltipText","movingDialogDropTooltipMarkup","dropDownMoveLeftText","dropDownMoveRightText","dropDownMoveFirstText","dropDownMoveLastText","movingToolTipMove","featureChooserSubmenuText","columnMovingDialogContainment","dialogWidget","inherit"],
 	outputs: ["columnDragStart","columnDragEnd","columnDragCanceled","columnMoving","columnMoved","movingDialogOpening","movingDialogOpened","movingDialogDragged","movingDialogClosing","movingDialogClosed","movingDialogContentsRendering","movingDialogContentsRendered","movingDialogMoveUpButtonPressed","movingDialogMoveDownButtonPressed","movingDialogDragColumnMoving","movingDialogDragColumnMoved"]
 })