895039: addsavebutton

ej2-angular/Release-notes/26.1.38.md

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Angular Weekly Release Release Notes  
+description: Essential Studio for Angular Weekly Release Release Notes  
+platform: ej2-angular
+documentation: ug
+---
+
+# Essential Studio for Angular  Release Notes  
+
+{% include release-info.html date="June 19, 2024"  version="v26.1.38" %}
+
+{% directory path: _includes/release-notes/v26.1.38 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

ej2-angular/Release-notes/26.1.39.md

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Angular Weekly Release Release Notes  
+description: Essential Studio for Angular Weekly Release Release Notes  
+platform: ej2-angular
+documentation: ug
+---
+
+# Essential Studio for Angular  Release Notes  
+
+{% include release-info.html date="June 25, 2024"  version="v26.1.39" %}
+
+{% directory path: _includes/release-notes/v26.1.39 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

ej2-angular/accumulation-chart/getting-started.md

@@ -37,7 +37,7 @@ cd my-app
 Syncfusion packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ).
 
 Currently, Syncfusion provides two types of package structures for Angular components,
-1. Ivy library distribution package [format](https://angular.io/guide/angular-package-format#angular-package-format)
+1. Ivy library distribution package [format](https://angular.dev/tools/libraries/angular-package-format)
 2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.
 
 ### Ivy library distribution package
@@ -77,7 +77,7 @@ Import AccumulationChart module into Angular application(app.module.ts) from the
     import { BrowserModule } from '@angular/platform-browser';
      // import the AccumulationChartModule for the AccumulationChart component
     import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
-    import { AppComponent }  from './app.component';
+    import { AppComponent } from './app/app.component';
 
     @NgModule({
       //declaration of AccumulationChartModule into NgModule

ej2-angular/auto-complete/disabled-items.md

@@ -0,0 +1,43 @@
+---
+layout: post
+title: Disabled Items in Angular AutoComplete component | Syncfusion
+description: Learn here all about Disabled Items in Syncfusion Angular AutoComplete component of Syncfusion Essential JS 2 and more.
+platform: ej2-angular
+control: Disabled Items 
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Disabled Items in Angular AutoComplete component
+
+The AutoComplete provides options for individual items to be either in an enabled or disabled state for specific scenarios. The category of each list item can be mapped through the [disabled](https://ej2.syncfusion.com/angular/documentation/api/auto-complete/#fields) field in the data table. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the `fields.disabled` property.
+
+In the following sample, State are grouped according on its category using `disabled` field.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/autocomplete/getting-started-cs18/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/autocomplete/getting-started-cs18/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/autocomplete/getting-started-cs18" %}
+
+## Disable Item Method
+
+The [disableItem](https://ej2.syncfusion.com/angular/documentation/api/auto-complete/#disableItem) method can be used to handle dynamic changing in disable state of a specific item. Only one item can be disabled in this method. To disable multiple items, this method can be iterated with the items list or array. The disabled field state will to be updated in the [dataSource](https://ej2.syncfusion.com/angular/documentation/api/auto-complete/#datasource), when the item is disabled using this method. If the selected item is disabled dynamically, then the selection will be cleared.
+
+| Parameter | Type | Description |
+|------|------|------|
+| itemHTMLLIElement |  <code>HTMLLIElement</code> |  It accepts the HTML Li element of the item to be removed.  |
+| itemValue | <code>string</code> \| <code>number</code> \| <code>boolean</code> \| <code>object</code> | It accepts the string, number, boolean and object type value of the item to be removed. |
+| itemIndex | <code>number</code> | It accepts the index of the item to be removed. |
+
+## Enabled
+
+If you want to disabled the overall component to set the [enabled](https://ej2.syncfusion.com/angular/documentation/api/auto-complete/#enabled) property to false.
+
+![Disabled AutoComplete Component](../images/autocomplete-disable.png)

ej2-angular/auto-complete/virtual-scroll.md

@@ -41,7 +41,7 @@ In the following example, `text` column from complex data have been mapped to th
 
 ## Binding remote data
 
-The AutoComplete supports retrieval of data from remote data services with the help of `DataManager` component. When using remote data, it initially fetches all the data from the server, triggering the `actionBegin` and `actionComplete` events, and then stores the data locally. During virtual scrolling, additional data is retrieved from the locally stored data, triggering the `actionBegin` and `actionComplete` events at that time as well.
+The AutoComplete supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well.
 
 The following sample displays the OrderId from the `Orders` Data Service.
 
@@ -60,6 +60,27 @@ The following sample displays the OrderId from the `Orders` Data Service.
 
 {% previewsample "page.domainurl/samples/autocomplete/virtual-scroll-remote" %}
 
+## Customizing items count in virtualization 
+
+When the `enableVirtualization` property is enabled, the `take` property provided by the user within the Query parameter at the initial state or during the `actionBegin` event will be considered. Internally, it calculates the items that fit onto the current page (i.e., probably twice the amount of the popup's height). If the user-provided take value is less than the minimum number of items that fit into the popup, the user-provided take value will not be considered.
+
+The following sample shows the example for Customizing items count in virtualization.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/autocomplete/virtual-scroll-items/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/autocomplete/virtual-scroll-items/src/main.ts %}
+{% endhighlight %}
+{% highlight ts tabtitle="template.html" %}
+{% include code-snippet/autocomplete/virtual-scroll-items/src/virtual-scroll.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/autocomplete/virtual-scroll-items" %}
+
 ## Grouping
 
 The AutoComplete component supports grouping with Virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the [groupBy](../api/auto-complete/#fields) field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience. When the data source is bound to remote data, an initial request is made to retrieve all data for the purpose of grouping. Subsequently, the grouped data works in the same way as local data binding virtualization, enhancing performance and responsiveness.

ej2-angular/chart/dynamic-data-update.md

@@ -0,0 +1,86 @@
+---
+layout: post
+title: Dynamic data update in Angular Chart component | Syncfusion
+description: Learn here all about dynamic data update in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more.
+platform: ej2-angular
+control: Dynamic Data Update
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Dynamic data update in Angular Chart component
+
+## Adding a new data point
+
+The `addPoint` method is used to dynamically add a new data point to the chart series. This method is particularly useful when you want to update the chart with a new data point without having to refresh the entire chart. This method takes two parameters:
+
+* The first parameter is the new data point to add to your existing data source.
+* The optional second parameter specifies the animation duration for adding the new data point.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/chart/dynamic-update/add-point/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/chart/dynamic-update/add-point/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/chart/dynamic-update/add-point" %}
+
+## Removing an existing data point
+
+The `removePoint` method is used to dynamically remove a data point from the chart series. This method is particularly useful when you want to update the chart by removing an existing data point without having to refresh the entire chart. This method takes two parameters:
+
+* The first parameter is the index of the data point that needs to be removed from the existing data source.
+* The optional second parameter specifies the animation duration for removing the data point.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/chart/dynamic-update/remove-point/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/chart/dynamic-update/remove-point/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/chart/dynamic-update/remove-point" %}
+
+## Replacing entire data points
+
+To replace the existing data source in the chart with a new data source, you can simply use the `setData` method. This method allows you to replace the existing data points in the chart series with a new set of data points, enabling you to easily update the chart with new information. This method takes two parameters:
+
+* The first parameter is the new set of data points to be updated.
+* The optional second parameter specifies the animation duration for updating the new data source.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/chart/dynamic-update/set-data/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/chart/dynamic-update/set-data/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/chart/dynamic-update/set-data" %}
+
+## Click to add or remove a data point
+
+You can use mouse or touch events to dynamically add or remove data points from an existing data source by clicking on the appropriate position within the chart area. To add a new data point to the existing data source, click anywhere in the chart area, retrieve the x-axis and y-axis information of the clicked location from the `chartMouseClick` event arguments. Then, utilize the `addPoint` method to add a new data point to the existing data source.
+
+To remove a data point from the existing data source, simply click on the desired data point. To achieve this, first, verify whether the clicked data point obtained from `chartMouseClick` already exists in the data source. If it does, remove it by utilizing the `removePoint` method based on its index.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/chart/dynamic-update/click-add-point/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/chart/dynamic-update/click-add-point/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/chart/dynamic-update/click-add-point" %}