Using Tab Inside the Dialog Editing

17 Feb 202211 minutes to read

You can use tab component inside dialog edit UI using dialog template feature. The dialog template feature can be enabled by defining mode as Dialog and template as SCRIPT element ID or HTML string which holds the template.

The following example demonstrate the usage of tab control inside the dialog template.

CSHTML

@{
    ViewData["Title"] = "DialogTemplate";
}

<div class="control-section">
    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true">
         <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings>
         <e-grid-pagesettings pageCount="5 "></e-grid-pagesettings>
         <e-grid-columns>
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column>
            <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column>
            <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
         </e-grid-columns>
     </ejs-grid>
 </div>

 <script id='dialogtemplate' type="text/x-template">
    <div>
      <div id="edittab"></div>
        <div id="tab1">
          <div class="form-row">
            <div class="form-group col-md-6">
              <div class="e-float-input e-control-wrapper">
                 <input id="OrderID" name="OrderID" type="text" value="${if(isAdd)} '' ${else} ${OrderID} ${/if}" disabled="${if(isAdd)} '' ${else} disabled ${/if}" />
                 <span class="e-float-line"></span>
                 <label class="e-float-text e-label-top" for="OrderID">Order ID</label>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-6">
               <div class="e-float-input e-control-wrapper">
                  <input id="CustomerID" name="CustomerID" type="text" value="${if(isAdd)} '' ${else} ${CustomerID} ${/if}" />
                  <span class="e-float-line"></span>
                  <label class="e-float-text e-label-top" for="CustomerID">Customer ID</label>
               </div>
            </div>
          </div>
          <button id='next' class='e-info e-btn' style="float: right" type='button'> next</button>
        </div>

        <div id="tab2" style='display: none'>
          <div class="form-row">
            <div class="form-group col-md-6">
               <input type="text" name="ShipCountry" id="ShipCountry" value="${if(isAdd)} '' ${else} ${ShipCountry} ${/if}" />
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-6">
               <input type="checkbox" name="Verified" id="Verified" checked="${if(isAdd)} '' ${else} checked ${/if}" />
            </div>
          </div>
          <button id='submit' class='e-info e-btn' style="float: right" type='button'> submit</button>
        </div>
      </div>
 </script>

 <script>
    function actionComplete(args) {
         if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            var grid = document.getElementById('Grid').ej2_instances[0];
            var countryData = ej.data.DataUtil.distinct(this.dataSource, 'ShipCountry', true);
            var tabObj = new ej.navigations.Tab({
                showCloseButton: false,
                selecting: function (e) { if (e.isSwiped) { e.cancel = true; } if (e.selectingIndex === 1) { e.cancel = !validate(1) } },
                items: [
                     { header: { 'text': 'Details' }, content: '#tab1' },
                     { header: { 'text': 'Verify' }, content: '#tab2' },
                ]
            });
            tabObj.appendTo('#edittab');

            new ej.dropdowns.DropDownList({
                value: args.rowData.ShipCountry, popupHeight: '200px', floatLabelType: 'Always',
                dataSource: countryData, fields: { text: 'ShipCountry', value: 'ShipCountry' }, placeholder: 'Ship Country'
            }, args.form.elements.namedItem('ShipCountry'));

            new ej.buttons.CheckBox({ label: 'Verified', checked: args.rowData.Verified }, args.form.elements.namedItem('Verified'));
                // Set initail Focus
                if (args.requestType === 'beginEdit') {
                    (args.form.elements.namedItem('CustomerID')).focus();
                }
            document.getElementById('next').onclick = () => {
                    moveNext();
            }

    function validate(tab) {
         var valid = true;
         [].slice.call(document.getElementById('tab' + tab).querySelectorAll('[name]')).forEach(element => {
            element.form.ej2_instances[0].validate(element.name);
            if (element.getAttribute('aria-invalid') === 'true') {
               valid = false;
            }
         });
         if (!valid) {
            return false;
         }
         return true;
     }

    function moveNext() {
         if (validate(1)) {
            tabObj.select(1);
         }
    }

   document.getElementById('submit').onclick = () => {
       var grid = document.getElementById("Grid").ej2_instances[0];
       if (validate(2)) {
          grid.endEdit();
       }
     }
   }
}
</script>

Dialog.cs

public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Dialog.cs

public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}