Different template for Add and Edit in Grid

[Muhamad Adam Fakhrullah Nik Mohamad]

Hi, can I know the way to use two different dialog template for Add and Edit? (not partial view).

Thank you. Hope you can help me to solve this problem.

[Balaji Sekar]

Hi Muhamad  Adam, 

 

Query: Can I know the way to use two different dialog template for Add and Edit? (not partial view). 

Based on your query, we have bound the different edit input components on the dialog template based on add/edit actions. In below code example, we have bind the ShipCountry input component in dialog template while edit a grid alone. Since you can achieve your requirement using this way and please refer the below code example and sample for more information. 

  

[Index.cshtml] 

 

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" actionBegin="actionBegin" load="load" actionFailure="actionFailure" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })" actionComplete="actionComplete"> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" validationRules="@(new{ required = true })" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script id="dialogtemplate" type="text/x-template"> 

    <div> 

        <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="${OrderID}" ${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 class="form-group col-md-6"> 

                <div class="e-float-input e-control-wrapper"> 

                    <input id="CustomerID" name="CustomerID" type="text" value="${CustomerID}" /> 

                    <span class="e-float-line"></span> 

                    <label class="e-float-text e-label-top" for="CustomerID">Customer ID</label> 

                </div> 

            </div> 

            <div class="form-row"> 

                <div class="form-group col-md-6"> 

                    <input name="Freight" id="Freight" value="${Freight}" /> 

                </div> 

                <div class="form-group col-md-6"> 

                    <input name="OrderDate" id="OrderDate"> 

                </div> 

            </div> 

            <div class="form-row"> 

                <div class="form-group col-md-6"> 

                    <input type="text" name="ShipCity" id="ShipCity" value=${ShipCity} /> 

                </div> 

                <div class="form-group col-md-6"> 

                    <div class="${if(isAdd)}hide ${else}show${ /if}"> //Shown the ShipCountry Input element on DialogTemplate while edit only 

                        <input type="text" name="ShipCountry" id="ShipCountry" value=${ShipCountry} /> 

                    </div> 

                </div> 

                </div> 

            </div> 

    </div> 

</script> 

 

function actionComplete(args) { 

        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {             

                var data = args.rowData; 

            // Convert Widget for the Freight field 

            new ej.inputs.NumericTextBox({ value: data.Freight == undefined? "":data.Freight, format: 'C2', placeholder: 'Freight', floatLabelType: 'Always' }, 

                                   args.form.elements.namedItem('Freight')); 

            // Convert Widget for the OrderDate field 

            new ej.calendars.DatePicker({ value: data.OrderDate != undefined?data.OrderDate:"", placeholder: 'Order Date', floatLabelType: 'Always' }, 

                               args.form.elements.namedItem('OrderDate')); 

                if (ej.base.Browser.isDevice) { 

                    args.dialog.height = window.innerHeight - 90 + 'px'; 

                    args.dialog.dataBind(); 

             } 

 

             var localData = @Html.Raw(Json.Serialize(ViewBag.dataSource)); 

 

            new ej.dropdowns.DropDownList({ 

                value: data.ShipCity != undefined ? data.ShipCity:"", dataSource: localData, floatLabelType: 'Always', 

                                 popupHeight: '300px', fields: {text: 'ShipCity', value: 'ShipCity' }, placeholder: 'Ship City' }, 

                  args.form.elements.namedItem('ShipCity')); 

 

            new ej.dropdowns.DropDownList({ 

                value: data.ShipCountry != undefined ? data.ShipCountry:"", dataSource: localData, floatLabelType: 'Always', 

                                 popupHeight: '300px', fields: {text: 'ShipCountry', value: 'ShipCountry' }, placeholder: 'Ship Country' }, 

                                 args.form.elements.namedItem('ShipCountry')); 

 

                // Set initail Focus 

                if (args.requestType === 'beginEdit') { 

                    args.form.elements.namedItem('CustomerID').focus(); 

                } else { 

                    args.form.elements.namedItem('OrderID').focus(); 

                } 

            } 

    } 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/153196/ze/Grid-DialogTemplate-2100499990.zip  

  

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar