diff --git a/angular/DropDownList/SettingDimension.md b/angular/DropDownList/SettingDimension.md index 02cd6ab7..1ca565c7 100644 --- a/angular/DropDownList/SettingDimension.md +++ b/angular/DropDownList/SettingDimension.md @@ -1,13 +1,13 @@ --- layout: post -title: Demension in DropDownList widget -description: Setting Dimensions to DropDownList widget +title: Setting Demension in Angular DropDownList Control | Syncfusion +description: Learn here about Setting Dimensions in Syncfusion Essential Angular DropDownList Control, its elements, and more. platform: Angular control: DropDownList documentation: ug --- -# Setting dimensions +# Setting dimensions in Angular DropDownList ## Widget Sizing @@ -67,10 +67,9 @@ export class DropDownListComponent { this.count = 3; } } - {% endhighlight %} -![](SettingDimension_images/SettingDimension_img1.png) +![Angular DropDownList popup resize](SettingDimension_images/SettingDimension_img1.png) ## Popup resizing @@ -166,6 +165,6 @@ export class DropDownListComponent { {% endhighlight %} -![](SettingDimension_images/SettingDimension_img2.png) +![Angular DropDownList setting dimension](SettingDimension_images/SettingDimension_img2.png) -![](SettingDimension_images/SettingDimension_img3.png) \ No newline at end of file +![Angular DropDownList dimension](SettingDimension_images/SettingDimension_img3.png) \ No newline at end of file diff --git a/angular/Grid/ContextMenu.md b/angular/Grid/ContextMenu.md index a575bd96..87670d67 100644 --- a/angular/Grid/ContextMenu.md +++ b/angular/Grid/ContextMenu.md @@ -1,13 +1,13 @@ --- layout: post title: Context Menu with Grid widget for Syncfusion Essential Angular-2 -description: How to enable contextMenu and its functionalities +description: Learn here about context menu support in Syncfusion Essential Angular Grid Control, its elements, and more. platform: Angular control: Grid documentation: ug api: api/angular/ejgrid --- -# Context Menu +# Context Menu in Angular Grid Context menu is used to improve user action with Grid using popup menu. It can be shown by defining [`contextMenuSettings.enableContextMenu`](https://help.syncfusion.com/api/angular/ejgrid#members:contextmenusettings-enablecontextmenu "contextMenuSettings.enableContextMenu") as true. Context menu has option to add default items in [`contextMenuSettings.contextMenuItems`](https://help.syncfusion.com/api/angular/ejgrid#members:contextmenusettings-contextmenuitems "contextMenuSettings.contextMenuItems") and customized items in [`contextMenuSettings.customContextMenuItems`](https://help.syncfusion.com/api/angular/ejgrid#members:contextmenusettings-customcontextmenuitems "contextMenuSettings.customContextMenuItems"). @@ -184,17 +184,17 @@ export class GridComponent { {% endhighlight %} -![](Context-Menu_images/ContextMenu_img1.png) +![Angular Grid caption](Context-Menu_images/ContextMenu_img1.png) {:catption} Contextmenu at header -![](Context-Menu_images/ContextMenu_img2.png) +![Angular Grid ontextmenu at header](Context-Menu_images/ContextMenu_img2.png) {:catption} Contextmenu at body -![](Context-Menu_images/ContextMenu_img3.png) +![Angular Grid Contextmenu at body](Context-Menu_images/ContextMenu_img3.png) {:caption} Contextmenu at pager @@ -250,7 +250,7 @@ export class GridComponent { {% endhighlight %} -![](Context-Menu_images/ContextMenu_img4.png) +![Angular Grid Sub Context Menu](Context-Menu_images/ContextMenu_img4.png) ## Sub Context Menu @@ -302,7 +302,7 @@ export class GridComponent { } {% endhighlight %} -![](Context-Menu_images/ContextMenu_img5.png) +![Angular Grid Sub Context Menu with Template](Context-Menu_images/ContextMenu_img5.png) ## Sub Context Menu with Template @@ -367,4 +367,4 @@ Place the js-render template in the "index.html" page. {% endhighlight %} -![](Context-Menu_images/ContextMenu_img5.png) +![Angular Grid context menu](Context-Menu_images/ContextMenu_img5.png) diff --git a/angular/Grid/Getting-Started.md b/angular/Grid/Getting-Started.md index edfb8711..1125cdca 100644 --- a/angular/Grid/Getting-Started.md +++ b/angular/Grid/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started for Angular-2 Grid -description: How to create the Grid, data bind, enable paging, grouping, filtering and add summaries +title: Getting Started with Angular Grid Control | Syncfusion +description: Learn here about getting started with Syncfusion Essential Angular Grid Control, its elements, and more. platform: Angular control: Grid documentation: ug @@ -9,7 +9,7 @@ keywords: ejGrid, Grid, Grid widget api: /api/Angular/grid --- -# Getting started +# Getting started with Angular Grid To get start with how to use the Grid component within Angular-2 platform, please refer the basic requisites and the configurations needs to be done on the system from [here](https://help.syncfusion.com/angular/gettingstarted/getting-started-systemjs).By following the above steps in the document, you can get the newly cloned **angular2-seeds** template sample folder.Grid control has been already configured in that **angular2-seeds** folder. So that you can use already existing Grid sample available in **src/grid** folder. @@ -65,7 +65,7 @@ If you want to know about the external and internal dependencies of the Grid con {% endhighlight %} -![](Getting-started_images/Getting-started2_img1.jpeg) +![Angular Grid Data Binding](Getting-started_images/Getting-started2_img1.jpeg) {:.image } N> 1.In the above code snippet, `ej-grid` denotes the control directive for the Syncfusion's Grid Angular widget and all its properties can be initialized with the exact casing of original property names also binded within square bracket(`[]`).(For example, [dataSource]). @@ -115,7 +115,7 @@ N> 2.Events can be bound to the control using the event name within bracket [`() {% endhighlight %} -![](Getting-started_images/Getting-started2_img2.png) +![Angular Grid Enable Paging](Getting-started_images/Getting-started2_img2.png) {:.image } N> Pager settings can be customized by using the `pageSize` of [`pageSettings`](http://help.syncfusion.com/api/angular/ejgrid#members:pagesettings-pagesize) property. When it is not given the default values for `pageSize` and `pageCount` are 12 and 8 respectively. @@ -160,7 +160,7 @@ N> Pager settings can be customized by using the `pageSize` of [`pageSettings`]( {% endhighlight %} -![](Getting-started_images/Getting-started2_img3.png) +![Angular Grid Enable Filtering](Getting-started_images/Getting-started2_img3.png) {:.image } ## Enable Grouping @@ -202,7 +202,7 @@ N> Pager settings can be customized by using the `pageSize` of [`pageSettings`]( {% endhighlight %} -![](Getting-started_images/Getting-started2_img4.png) +![Angular Grid Enable Grouping](Getting-started_images/Getting-started2_img4.png) {:.image } Refer to the following code example for initial grouping. @@ -243,7 +243,7 @@ export class AppComponent { {% endhighlight %} -![](Getting-started_images/Getting-started2_img5.png) +![Angular Grid grouping](Getting-started_images/Getting-started2_img5.png) {:.image } @@ -294,5 +294,5 @@ export class AppComponent { {% endhighlight %} -![](Getting-started_images/Getting-started2_img6.png) +![Angular Grid Add Summaries](Getting-started_images/Getting-started2_img6.png) {:.image }