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

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.

Thread ID:

Created:

Updated:

Platform:

Replies:

142627 Feb 12,2019 05:27 PM UTC Feb 15,2019 10:16 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: DataGrid
Andrew
Asked On February 12, 2019 05:27 PM UTC

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


Andrew
Replied On 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

Madhu Sudhanan P [Syncfusion]
Replied On 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 


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