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

Create multiple records using EditMode.DialogTemplate


We are using the grid to perform CRUD operations on a dataset. We are making use of the EditMode.DialogTemplate in order to edit or add records. Our template contains a dropdown that is a multiselect dropdown. We'd like to create multiple records if more than one item is selected from that dropdown (duplicating the rest of the data, only the property that holds the dropdown value would differ between the records). How can we go about doing this?

The other complication is that we need to retrieve the record info from the server before adding it to the grid itself (the record object needs to be built up on the server before being added to the grid). We make use of a custom adaptor/remote save adaptor in order to do this.

Any input on this would be appreciated.

Thank you

1 Reply

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team June 23, 2019 12:29 PM UTC

Hi Malcom, 

Thanks for contacting Syncfusion Support. 

We have checked your query and we can use customAdaptor to achieve your requirement. We have placed the multiselect dropdownList using DialogTemplate inside Grid. While using custom Adaptor, you can get the edited records in the processResponse method. This method get triggers after postback from serverside and before adding the records into the Grid so that you can manipulate the records as per value selected from dropdownList and add it into the Grid. 

Please refer to the code example:- 

                        .Datasource(ds => ds.URL("/Grid/UrlDataSource").UpdateURL("/Grid/Update").InsertURL("/Grid/Insert").RemoveURL("NormalDelete").Adaptor(AdaptorType.UrlAdaptor)) 
                        .ClientSideEvents(e => e.ActionBegin("begin").QueryCellInfo("query").ActionComplete("complete").Load("onLoad")) 
                        .Columns(col => 
                            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add(); 
<script id="template" type="text/template"> 
    <table cellspacing="10"> 
                <select id="Languages" name="Languages"></select> 
            var drpData = []; 
            function query(args) { 
                if (args.column.field == "Language") { 
                    args.cell.innerText = ej.dataUtil.distinct(args.data.Languages, "Lanugages"); 
            //Actionbegin assigning the newly update value 
            function begin(args) { 
                if (args.requestType == "save") { 
                    args.data.Languages = drpData; 
            function complete(args) { 
                if (args.requestType == "add" || args.requestType == "beginedit") { 
                  var dropData = @Html.Raw(Json.Encode(ViewBag.data)); 
                     width: "100%", 
                     change: function (args) { 
                         var txt = args.text.split(","), vals = args.model.value.split(","); 
                         for (var t = 0; t < txt.length; t++) { 
                             //creating a list of objects for newly saving records 
                             var obj = {}; 
                             ej.createObject("Lanugages", txt[t], obj); 
                             ej.createObject("ID", ej.parseInt(vals[t]), obj); 
                     multiSelectMode: ej.MultiSelectMode.Delimiter, 
                     showCheckbox: true, 
                     dataSource: dropData, 
                     text: ej.dataUtil.distinct(dropData, "Lanugages").toString(), 
                     fields: { text: "Lanugages", value: "ID" }, 
        //Custom Adaptor to customize the existing Adaptor 
    var customAdaptor = new ej.UrlAdaptor().extend({ 
        processResponse: function (data, ds, query, xhr, request, changes) { 
                 //you can manipulate records as per items selected from multiselect dropdown            
              return this.base.processResponse.apply(this, [data, ds, query, xhr, request, changes]); 
        function onLoad(args) { 
            this.model.dataSource.adaptor = new customAdaptor(); 

If you requirement is different from the above solution, please share us the following details. 

  1. Detail Explaination of your requirement.
  2. Screenshot/Video Demo to replicate the issue.

Farveen sulthana T 

Live Chat Icon For mobile
Up arrow icon