We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

External Template

Hi all,

I have a question about external edit template.
It's possible into the template can make Two fields in cascade?

This is my code:

<td>Reallocated status code</td>
            <td>
                <select id="MA_StatusCode" name="MA_StatusCode" cascade-to="">
                    <option value=""></option>
                </select>
            </td>
            <td>Reallocated Full Description</td>
            <td>
                <select id="FullDescription" name="FullDescription">
                    <option value=""></option>
                </select>
            </td>

These are my two fields, and the problem is to make them cascaded

Thanks,
Nicholas

3 Replies

JK Jayaprakash Kamaraj Syncfusion Team January 31, 2017 12:48 PM UTC

Hi Nicholas, 

Thank you for contacting Syncfusion support. 

We have created a Grid sample with External template form . We have used ActionComplete event and changed event for cascading dropdown. ActionComplete event triggers every complete actions in grid. Please refer to the following code example, help documents and sample. 
Help document for, 


@(Html.EJ().Grid<object>("FlatGrid") 
    .Datasource((IEnumerable<object>)ViewBag.DataSource) 
                .AllowPaging() 
                 
                .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.ExternalFormTemplate).ExternalFormTemplateID("#template"); }) 
.. 
        }).ClientSideEvents(eve=>eve.ActionComplete("complete"))) 
<script type="text/template" id="template"> 
    <b>Order Details</b> 
 
            <table cellspacing="10"> 
                <tr> 
                    <td style="text-align: right;"> 
                        Order ID 
                    </td> 
                    <td style="text-align: left"> 
                        <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable" 
                               style="text-align: right; width: 116px; height: 28px" /> 
                    </td> 
                   
                </tr> 
                <tr> 
                    <td style="text-align: right;"> 
                        Customer ID 
                    </td> 
                    <td style="text-align: left"> 
                        <span class="txt">Select Group</span> 
                        <input id="CustomerID" type="text" /> 
                    </td> 
                    </tr> 
                <tr> 
                    <td style="text-align: right;"> 
                        Ship City 
                    </td> 
                    <td style="text-align: left"> 
                        <span class="txt">Select Country</span> 
                        <input id="ShipCity" type="text" /> 
                    </td> 
                    </tr> 
                    
            </table> 
</script> 
<script type="text/javascript"> 
        function complete(args) { 
            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "externalformtemplate") { 
                var groups = [ 
          { parentId: 'a', text: "Group A" }, 
.. 
          { parentId: 'd', text: "Group D" }, 
          { parentId: 'e', text: "Group E" }] 
                //first level child 
                var countries = [{ value: "Algeria", parentId: 'a', text: "Algeria", sprite: "flag-dz" }, 
               { value: "Armenia", parentId: 'a', text: "Armenia", sprite: "flag-am" }, 
.. 
               { value: "Thailand", parentId: 'e', text: "Thailand", sprite: "flag-th" }, 
               { value: "Ukraine", parentId: 'e', text: "Ukraine", sprite: "flag-ua" }] 
                $('#CustomerID').ejDropDownList({ 
                    dataSource: groups, 
                    fields: { value: "parentId", text: "text" }, 
                    cascadeTo: 'ShipCity', 
                    change: "onChange", 
                    width: "100%" 
                }); 
                $('#ShipCity').ejDropDownList({ 
                    dataSource: countries, 
                   // enabled: false, 
                    width: "100%" 
                }); 
                if (args.requestType == "beginedit") { 
                    $("#OrderID").attr("disabled", "disabled"); 
                } 
            } 
        } 
        function onChange() { 
            var ctry = $('#ShipCity').data("ejDropDownList"); 
            ctry.element.val(""); 
        } 
 
</script> 


Regards, 

Jayaprakash K. 



NP Nicholas Picardi February 1, 2017 08:37 AM UTC

Thanks Jayaprakash k.

But i have another question...
It's possible populate the field's in edit external template with stored procedure?

Thanks,
Nicholas


JK Jayaprakash Kamaraj Syncfusion Team February 2, 2017 05:27 AM UTC

Hi Nicholas,   
   
We had noticed that you had created the forum #128575 for the same query. Please follow-up with the forum #128575 for further updates.   
   
   
Regards,   
   
Jayaprakash K.   


Loader.
Live Chat Icon For mobile
Up arrow icon