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.

[Andrew]

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

[Pavithra Subramaniyam]

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. 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#persisting-data-in-server  

 

Regards,  

Pavithra S. 

 

[Andrew]

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 { get; set; } = 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

[Madhu Sudhanan P]

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

        } 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Core_UrlAdaptorCRUD-51808655  

Help documentation:  

https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#handling-on-demand-grid-actions  

https://ej2.syncfusion.com/documentation/data/adaptors/?no-cache=1#url-adaptor  

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. 

https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#remote-save-adaptor  

Regards, 

Madhu Sudhanan P