diff --git a/ej2-asp-core-mvc/code-snippet/dropdowntree/data-binding/remote-data/razor b/ej2-asp-core-mvc/code-snippet/dropdowntree/data-binding/remote-data/razor
index 07ce563bfa..e368bd1af3 100644
--- a/ej2-asp-core-mvc/code-snippet/dropdowntree/data-binding/remote-data/razor
+++ b/ej2-asp-core-mvc/code-snippet/dropdowntree/data-binding/remote-data/razor
@@ -1,9 +1,3 @@
 <div id='container' style="margin:0 auto; width:250px;">
-    @Html.EJS().DropDownTree("tree").Fields(field =>
-          field.Query("new ej.data.Query().from('Employees').select('EmployeeID,FirstName,Title').take(5)").Value("EmployeeID").ParentValue("pid").Selected("selected")
-          .Text("FirstName").HasChildren("EmployeeID")
-          .DataSource(dataSource =>
-          {
-              dataSource.Url("https://services.odata.org/V4/Northwind/Northwind.svc").Adaptor("ODataV4Adaptor").CrossDomain(true);
-          }).Child(ViewBag.child)).Render()
+    @Html.EJS().DropDownTree("ddtremote").Placeholder("Select a name").Fields(ViewBag.remoteFields).Render()
 </div>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dropdowntree/data-binding/remote-data/remotedata.cs b/ej2-asp-core-mvc/code-snippet/dropdowntree/data-binding/remote-data/remotedata.cs
