Merge pull request #3517 from syncfusion-content/324496-dev-du-dr-lst

324496: Provide the dual listbox with drag and drop support sample in UG docs.

Author: BuvanaSathasivam

ej2-asp-core-mvc/code-snippet/listbox/drag-drop/dual-drag/dualdraglistbox.cs

@@ -0,0 +1,20 @@
+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 ListBoxController : Controller
+    {
+        public IActionResult dualdraglistbox()
+        {
+            ViewBag.groupA = new string[] { "Austrlia", "Bermuda", "Canada", "Cameroon", "Denmark", "France", "Finland", "Germany", "Hong kong" };
+            ViewBag.groupB = new string[] { "India", "Italy", "Japan", "Mexico", "Norway", "Poland", "Switzerland", "United Kingdom", "United States" };
+            ViewBag.items = new string[] { "moveUp", "moveDown", "moveTo", "moveFrom", "moveAllTo", "moveAllFrom" };
+            return View();
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/listbox/drag-drop/dual-drag/razor

@@ -0,0 +1,8 @@
+<div style="width:50%; margin:auto">
+    <div style="float:left; width:48%">
+        @Html.EJS().ListBox("listbox1").DataSource((IEnumerable<object>)ViewBag.groupA).AllowDragAndDrop(true).Scope("#listbox2").ToolbarSettings(new Syncfusion.EJ2.DropDowns.ListBoxToolbarSettings { Items = ViewBag.items }).Render()
+    </div>
+    <div style="float:right; width:48%">
+        @Html.EJS().ListBox("listbox2").DataSource((IEnumerable<object>)ViewBag.groupB).AllowDragAndDrop(true).Scope("#listbox2").Render()
+    </div>
+</div>

ej2-asp-core-mvc/code-snippet/listbox/drag-drop/dual-drag/taghelper

@@ -0,0 +1,8 @@
+<div style="width:50%; margin:auto">
+    <div style="float:left; width:48%">
+        <ejs-listbox id="listbox1" dataSource="@ViewBag.groupA" allowDragAndDrop="true" scope="#listbox2" height="290px"></ejs-listbox>
+    </div>
+    <div style="float:right; width:48%">
+        <ejs-listbox id="listbox2" dataSource="@ViewBag.groupB" allowDragAndDrop="true" scope="#listbox2" height="290px"></ejs-listbox>
+    </div>
+</div>

ej2-asp-core-mvc/list-box/drag-and-drop.md

@@ -89,3 +89,29 @@ In the following sample, the `allowDragAndDrop` property is set as `true` and `s
 {% endtabs %}
 {% endif %}
 
+## Dual ListBox with drag and drop
+
+The toolbar and drag and drop actions between two listboxes can be enabled by setting a listbox unique id and the same [`scope`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.ListBox.html#Syncfusion_EJ2_DropDowns_ListBox_Scope) property value.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/listbox/drag-drop/dual-drag/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Dragdrop.cs" %}
+{% include code-snippet/listbox/drag-drop/dual-drag/dualdraglistbox.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/listbox/drag-drop/dual-drag/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Dragdrop.cs" %}
+{% include code-snippet/listbox/drag-drop/dual-drag/dualdraglistbox.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}

ej2-asp-core-mvc/query-builder/how-to/state-persistence.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: State Persistence in ##Platform_Name## Query Builder Component
+title: State Persistence in ##Platform_Name## Query Builder Component | Syncfusion
 description: Learn here all about State Persistence in Syncfusion ##Platform_Name## Query Builder component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: State Persistence

ej2-asp-core-mvc/query-builder/how-to/summary-view.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: SummaryView in ##Platform_Name## QueryBuilder Component
+title: SummaryView in ##Platform_Name## QueryBuilder Component | Syncfusion
 description: Learn here all about Summary View in Syncfusion ##Platform_Name## QueryBuilder component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Summary View
@@ -34,3 +34,5 @@ Summary view allows you to show or hide the filtered query. By default, the valu
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
+
+![Query builder Sample](../images/summary-view.png)