Merge remote-tracking branch 'refs/remotes/IgniteUI/master'

Author: MayaKirova

README.md

@@ -86,6 +86,42 @@ There are two mandatory attributes that need to be set to an Ignite UI control c
 
 In this example `options` attribute points to `gridOptions` property on the application compoment class and `widgetId` points to the `id` property.
 
+### Configuring Top Level Control Options
+
+All top level options are allowed to be set as attributes of an Ignite UI control custom tag. In this case `options` attribute is not mandatory,
+but it is allowed. And if both - `options` and top-level attributes are combined, top-level attributes will override `options`,
+when there are overlapping properties. Also changing top-level attribute will apply the change to the widget, only if the option is settable.
+
+#### Example:
+
+    @Component({
+        selector: 'my-app',
+        template: `<ig-grid
+            [widgetId]='id'
+            [width]='w'
+            [autoCommit]='true'
+            [dataSource]='data'
+            [height]='h'
+            [autoGenerateColumns]='true'
+            >
+        </ig-grid>`,
+        directives: [IgGridComponent]
+    })
+    export class AppComponent {
+        private id: string;
+        private data: any;
+        private w: string;
+        private h: string;
+        private pKey: string;
+
+        constructor() {
+            this.data = Northwind.getData();
+            this.id ='grid1';
+            this.w = '100%';
+            this.h = '400px';
+            this.pKey = 'ProductID';
+        }
+    }
 
 ### Handling events
 

index.html

@@ -201,7 +201,15 @@ <h2>Code...</h2>
 
 		<h2>Samples</h2>
 		<div class="links">
-			<a class="btn btn-default" href="samples/igGrid/igGrid.html">igGrid</a>
+			<div class="btn-group">
+				<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+					igGrid <span class="caret"></span>
+				</button>
+				<ul class="dropdown-menu" role="menu">
+					<li><a href="samples/igGrid/igGrid.html">Default</a></li>
+					<li><a href="samples/igGrid-TopLevelOpts/igGrid-TopLevelOpts.html">Top-level template options</a></li>
+				</ul>
+			</div>
 			<a class="btn btn-default" href="samples/igHierarchicalGrid/igHierarchicalGrid.html">igHierarchicalGrid</a>
 			<a class="btn btn-default" href="samples/igTreeGrid/igTreeGrid.html">igTreeGrid</a>
 			<div class="btn-group">