Merge pull request #175 from IgniteUI/issue-174

Fixing issue 174

Author: kdinev

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"]
 })
@@ -1034,6 +1041,63 @@ export class IgGridTooltipsFeature extends Feature<IgGridTooltips> {
 	public id(): string { return; } ;
 }
 
+@Directive({
+	selector: 'append-rows-on-demand',
+	inputs: ["type","chunkSize","recordCountKey","chunkSizeUrlKey","chunkIndexUrlKey","defaultChunkIndex","currentChunkIndex","loadTrigger","loadMoreDataButtonText"],
+	outputs: ["rowsRequesting","rowsRequested"]
+})
+export class IgGridAppendRowsOnDemandFeature extends Feature<IgGridAppendRowsOnDemand> {	
+	constructor(el: ElementRef) {
+		super(el);
+	}
+
+    /**
+      * Destroys the append rows on demand widget
+     */
+    public destroy(): void { return; } ;
+
+    /**
+      * Loads the next chunk of data.
+     */
+    public nextChunk(): void { return; } ;
+}
+
+@Directive({
+	selector: 'multi-column-headers',
+	inputs: ["inherit"],
+	outputs: ["groupCollapsing","groupCollapsed","groupExpanding","groupExpanded"]
+})
+export class IgGridMultiColumnHeadersFeature extends Feature<IgGridMultiColumnHeaders> {	
+	constructor(el: ElementRef) {
+		super(el);
+	}
+
+    /**
+      * Destroys the widget
+     */
+    public destroy(): void { return; } ;
+
+    /**
+      * Collapses an expanded group. If the group is collapsed, the method does nothing.
+	  * Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.
+     */
+	public collapseGroup(groupKey: string, callback?: Function): void { return; } ;
+    /**
+	  * Expands a collapsed group. If the group is expanded, the method does nothing.
+	  * Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.
+     */
+	public expandGroup(groupKey: string, callback?: Function): void { return; } ;
+    /**
+      * Returns multicolumn headers array. if there aren"t multicolumn headers returns undefined.
+     */
+	public getMultiColumnHeaders(): Array<Column> { return; } ;
+    /**
+      * Toggles a collapsible group.
+	  * Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.
+     */
+	public toggleGroup(groupKey: string, callback?: Function): void { return; } ;
+}
+
 @Directive({
 	selector: 'features'
 })
