Use Wizard like Dialog Editing

17 Feb 202213 minutes to read

Wizard helps you create intuitive step-by-step forms to fill. You can achieve the wizard like editing by using the dialog template feature. It support your own editing template by defining Mode of EditSettings as Dialog and Template as SCRIPT element ID or HTML string which holds the template.

The following example demonstrate the wizard like editing in the grid with the obtrusive Validation.

@Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable<object>)ViewBag.DataSource).ActionComplete("actionComplete").Columns(col =>
{
   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = true, minLength = 3 }).Add();
   col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add();

}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
    

<script>
     function actionComplete(args) {
         if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            var countryData = ej.data.DataUtil.distinct(this.dataSource, 'ShipCountry', true);
                new ej.dropdowns.DropDownList({
                    value: args.rowData.ShipCountry, popupHeight: '300px', 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();
                }
                initializeWizard();
            }
    }

    function initializeWizard() {
        var currentTab = 0;

        document.getElementById('nextBtn').onclick = function () {
            var grid = document.getElementById("DialogTemplateEdit").ej2_instances[0];
            var valid = true;
            [].slice.call(document.getElementById('tab' + currentTab).querySelectorAll('[name]')).forEach(element => {
                element.form.ej2_instances[0].validate(element.name);
                if (element.getAttribute('aria-invalid') === 'true') {
                    valid = false;
                }
            });
            if (!valid) {
                return
            }
            if (this.innerHTML !== 'SUBMIT') {
                currentTab++;
                nextpre(currentTab);
            } else {
                grid.endEdit();
            }
        }

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

        function nextpre(current) {
            var tabs = [].slice.call(document.getElementsByClassName('tab'))
            tabs.forEach(element => element.style.display = 'none');
            tabs[current].style.display = '';
            if (current) {
                document.getElementById('prevBtn').style.display = '';
                document.getElementById('nextBtn').innerHTML = 'SUBMIT';
            } else {
                document.getElementById('prevBtn').style.display = 'none';
                document.getElementById('nextBtn').innerHTML = 'NEXT';
            }
        }
    }
 </script>

 <script id='dialogtemplate' type="text/x-template">
     <div>
        <div id="tab0" class='tab'>
           <div class="form-row">
              <div class="form-group col-md-6">
                 <div class="e-float-input e-control-wrapper">
                    <input id="OrderID" required 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" required 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>
        </div>
        <div id=tab1 style="display: none" class='tab'>
           <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(Verified)} checked ${/if}" />
               </div>
             </div>
         </div>
         <div id='footer'>
            <button id="prevBtn" class="e-info e-btn" type="button" style="display: none; float: left; margin-left: 11px;">Previous</button>

            <button id="nextBtn" class="e-info e-btn" type="button" style="float: right">Next</button>
          </div>
    </div>
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}