Create multiple records using EditMode.DialogTemplate

[Malcolm van Staden]

Hi,

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

[Farveen Sulthana Thameeztheen Basha]

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:- 

@(Html.EJ().Grid<OrdersView>("Editing") 

                        .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(); 

                             col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).Add(); 

                            col.Field("ShipCity").HeaderText("ShipName").Width(150).AllowEditing(true).Add(); 

                            col.Field("Verified").HeaderText("Verified").Width(90).AllowEditing(false).Add(); 

                        }) 

 

) 

 

<script id="template" type="text/template"> 

    <table cellspacing="10"> 

        <tr> 

            < 

            <td>Languages</td> 

            <td> 

                <select id="Languages" name="Languages"></select> 

            </td> 

        </tr> 

    </table> 

</script> 

<script> 

            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") { 

                    debugger 

                    args.data.Languages = drpData; 

                } 

            } 

            function complete(args) { 

                if (args.requestType == "add" || args.requestType == "beginedit") { 

                  var dropData = @Html.Raw(Json.Encode(ViewBag.data)); 

                    

                 $("#Languages").ejDropDownList({ 

                     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); 

                             drpData.push(obj); 

                         } 

                     }, 

                     multiSelectMode: ej.MultiSelectMode.Delimiter, 

                     showCheckbox: true, 

                     dataSource: dropData, 

                     text: ej.dataUtil.distinct(dropData, "Lanugages").toString(), 

                     fields: { text: "Lanugages", value: "ID" }, 

                   }); 

                } 

            } 

</script> 

 

<script> 

        //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.

Regards, 

Farveen sulthana T