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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Create multiple records using EditMode.DialogTemplate

Thread ID:

Created:

Updated:

Platform:

Replies:

145407 Jun 20,2019 08:37 AM UTC Jun 23,2019 12:29 PM UTC ASP.NET MVC 1
loading
Tags: Grid
Malcolm van Staden
Asked On June 20, 2019 08:37 AM UTC

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 [Syncfusion]
Replied On 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:- 

@(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 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon