Update the showcase sample

Author: ashokkumar.balasubramanian

Outlook_Core.csproj

@@ -9,7 +9,7 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.3" />
     <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.1" />
-    <PackageReference Include="Syncfusion.EJ2.AspNet.Core" Version="19.2.0.44" />
+    <PackageReference Include="Syncfusion.EJ2.AspNet.Core" Version="*" />
   </ItemGroup>
 
   <ItemGroup>

Views/Home/Home.cshtml

@@ -4,7 +4,7 @@
 }
 
 @{
-    var replyTemplate = "<button id='replyAllList'>Reply All</button";
+    var replyTemplate = "<input type='text' tabindex='1' id='replyAllList' />";
     var movetoTemplate = "<input type='text' tabindex='1' id='moveToList' />";
     var categoryTemplate = "<input type='text' tabindex='1' id='categoryList' />";
     var moreTemplate = "<input type='tex' tabindex='1' id='moreList' />";

config.json

@@ -1,5 +1,6 @@
 {
-    "deploy": ["deploy/**"],
-    "base": "deploy",
-    "isShowCase": true
+  "deploy": [ "deploy/**" ],
+  "base": "deploy",
+  "isShowCase": true,
+  "appName": "webmail"
 }

wwwroot/content/styles.css

@@ -8,7 +8,7 @@ var dlgDiscardNew;
 var dlgNewWindow;
 var dlgReplyAllWindow;
 var dlgFavorite;
-var splitButton;
+var ddlReplyAll;
 var dlgDelete;
 var dropdownSelect = false;
 var acrdnObj = new ej.navigations.Accordion();
@@ -134,13 +134,23 @@ function renderReplyAllList() {
     var themeList = [
         { text: 'Reply' }, { text: 'Reply All' }, { text: 'Forward' }
     ];
-    splitButton = new ej.splitbuttons.SplitButton({
-        items: themeList,
-        content: 'Reply All',
-        select: replyAllSelect,
-        iconCss: "e-btn-icon ej-icon-Reply-All tb-icons e-icons tb-icon-rply-all"
+    ddlReplyAll = new ej.dropdowns.DropDownList({
+        dataSource: themeList,
+        fields: { text: 'text' },
+        valueTemplate: '<div>' +
+        '<div style="float:left;margin-top: 1px;">' +
+        '<span style="font-weight:bold;" class="e-btn-icon ej-icon-Reply-All tb-icons e-icons tb-icon-rply-all">' +
+        '</span>' +
+        '</div>' +
+        '<div class="tb-dropdowns" style="float:left" > Reply All </div>' +
+        '<div>',
+        popupHeight: '150px',
+        popupWidth: '150px',
+        width: '115px',
+        change: replyAllSelect,
+        value: 'Reply All'
     });
-    splitButton.appendTo('#replyAllList');
+    ddlReplyAll.appendTo('#replyAllList');
 }
 function renderCategoryList() {
     var themeList = [
@@ -200,8 +210,8 @@ function renderMoreListMobile() {
     dropDownListObj1.select = moreItemSelect;
 }
 function replyAllSelect(args) {
-    if (args.item.text) {
-        showNewMailPopup(args.item.text);
+    if (args.itemData.text) {
+        showNewMailPopup(args.itemData.text);
     }
     dropdownSelect = true;
 }
@@ -1114,8 +1124,8 @@ function documentClick(evt) {
         else if (!dropdownSelectRP && dlgReplyAllWindow.visible && target.innerText === ddlLastRplyValueRP) {
             showMailDialogRP(ddlLastRplyValueRP);
         }
-        else if (!dropdownSelect && !dlgReplyAllWindow.visible && target.innerText === splitButton.content) {
-            showNewMailPopup(splitButton.content);
+        else if (!dropdownSelect && !dlgReplyAllWindow.visible && target.innerText === ddlReplyAll.value) {
+            showNewMailPopup(ddlReplyAll.value);
         }
         else {
             if (target.tagName === 'SPAN' || (target.children && target.children.length > 0)) {