diff --git a/angularjs/Button/Customization.md b/angularjs/Button/Customization.md index 7ae8c50d..52f60227 100644 --- a/angularjs/Button/Customization.md +++ b/angularjs/Button/Customization.md @@ -1,13 +1,13 @@ --- layout: post -title: Easy Customization -description: Easy Customization +title: Easy Customization in AngularJS Button Control | Syncfusion +description: Learn here about Easy Customization in Syncfusion Essential AngularJS Button Control, its elements, and more. platform: AngularJS control: Button documentation: ug --- -# Easy Customization +# Easy Customization in AngularJS Button Button being used in all applications, button size, content and content location is varies based on each application. Here you can see some customizable options available for button control. @@ -42,7 +42,7 @@ You can bound the buttons of different size using e-size property. Here, we have Run the above code to get the below output. -![](customization_images/size.png) +![AngularJS Button Content Type](customization_images/size.png) ## Content Type @@ -79,7 +79,7 @@ Button control supports built-in icon libraries. The icons are added inside a bu Run the above code to get the below output. -![](customization_images/content-type.png) +![AngularJS Button Image position ](customization_images/content-type.png) ## Image position @@ -112,7 +112,7 @@ The e-imagePosition property of the button allows you to position the image with Run the above code to get the below output. -![](customization_images/image-position.png) +![AngularJS Button type](customization_images/image-position.png) ## Button Type @@ -179,5 +179,5 @@ The e-timeInterval property is used to specify the time Interval for triggering Run the above code to get the below output. -![](customization_images/repeat-button.png) +![AngularJS Button customization](customization_images/repeat-button.png) diff --git a/angularjs/Button/Getting-Started.md b/angularjs/Button/Getting-Started.md index feebd1c6..2e831d2a 100644 --- a/angularjs/Button/Getting-Started.md +++ b/angularjs/Button/Getting-Started.md @@ -1,13 +1,13 @@ --- layout: post title: Getting-Started | Button | AngularJS | Syncfusion -description: getting started +description: Learn here about getting started with Syncfusion Essential AngularJS Button Control, its elements, and more. platform: AngularJS control: Button documentation: ug --- -# Getting Started +# Getting Started with AngularJS Button This section explains you briefly on how to create a **Button** in your application with **JavaScript**. Essential JavaScript Button helps to display a Button widget within a web page and allows you to Click, Toggle Click, Reset, and Submit. The following example illustrates how to customize Button control in a Media Player and Office Ribbon Application. diff --git a/angularjs/Diagram/Automatic-Layout.md b/angularjs/Diagram/Automatic-Layout.md index 48315e04..8d24ebe5 100644 --- a/angularjs/Diagram/Automatic-Layout.md +++ b/angularjs/Diagram/Automatic-Layout.md @@ -1,13 +1,13 @@ --- layout: post -title: Layout nodes and connectors in an organized structure -description: How to arrange nodes by using the automatic layouts?. +title: Automatic Layout in AngularJS Diagram Control | Syncfusion +description: Learn here about automatic layout in Syncfusion Essential AngularJS Diagram Control, its elements, and more. platform: AngularJS control: Diagram documentation: ug --- -# Automatic Layout +# Automatic Layout in AngularJS Diagram Diagram provides support to auto-arrange the nodes in the Diagram area that is referred as **Layout**. It includes the following layout modes. @@ -109,7 +109,7 @@ syncApp.controller('diagramCtrl', function($scope) { {% endhighlight %} -![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img1.png) +![AngularJS Diagram Radial Tree Layout](Automatic-Layout_images/Automatic-Layout_img1.png) N> You can ignore a particular Node from layout arrangement by setting its **excludeFromLayout** property as true. @@ -309,7 +309,7 @@ syncApp.controller('diagramCtrl', function($scope) { {% endhighlight %} -![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img2.png) +![AngularJS Diagram Organizational Chart](Automatic-Layout_images/Automatic-Layout_img2.png) ## Organizational Chart @@ -483,7 +483,7 @@ syncApp.controller('diagramCtrl', function($scope) { {% endhighlight %} -![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img3.png) +![AngularJS Diagram GetLayoutInfo](Automatic-Layout_images/Automatic-Layout_img3.png) Organizational chart layout starts parsing from root and iterate through all its child elements. ‘getLayoutInfo’ method provides necessary information of a node’s children and the way to arrange (direction, orientation, offsets, etc.) them. You can customize the arrangements by overriding this function as explained. @@ -540,13 +540,13 @@ The following table illustrates the different chart orientations and chart types | Orientation | Type | Description | Example | |---|---|---|---| -| Horizontal | Left | Arranges the child nodes horizontally at the left side of parent. | ![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img4.png) | -| | Right | Arranges the child nodes horizontally at the right side of parent. | ![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img5.png) | -| | Center | Arranges the children like standard tree layout orientation. | ![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img6.png) | -| | Balanced | Arranges the leaf-level child nodes in multiple rows. | ![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img16.png) | -| Vertical | Left | Vertically arranges the children at the left side of parent | ![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img7.png) | -| | Right | Vertically arranges the children at the right side of parent | ![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img8.png) | -| | Alternate | Vertically arranges the children at both left and right sides of parent | ![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img9.png) | +| Horizontal | Left | Arranges the child nodes horizontally at the left side of parent. | ![Horizontal Left](Automatic-Layout_images/Automatic-Layout_img4.png) | +| | Right | Arranges the child nodes horizontally at the right side of parent. | ![Horizontal Right](Automatic-Layout_images/Automatic-Layout_img5.png) | +| | Center | Arranges the children like standard tree layout orientation. | ![Horizontal Center](Automatic-Layout_images/Automatic-Layout_img6.png) | +| | Balanced | Arranges the leaf-level child nodes in multiple rows. | ![Horizontal Balanced](Automatic-Layout_images/Automatic-Layout_img16.png) | +| Vertical | Left | Vertically arranges the children at the left side of parent | ![Vertical Left](Automatic-Layout_images/Automatic-Layout_img7.png) | +| | Right | Vertically arranges the children at the right side of parent | ![Vertical Right](Automatic-Layout_images/Automatic-Layout_img8.png) | +| | Alternate | Vertically arranges the children at both left and right sides of parent | ![Horizontal Alternate](Automatic-Layout_images/Automatic-Layout_img9.png) | The following code example illustrates how to set the vertical right arrangement to the leaf level trees. @@ -677,7 +677,7 @@ syncApp.controller('diagramCtrl', function($scope) { {% endhighlight %} -![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img10.png) +![AngularJS Diagram Assistant](Automatic-Layout_images/Automatic-Layout_img10.png) ### Assistant @@ -771,7 +771,7 @@ syncApp.controller('diagramCtrl', function($scope) { {% endhighlight %} -![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img11.png) +![AngularJS Diagram Customize Layout](Automatic-Layout_images/Automatic-Layout_img11.png) ## Customize Layout @@ -830,7 +830,7 @@ syncApp.controller('diagramCtrl', function($scope) { {% endhighlight %} -![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img14.png) +![AngularJS Diagram Layout Margin](Automatic-Layout_images/Automatic-Layout_img14.png) ### Layout Margin @@ -882,7 +882,7 @@ syncApp.controller('diagramCtrl', function($scope) { {% endhighlight %} -![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img15.png) +![AngularJS Diagram Layout Orientation](Automatic-Layout_images/Automatic-Layout_img15.png) ### Layout Orientation @@ -925,7 +925,7 @@ syncApp.controller('diagramCtrl', function($scope) { {% endhighlight %} -![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img12.png) +![AngularJS Diagram Fixed Node](Automatic-Layout_images/Automatic-Layout_img12.png) ### Fixed Node @@ -987,7 +987,7 @@ syncApp.controller('diagramCtrl', function($scope) { {% endhighlight %} -![](/angularjs/Diagram/Automatic-Layout_images/Automatic-Layout_img13.png) +![AngularJS Diagram Expand and collapse](Automatic-Layout_images/Automatic-Layout_img13.png) ### Expand and collapse diff --git a/angularjs/Dialog/action-buttons.md b/angularjs/Dialog/action-buttons.md index 977d9bd2..b3bfe78d 100644 --- a/angularjs/Dialog/action-buttons.md +++ b/angularjs/Dialog/action-buttons.md @@ -1,13 +1,13 @@ --- layout: post -title: Syncfusion Dialog action-buttons -description: action buttons +title: Action buttons in AngularJS Dialog Control | Syncfusion +description: Learn here about action buttons support in Syncfusion Essential AngularJS Dialog Control, its elements, and more. platform: AngularJS control: Angular- Dialog documentation: ug --- -## Action Buttons +# Action Buttons in AngularJS Dialog The Dialog component provides the following action buttons. @@ -39,7 +39,7 @@ You can display only the necessary buttons in the Dialog component by configurin ![Action Buttons](action-buttons_images\action-buttons_img1.png) -### Customizing Action Buttons +## Customizing Action Buttons We can customize the action buttons in dialog component. diff --git a/angularjs/Kanban/Overview.md b/angularjs/Kanban/Overview.md index 0c41cfcc..ab8e6a12 100644 --- a/angularjs/Kanban/Overview.md +++ b/angularjs/Kanban/Overview.md @@ -1,13 +1,13 @@ --- -title: Kanban - Overview -description: Kanban Introduction +title: Overview of AngularJS Kanban Control | Syncfusion +description: Learn here all about overview of Syncfusion Essential AngularJS Kanban Control, its elements, and more. platform: AngularJS control: Kanban documentation: ug keywords: ejkanban, overview, kanban board, js kanban --- -# Overview +# Overview of AngularJS Kanban The Kanban control is an efficient way to visualize the workflow at each stage along its path to completion. The most important features available are Swim lane, filtering, and editing. diff --git a/angularjs/ReportViewer/Getting-Started.md b/angularjs/ReportViewer/Getting-Started.md index 0ed00aaf..3604bc15 100644 --- a/angularjs/ReportViewer/Getting-Started.md +++ b/angularjs/ReportViewer/Getting-Started.md @@ -1,13 +1,13 @@ --- -title: Getting Started with ReportViewer component -description: getting started +title: Getting Started with AngularJS ReportViewer Control | Syncfusion +description: Learn here about getting started with Syncfusion Essential AngularJS ReportViewer Control, its elements, and more. platform: AngularJS control: ReportViewer documentation: ug keywords: ejReportViewer, ReportViewer, js ReportViewer --- -# Getting Started +# Getting Started with AngularJS ReportViewer This section explains briefly about how to create a ReportViewer in your web application with AngularJS. @@ -94,7 +94,7 @@ N> Default RDL Report will be rendered, which is used in the online service. You Run the sample application and you can see the ReportViewer on the page as displayed in the following screenshot. -![](Getting-Started_images/Getting-Started_img1.png) +![AngularJS ReportViewer grouping aggregate](Getting-Started_images/Getting-Started_img1.png) ReportViewer with Grouping Aggregate Report {:.caption} @@ -126,7 +126,7 @@ N> The credential information for Report Server is provided in online service. 2.Run the application and you can see the ReportViewer on the page as displayed in the following screenshot. - ![](Getting-Started_images/Getting-Started_img2.png) + ![AngularJS ReportViewer Load SSRS Server Reports](Getting-Started_images/Getting-Started_img2.png) Report from SSRS {:.caption} @@ -169,7 +169,7 @@ N> Default RDLC Report will be rendered, which is used in the online service. Yo 2.Run the application and you can see the ReportViewer on the page as displayed in the following screenshot. - ![](Getting-Started_images/Getting-Started_img3.png) + ![AngularJS ReportViewer Load RDLC Reports](Getting-Started_images/Getting-Started_img3.png) Area Chart RDLC Report {:.caption}