DOCINFRA-2341_merged_using_automation

ej2-asp-core-mvc/Release-notes/26.1.41.md

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for ##Platform_Name## Weekly Release Release Notes  
+description: Essential Studio for ##Platform_Name## Weekly Release Release Notes  
+platform: ej2-asp-core-mvc
+documentation: ug
+---
+
+# Essential Studio for ##Platform_Name##  Release Notes  
+
+{% include release-info.html date="July 09, 2024"  version="v26.1.41" %}
+
+{% directory path: _includes/release-notes/v26.1.41 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

ej2-asp-core-mvc/auto-complete/virtual-scroll.md

@@ -105,6 +105,35 @@ public class BindingRecord
 {% endtabs %}
 {% endif %}
 
+## 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.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/autocomplete/virtual-scroll-items/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="virtualscroll.cs" %}
+{% include code-snippet/autocomplete/virtual-scroll-items/virtualscroll.cs %}
+{% endhighlight %}
+{% endtabs %} 
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/autocomplete/virtual-scroll-items/razor %}
+{% endhighlight %} 
+{% highlight c# tabtitle="virtualscroll.cs" %}
+{% include code-snippet/autocomplete/virtual-scroll-items/virtualscroll.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
 ## 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](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.DropDowns.AutoCompleteFieldSettings~GroupBy.html) 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-asp-core-mvc/code-snippet/autocomplete/virtual-scroll-items/razor

@@ -0,0 +1,7 @@
+@Html.EJS().AutoComplete("records").Placeholder("Select a item").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.data).EnableVirtualization(true).Fields(new Syncfusion.EJ2.DropDowns.AutoCompleteFieldSettings { Value = "Text" }).ActionBegin("onbegin").Query("new ej.data.Query().take(40)").Render()
+
+<script>
+    function onbegin(e) {
+         e.query = new ej.data.Query().take(45);
+    }
+</script>

ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll-items/records.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace WebApplication1.Models
+{
+    public class Record
+    {
+        public string ID { get; set; }
+        public string Text { get; set; }
+        public List<Record> RecordList { set; get; }
+        public List<Record> RecordModelList()
+        {
+            return Enumerable.Range(1, 150).Select(i => new Record()
+            {
+                ID = i.ToString(),
+                Text = "Item " + i,
+            }).ToList();
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll-items/tagHelper

@@ -0,0 +1,13 @@
+<div class="control-wrapper">
+    <div id="default" style='padding-top:75px;'>
+        <ejs-autocomplete id="records" dataSource="@ViewBag.data" query="new ej.data.Query().take(40)" actionBegin="onbegin" placeholder="Select a item" allowFiltering="false" enableVirtualization="true" popupHeight="200px">
+            <e-autocomplete-fields value="Text"></e-autocomplete-fields>
+        </ejs-autocomplete>
+    </div>
+</div>
+
+<script>
+    function onbegin(e) {
+        e.query = new ej.data.Query().take(45);
+    }
+</script>

ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll-items/virtualscroll.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using WebApplication1.Models;
+
+namespace WebApplication1.Controllers
+{
+    public class MultiSelectController : Controller
+    {
+        public ActionResult virtualscroll()
+        {
+            ViewBag.data = new Record().RecordModelList();
+            return View();
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/combobox/virtual-scroll-items/razor

@@ -0,0 +1,7 @@
+@Html.EJS().ComboBox("records").Placeholder("Select a item").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.data).EnableVirtualization(true).AllowFiltering(false).Fields(new Syncfusion.EJ2.DropDowns.ComboBoxFieldSettings { Value = "ID", Text="Text" }).ActionBegin("onbegin").Query("new ej.data.Query().take(40)").Render()
+
+<script>
+    function onbegin(e) {
+         e.query = new ej.data.Query().take(45);
+    }
+</script>

ej2-asp-core-mvc/code-snippet/combobox/virtual-scroll-items/records.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace WebApplication1.Models
+{
+    public class Record
+    {
+        public string ID { get; set; }
+        public string Text { get; set; }
+        public List<Record> RecordList { set; get; }
+        public List<Record> RecordModelList()
+        {
+            return Enumerable.Range(1, 150).Select(i => new Record()
+            {
+                ID = i.ToString(),
+                Text = "Item " + i,
+            }).ToList();
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/combobox/virtual-scroll-items/tagHelper

@@ -0,0 +1,13 @@
+<div class="control-wrapper">
+    <div id="default" style='padding-top:75px;'>
+        <ejs-combobox id="records" dataSource="@ViewBag.data" query="new ej.data.Query().take(40)" actionBegin="onbegin" placeholder="Select a item" allowFiltering="false" enableVirtualization="true" popupHeight="200px">
+            <e-combobox-fields value="ID" text="Text"></e-combobox-fields>
+        </ejs-combobox>
+    </div>
+</div>
+
+<script>
+    function onbegin(e) {
+        e.query = new ej.data.Query().take(45);
+    }
+</script>

ej2-asp-core-mvc/code-snippet/combobox/virtual-scroll-items/virtualscroll.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using WebApplication1.Models;
+
+namespace WebApplication1.Controllers
+{
+    public class MultiSelectController : Controller
+    {
+        public ActionResult virtualscroll()
+        {
+            ViewBag.data = new Record().RecordModelList();
+            return View();
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/document-editor/add-save-button-in-toolbar/document-editor.cs

@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+

ej2-asp-core-mvc/code-snippet/document-editor/add-save-button-in-toolbar/razor

@@ -0,0 +1,23 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").Created("onDocCreate").EnableToolbar(true).Render()
+</div>
+
+<script>
+    function onDocCreate() {
+        var container = document.getElementById("container").ej2_instances[0];
+        var toolItem = {
+            prefixIcon: "e-save icon",
+            tooltipText: "Save the Document",
+            text: "Save",
+            id: "save"
+        };
+        container.toolbarItems = ['New','Open',toolItem, 'Separator' ,'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl'];
+        container.toolbarClick = function (args) {
+            switch (args.item.id) {
+                case 'save':
+                    container.documentEditor.save('sample','Docx');
+                    break;
+            }
+        };
+    }
+</script>

ej2-asp-core-mvc/code-snippet/document-editor/add-save-button-in-toolbar/tagHelper

@@ -0,0 +1,20 @@
+<ejs-documenteditorcontainer id="container" created="onDocCreate"></ejs-documenteditorcontainer>
+<script>
+    function onDocCreate() {
+        var container = document.getElementById("container").ej2_instances[0];
+        var toolItem = {
+            prefixIcon: "e-de-ctnr-lock",
+            tooltipText: "Disable Image",
+            text: "Disable Image",
+            id: "Custom"
+        };
+        container.toolbarItems = ['New','Open',toolItem, 'Separator' ,'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing'];
+        container.toolbarClick = function (args) {
+            switch (args.item.id) {
+                case 'Custom':
+                    container.documentEditor.save('Sample', 'Docx');
+                    break;
+            }
+        };
+    }
+</script>

ej2-asp-core-mvc/code-snippet/document-editor/auto-save-server/razor

@@ -0,0 +1,51 @@
+
+@Html.EJS().DocumentEditorContainer("container").Created("onCreate").EnableToolbar(true).Render()
+
+
+<script>
+    var container;
+    var containerPanel;
+    var contentChanged =false;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    container.contentChange=function(){
+        contentChanged = true;
+    }
+    });
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        setInterval(() => {
+            if (contentChanged) {
+                //You can save the document as below
+                container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                    console.log('Saved sucessfully');
+                    let exportedDocument = blob;
+                    //Now, save the document where ever you want.
+                    let formData = new FormData();
+                    formData.append('fileName', 'sample.docx');
+                    formData.append('data', exportedDocument);
+                    /* tslint:disable */
+                    var req = new XMLHttpRequest();
+                    // Replace your running Url here
+                    req.open(
+                        'POST',
+                        'http://localhost:62869/api/documenteditor/AutoSave',
+                        true
+                    );
+                    req.onreadystatechange = () => {
+                        if (req.readyState === 4) {
+                            if (req.status === 200 || req.status === 304) {
+                                console.log('Saved sucessfully');
+                            }
+                        }
+                    };
+                    req.send(formData);
+                });
+                contentChanged = false;
+            }
+        }, 1000);
+    }
+
+</script>

ej2-asp-core-mvc/code-snippet/document-editor/auto-save-server/tagHelper

@@ -0,0 +1,49 @@
+<ejs-documenteditorcontainer id="container" enableToolbar=true  height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var container;
+    var containerPanel;
+    var contentChanged =false;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    container.contentChange=function(){
+        contentChanged = true;
+    }
+    });
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        setInterval(() => {
+            if (contentChanged) {
+                //You can save the document as below
+                container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                    console.log('Saved sucessfully');
+                    let exportedDocument = blob;
+                    //Now, save the document where ever you want.
+                    let formData = new FormData();
+                    formData.append('fileName', 'sample.docx');
+                    formData.append('data', exportedDocument);
+                    /* tslint:disable */
+                    var req = new XMLHttpRequest();
+                    // Replace your running Url here
+                    req.open(
+                        'POST',
+                        'http://localhost:62869/api/documenteditor/AutoSave',
+                        true
+                    );
+                    req.onreadystatechange = () => {
+                        if (req.readyState === 4) {
+                            if (req.status === 200 || req.status === 304) {
+                                console.log('Saved sucessfully');
+                            }
+                        }
+                    };
+                    req.send(formData);
+                });
+                contentChanged = false;
+            }
+        }, 1000);
+    }
+
+</script>

ej2-asp-core-mvc/code-snippet/document-editor/custom-toolbar/razor

@@ -11,7 +11,7 @@
             text: "Disable Image",
             id: "Custom"
         };
-        container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing'];
+        container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl'];
         container.toolbarClick = function (args) {
             switch (args.item.id) {
                 case 'Custom':

ej2-asp-core-mvc/code-snippet/document-editor/custom-toolbar/tagHelper

@@ -8,7 +8,7 @@
             text: "Disable Image",
             id: "Custom"
         };
-        container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing'];
+        container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl'];
         container.toolbarClick = function (args) {
             switch (args.item.id) {
                 case 'Custom':

ej2-asp-core-mvc/code-snippet/dropdownlist/virtual-scroll-items/razor

@@ -0,0 +1,7 @@
+@Html.EJS().DropDownList("records").Placeholder("Select a item").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.data).EnableVirtualization(true).AllowFiltering(false).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Value = "ID", Text="Text" }).ActionBegin("onbegin").Query("new ej.data.Query().take(40)").Render()
+
+<script>
+    function onbegin(e) {
+         e.query = new ej.data.Query().take(45);
+    }
+</script>

ej2-asp-core-mvc/code-snippet/dropdownlist/virtual-scroll-items/records.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace WebApplication1.Models
+{
+    public class Record
+    {
+        public string ID { get; set; }
+        public string Text { get; set; }
+        public List<Record> RecordList { set; get; }
+        public List<Record> RecordModelList()
+        {
+            return Enumerable.Range(1, 150).Select(i => new Record()
+            {
+                ID = i.ToString(),
+                Text = "Item " + i,
+            }).ToList();
+        }
+    }
+}