index 4785b0d618..4c4e5cdb30 100644
--- a/ej2-asp-core-mvc/code-snippet/dropdowntree/data-binding/remote-data/remotedata.cs
+++ b/ej2-asp-core-mvc/code-snippet/dropdowntree/data-binding/remote-data/remotedata.cs
@@ -11,20 +11,30 @@ namespace DropDownTree.Controllers
 {
     public class DropDownListController : Controller
     {
-       public IActionResult RemoteData()
+       public ActionResult RemoteData()
         {
+            DropDownTreeFields parentData = new DropDownTreeFields();
             DropDownTreeFields childData = new DropDownTreeFields();
-            childData.Query = "new ej.data.Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(5)";
-            childData.Value = "OrderID";
-            childData.Text = "ShipName";
-            childData.ParentValue = "EmployeeID";
-            childData.DataSource = new Syncfusion.EJ2.DataManager
+            object data = new DataManager
             {
                 Url = "https://services.odata.org/V4/Northwind/Northwind.svc",
                 Adaptor = "ODataV4Adaptor",
                 CrossDomain = true
             };
-            ViewBag.child = childData;
+            // Parent data mapping
+            parentData.Query = "new ej.data.Query().from('Employees').select('EmployeeID,FirstName,Title').take(5)";
+            parentData.Value = "EmployeeID";
+            parentData.Text = "FirstName";
+            parentData.HasChildren = "EmployeeID";
+            parentData.Child = childData;
+            parentData.DataSource = data;
+            // Child data mapping  
+            childData.Query = "new ej.data.Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(5)";
+            childData.Value = "OrderID";
+            childData.Text = "ShipName";
+            childData.ParentValue = "EmployeeID";
+            childData.DataSource = data;
+            ViewBag.remoteFields = parentData;
             return View();
         }
     }
diff --git a/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/actionFailureTemplate/razor b/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/actionFailureTemplate/razor
index 44690ed8c3..4150072d48 100644
--- a/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/actionFailureTemplate/razor
+++ b/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/actionFailureTemplate/razor
@@ -1,5 +1,5 @@
 <div class="control-section">
     <div style="margin: 0 auto; width:350px;">
-        @Html.EJS().DropDownTree("ddtremote").Placeholder("Select a name").PopupHeight("200px").ActionFailureTemplate("<span class='action-failure'> Data fetch request fails</span>").Fields(ViewBag.remoteFields).Render()
+        @Html.EJS().DropDownTree("ddtremote").Placeholder("Select a name").Width("300px").PopupHeight("200px").ActionFailureTemplate("<span class='action-failure'> Data fetch request fails</span>").Fields(ViewBag.remoteFields).Render()
     </div>
 </div>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/customTemplate_mode/razor b/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/customTemplate_mode/razor
index 35717b1aaa..b2b6740ef3 100644
--- a/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/customTemplate_mode/razor
+++ b/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/customTemplate_mode/razor
@@ -1,6 +1,6 @@
 @using Syncfusion.EJ2.DropDowns
 <div class="control-section">
     <div style="margin: 0 auto; width:350px;">
-        @Html.EJS().DropDownTree("ddt").Placeholder("Select an employee").Mode(Mode.Custom).CustomTemplate("${value.length} item(s) selected").ShowCheckBox(true).PopupHeight("200px").Fields(ViewBag.templateData).Render()
+        @Html.EJS().DropDownTree("ddt").Width("300px").Placeholder("Select an employee").Mode(Mode.Custom).CustomTemplate("${value.length} item(s) selected").ShowCheckBox(true).PopupHeight("200px").Fields(ViewBag.templateData).Render()
     </div>
 </div>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/footerTemplate/razor b/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/footerTemplate/razor
index 11b215ac0a..97b6d7ad50 100644
--- a/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/footerTemplate/razor
+++ b/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/footerTemplate/razor
@@ -1,6 +1,6 @@
 <div class="control-section">
     <div style="margin: 0 auto; width:350px;">
-        @Html.EJS().DropDownTree("ddt").CssClass("custom").Placeholder("Select an employee").Width("350px").PopupHeight("250px").Fields(ViewBag.templateData).ItemTemplate("<div class=\"ename\">${name}</div>").FooterTemplate("<div class=\"footer\"><div class=\"footer-content\">Total number of employees: 10 </div></div>").Render()
+        @Html.EJS().DropDownTree("ddt").CssClass("custom").Placeholder("Select an employee").Width("300px").PopupHeight("250px").Fields(ViewBag.templateData).ItemTemplate("<div class=\"ename\">${name}</div>").FooterTemplate("<div class=\"footer\"><div class=\"footer-content\">Total number of employees: 10 </div></div>").Render()
     </div>
 </div>
 <style>
diff --git a/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/headerTemplate/razor b/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/headerTemplate/razor
index 245cd7aee2..45759bac5f 100644
--- a/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/headerTemplate/razor
+++ b/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/headerTemplate/razor
@@ -1,6 +1,6 @@
 <div class="control-section">
     <div style="margin: 0 auto; width:350px;">
-        @Html.EJS().DropDownTree("ddt").CssClass("custom").Placeholder("Select an employee").Width("350px").PopupHeight("250px").Fields(ViewBag.templateData).ItemTemplate("<div class=\"ename\">${name}</div>").HeaderTemplate("<div class=\"head\">Employee List</div>").Render()
+        @Html.EJS().DropDownTree("ddt").CssClass("custom").Placeholder("Select an employee").Width("300px").PopupHeight("250px").Fields(ViewBag.templateData).ItemTemplate("<div class=\"ename\">${name}</div>").HeaderTemplate("<div class=\"head\">Employee List</div>").Render()
     </div>
 </div>
 <style>
diff --git a/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/itemTemplate/razor b/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/itemTemplate/razor
index 85dbbf523b..88f37f1b66 100644
--- a/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/itemTemplate/razor
+++ b/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/itemTemplate/razor
@@ -1,6 +1,6 @@
 <div class="control-section">
-    <div style="margin: 0 auto; width:350px;">
-        @Html.EJS().DropDownTree("ddt").CssClass("custom").Placeholder("Select an employee").Width("350px").PopupHeight("250px").Fields(ViewBag.templateData).ItemTemplate("<div><span class=\"ename\">${name} - </span><span class=\"ejob\">${job}</span></div>").Render()
+    <div style="margin: 0 auto; width:250px;">
+        @Html.EJS().DropDownTree("ddt").CssClass("custom").Placeholder("Select an employee").Width("300px").PopupHeight("250px").Fields(ViewBag.templateData).ItemTemplate("<div><span class=\"ename\">${name} - </span><span class=\"ejob\">${job}</span></div>").Render()
     </div>
 </div>
 <style>
diff --git a/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/valueTemplate/razor b/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/valueTemplate/razor
index 0c9bbf402e..10f2901670 100644
--- a/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/valueTemplate/razor
+++ b/ej2-asp-core-mvc/code-snippet/dropdowntree/templates/valueTemplate/razor
@@ -1,6 +1,6 @@
 <div class="control-section">
     <div style="margin: 0 auto; width:350px;">
-        @Html.EJS().DropDownTree("ddt").CssClass("custom").Placeholder("Select an employee").Width("350px").PopupHeight("250px").Fields(ViewBag.templateData).ItemTemplate("<div><span class=\"ename\">${name} - </span><span class=\"ejob\">${job}</span></div>").ValueTemplate("<div><span class=\"ename\">${name} - </span><span class=\"ejob\">${job}</span></div>").Render()
+        @Html.EJS().DropDownTree("ddt").CssClass("custom").Placeholder("Select an employee").Width("300px").PopupHeight("250px").Fields(ViewBag.templateData).ItemTemplate("<div><span class=\"ename\">${name} - </span><span class=\"ejob\">${job}</span></div>").ValueTemplate("<div><span class=\"ename\">${name} - </span><span class=\"ejob\">${job}</span></div>").Render()
     </div>
 </div>
 <style>