@@ -1054,6 +1118,8 @@ export class Features implements AfterContentInit {
 	@ContentChild(IgGridSummariesFeature) summaries: IgGridSummariesFeature;
 	@ContentChild(IgGridColumnFixingFeature) columnFixing: IgGridColumnFixingFeature;
 	@ContentChild(IgGridTooltipsFeature) tooltips: IgGridTooltipsFeature;
+	@ContentChild(IgGridAppendRowsOnDemandFeature) appendRowsOnDemand: IgGridAppendRowsOnDemand;
+	@ContentChild(IgGridMultiColumnHeadersFeature) multiColumnHeaders: IgGridMultiColumnHeaders;
 
   	ngAfterContentInit() {
 		  		this.filtering ? this.allFeatures.push(this.filtering): null;
@@ -1064,16 +1130,16 @@ export class Features implements AfterContentInit {
 				this.moving ? this.allFeatures.push(this.moving): null;
 				this.hiding ? this.allFeatures.push(this.hiding): null;
 				this.responsive ? this.allFeatures.push(this.responsive): null;
-				this.responsive ? this.allFeatures.push(this.responsive): null;
+				this.cellMerging ? this.allFeatures.push(this.cellMerging): null;
 				this.resizing ? this.allFeatures.push(this.resizing): null;
 				this.selection ? this.allFeatures.push(this.selection): null;
 				this.rowSelectors ? this.allFeatures.push(this.rowSelectors): null;
 				this.summaries ? this.allFeatures.push(this.summaries): null;
 				this.columnFixing ? this.allFeatures.push(this.columnFixing): null;
 				this.tooltips ? this.allFeatures.push(this.tooltips): null;
+				this.appendRowsOnDemand ? this.allFeatures.push(this.appendRowsOnDemand): null;
+				this.multiColumnHeaders ? this.allFeatures.push(this.multiColumnHeaders): null;
   }
-
-
 }
 
 export class IgControlBase<Model> implements DoCheck {
@@ -5684,7 +5750,7 @@ export class IgSpreadsheetComponent extends IgControlBase<IgSpreadsheet> {
 }
 
 @NgModule({
-	declarations: [Column,IgGridSortingFeature,IgGridFilteringFeature,IgGridPagingFeature,IgGridUpdatingFeature,IgGridGroupByFeature,IgGridColumnMovingFeature,IgGridHidingFeature,IgGridCellMergingFeature,IgGridResponsiveFeature,IgGridResizingFeature,IgGridSelectionFeature,IgGridRowSelectorsFeature,IgGridSummariesFeature,IgGridColumnFixingFeature,IgGridTooltipsFeature,Features,IgGridComponent,IgTreeGridComponent,IgHierarchicalGridComponent,IgComboComponent,IgCheckboxEditorComponent,IgCurrencyEditorComponent,IgDateEditorComponent,IgDatePickerComponent,IgMaskEditorComponent,IgNumericEditorComponent,IgPercentEditorComponent,IgTextEditorComponent,IgTreeComponent,IgDialogComponent,IgSplitterComponent,IgLayoutManagerComponent,IgTileManagerComponent,IgHtmlEditorComponent,IgValidatorComponent,IgPivotDataSelectorComponent,IgPivotGridComponent,IgDataChartComponent,IgPieChartComponent,IgDoughnutChartComponent,IgFunnelChartComponent,IgRadialGaugeComponent,IgZoombarComponent,IgMapComponent,IgSparklineComponent,IgBulletGraphComponent,IgLinearGaugeComponent,IgQRCodeBarcodeComponent,IgUploadComponent,IgPopoverComponent,IgNotifierComponent,IgRatingComponent,IgVideoPlayerComponent,IgRadialMenuComponent,IgSplitButtonComponent, IgSpreadsheetComponent, IgSchedulerComponent],
-	exports: [Column,IgGridSortingFeature,IgGridFilteringFeature,IgGridPagingFeature,IgGridUpdatingFeature,IgGridGroupByFeature,IgGridColumnMovingFeature,IgGridHidingFeature,IgGridCellMergingFeature,IgGridResponsiveFeature,IgGridResizingFeature,IgGridSelectionFeature,IgGridRowSelectorsFeature,IgGridSummariesFeature,IgGridColumnFixingFeature,IgGridTooltipsFeature,Features,IgGridComponent,IgTreeGridComponent,IgHierarchicalGridComponent,IgComboComponent,IgCheckboxEditorComponent,IgCurrencyEditorComponent,IgDateEditorComponent,IgDatePickerComponent,IgMaskEditorComponent,IgNumericEditorComponent,IgPercentEditorComponent,IgTextEditorComponent,IgTreeComponent,IgDialogComponent,IgSplitterComponent,IgLayoutManagerComponent,IgTileManagerComponent,IgHtmlEditorComponent,IgValidatorComponent,IgPivotDataSelectorComponent,IgPivotGridComponent,IgDataChartComponent,IgPieChartComponent,IgDoughnutChartComponent,IgFunnelChartComponent,IgRadialGaugeComponent,IgZoombarComponent,IgMapComponent,IgSparklineComponent,IgBulletGraphComponent,IgLinearGaugeComponent,IgQRCodeBarcodeComponent,IgUploadComponent,IgPopoverComponent,IgNotifierComponent,IgRatingComponent,IgVideoPlayerComponent,IgRadialMenuComponent,IgSplitButtonComponent, IgSpreadsheetComponent, IgSchedulerComponent]
+	declarations: [Column,IgGridSortingFeature,IgGridFilteringFeature,IgGridPagingFeature,IgGridUpdatingFeature,IgGridGroupByFeature,IgGridColumnMovingFeature,IgGridHidingFeature,IgGridCellMergingFeature,IgGridResponsiveFeature,IgGridResizingFeature,IgGridSelectionFeature,IgGridRowSelectorsFeature,IgGridSummariesFeature,IgGridColumnFixingFeature,IgGridTooltipsFeature,IgGridAppendRowsOnDemandFeature,Features,IgGridComponent,IgTreeGridComponent,IgHierarchicalGridComponent,IgComboComponent,IgCheckboxEditorComponent,IgCurrencyEditorComponent,IgDateEditorComponent,IgDatePickerComponent,IgMaskEditorComponent,IgNumericEditorComponent,IgPercentEditorComponent,IgTextEditorComponent,IgTreeComponent,IgDialogComponent,IgSplitterComponent,IgLayoutManagerComponent,IgTileManagerComponent,IgHtmlEditorComponent,IgValidatorComponent,IgPivotDataSelectorComponent,IgPivotGridComponent,IgDataChartComponent,IgPieChartComponent,IgDoughnutChartComponent,IgFunnelChartComponent,IgRadialGaugeComponent,IgZoombarComponent,IgMapComponent,IgSparklineComponent,IgBulletGraphComponent,IgLinearGaugeComponent,IgQRCodeBarcodeComponent,IgUploadComponent,IgPopoverComponent,IgNotifierComponent,IgRatingComponent,IgVideoPlayerComponent,IgRadialMenuComponent,IgSplitButtonComponent, IgSpreadsheetComponent, IgSchedulerComponent],
+	exports: [Column,IgGridSortingFeature,IgGridFilteringFeature,IgGridPagingFeature,IgGridUpdatingFeature,IgGridGroupByFeature,IgGridColumnMovingFeature,IgGridHidingFeature,IgGridCellMergingFeature,IgGridResponsiveFeature,IgGridResizingFeature,IgGridSelectionFeature,IgGridRowSelectorsFeature,IgGridSummariesFeature,IgGridColumnFixingFeature,IgGridTooltipsFeature,IgGridAppendRowsOnDemandFeature,Features,IgGridComponent,IgTreeGridComponent,IgHierarchicalGridComponent,IgComboComponent,IgCheckboxEditorComponent,IgCurrencyEditorComponent,IgDateEditorComponent,IgDatePickerComponent,IgMaskEditorComponent,IgNumericEditorComponent,IgPercentEditorComponent,IgTextEditorComponent,IgTreeComponent,IgDialogComponent,IgSplitterComponent,IgLayoutManagerComponent,IgTileManagerComponent,IgHtmlEditorComponent,IgValidatorComponent,IgPivotDataSelectorComponent,IgPivotGridComponent,IgDataChartComponent,IgPieChartComponent,IgDoughnutChartComponent,IgFunnelChartComponent,IgRadialGaugeComponent,IgZoombarComponent,IgMapComponent,IgSparklineComponent,IgBulletGraphComponent,IgLinearGaugeComponent,IgQRCodeBarcodeComponent,IgUploadComponent,IgPopoverComponent,IgNotifierComponent,IgRatingComponent,IgVideoPlayerComponent,IgRadialMenuComponent,IgSplitButtonComponent, IgSpreadsheetComponent, IgSchedulerComponent]
 })
 export class IgniteUIModule {}