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
close icon

is it possible to use Grid edit features on a list that is only part of my model? Then have those edits update upon form submission.

Syncfusion Community,

I have a view in which I'm attempting to use the edit features of grid (add,edit, and delete) on a list that is only part of my overall model.

Example.
public class theModel {
... other properties
public IList myObjects {get; set;}
}
In my view I want to be able to add or remove from that list using grid and then have the changes post to the controller. Is this possible with your grid control.
If not can you suggest an alternative approach.

Thank you!
Andrew

3 Replies

PS Pavithra Subramaniyam Syncfusion Team February 13, 2019 06:04 AM UTC

Hi Graeme, 
 
Thanks for contacting Syncfusion support. 
 
You can achieve your requirement by using the “UrlAdaptor” of Essential JavaScript 2 DataManager. Pleaser refer to the below documentation for more information. 
 
 
Regards,  
Pavithra S. 
 



AN Andrew February 14, 2019 10:40 PM UTC

Pavithra,

I'm attempting to implement the URL Adapter but require further assistance. 
Here is the original code: 
Views/index.cshtml
<ejs-grid id="applianceGrid" dataSource="@Model.Appliances" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add""Edit""Delete"})" allowPaging="false" allowTextWrap="false">
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" showDeleteConfirmDialog="true">e-grid-editSettings>
    <e-grid-columns>
        <e-grid-column field="Type" headerText="Type:">e-grid-column>
        <e-grid-column field="Manufacturer" headerText="Manufacturer:">e-grid-column>
        <e-grid-column field="Model" headerText="Model:">e-grid-column>
        <e-grid-column field="Serial" headerText="Serial:">e-grid-column>
        <e-grid-column field="Age" headerText="Age:">e-grid-column>
    e-grid-columns>
ejs-grid>
Model: createJob.cs
public class CreateJobCommand : IRequest<ICommandResult>
    {
     ... Other simple properties, i.e. FirstName, LastName, etc...
        [Required]
        [Display(Name = "Appliances for this Job:")]
        public IList<ApplianceDTO> Appliances { getset; } = new List<ApplianceDTO>();

    }
I want to use ejs-grid, specifically the dialog edit functions of ejs-grid, for the above list 'Appliances'. 
I am trying to POST all the fields upon submit of a form. 
If I am to use URL Adapter, I assume that i must use it on the overall view model? my 'CreateJobCommand'
Then I have:
<ejs-grid id="applianceGrid" dataSource="@Model" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add""Edit""Delete"})" allowPaging="false" allowTextWrap="false">
    <e-data-manager url="?" updateUrl="/Job/addApplianceToModel">e-data-manager>
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" showDeleteConfirmDialog="true">e-grid-editSettings>
    <e-grid-columns>
        <e-grid-column field="Type" headerText="Type:">e-grid-column>
        <e-grid-column field="Manufacturer" headerText="Manufacturer:">e-grid-column>
        <e-grid-column field="Model" headerText="Model:">e-grid-column>
        <e-grid-column field="Serial" headerText="Serial:">e-grid-column>
        <e-grid-column field="Age" headerText="Age:">e-grid-column>
    e-grid-columns>
ejs-grid>
Also added new action method
public IActionResult addApplianceToModel([FromBody]CRUDModel<CreateJobCommand> value)
{        return Json(null); }
I'm not sure if this method signature is correct. The documentation shows different signatures in the eamples.
such as: "[FromBody]Data" and "[FromBody]DataManagerRequest". The current Signature I copied from the Sample Creator.
Also now that I've change the overall grid datasource and added the new data-manager with url attribute, it's not clear as to how I get just the list to update and then post back on form submition. 
Thank you. 
Andrew


MS Madhu Sudhanan P Syncfusion Team February 15, 2019 10:16 AM UTC

Hi Andrew, 

Thanks for your update. 

We have validated the provided information and we have created a sample for your reference.  In the below sample, we have used UrlAdaptor and performed CRUD(edit, add, delete) operation in server side. Please refer the below code example and sample for more information. 

<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
    <e-data-manager url="Home/UrlDatasource" insertUrl="Home/Insert" updateUrl="Home/Update" removeUrl="Home/CellEditDelete" adaptor="UrlAdaptor" /> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" isPrimaryKey="true" headerText="Order ID" textAlign="Right" width="120"></e-grid-column> 
        . . . . . 
   </e-grid-columns> 
</ejs-grid> 

using Syncfusion.EJ2.Base; //use this namespace for handling on-demand actions(DataManagerRequest) 
 
. . . . . . 
 
public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 
        { 
            System.Collections.IEnumerable data = OrdersDetails.GetAllRecords(); 
 
            DataOperations operation = new DataOperations(); 
 
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 
            { 
                data = operation.PerformSorting(data, dm.Sorted); 
            } 
            . . . . .             
            return dm.RequiresCounts ? Json(new { result = data, count = count }) : Json(data); 
        } 
 
        //Update the record 
        public ActionResult Update([FromBody]CRUDModel<OrdersDetails> value) 
        { 
            var ord = value.value; 
            OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID.Equals( ord.OrderID.ToString())).FirstOrDefault(); 
            val.OrderID = ord.OrderID; 
            . . . . . . 
            return Json(value.value); 
        } 
        //insert the record 
        public ActionResult Insert([FromBody]CRUDModel<OrdersDetails> value) 
        { 
 
            OrdersDetails.GetAllRecords().Insert(0, value.value); 
            return Json(value.value); 
        } 
        //Delete the record 
        public ActionResult CellEditDelete([FromBody]CRUDModel<OrdersDetails> value) 
        { 
            OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID.Equals( value.key)).FirstOrDefault()); 
            return Json(value); 
        } 
 
        public class Data 
        { 
 
            public bool requiresCounts { get; set; } 
            public int skip { get; set; } 
            public int take { get; set; } 
        } 
        public class CRUDModel<T> where T : class 
        { 
            public string action { get; set; } 
 
            public T value { get; set; } 
            . . . . . 
            public IDictionary<string, object> @params { get; set; } 
        } 


Help documentation:  



Note: If you want to perform only the CRUD operation(not grid actions such as filtering, sorting ect,) in server side then we suggest you to use RemoteSaveAdaptor to achieve your requirement. 


Regards, 
Madhu Sudhanan P 


Loader.
Live Chat Icon For mobile
Up arrow icon