EJ2 Grid Update button not working

[David Davies]

I'm trying to get the Grid to work with a Web API datasource. I can get it to bind to the API Controller and display but cannot get the Update button to work, either when adding or editing data. When I click on it, nothing happens. It doesn't seem to want to fire. Am I missing a step?

<div class="row">
    <div class="col-md-6">
        <ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Cancel"})">
            <e-grid-editSettings allowAdding="true" allowEditing="true"></e-grid-editSettings>
            <e-data-manager id="myData" url="/api/Countries" adaptor="WebApiAdaptor" crossDomain="true"></e-data-manager>
            <e-grid-columns>
                <e-grid-column field="Id" headerText="Id" isPrimaryKey="true" isIdentity="true" textAlign="Right" width="120"></e-grid-column>
                <e-grid-column field="Name" headerText="Country Name" textAlign="Left"></e-grid-column>
            </e-grid-columns>
        </ejs-grid>
    </div>
</div>

[Venkatesh Ayothi Raman]

Hi David, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and tried to reproduce the mentioned issue. But it was unsuccessful at our end. We suspect that you have not handled update action in server side properly. So refer the below code snippet to achieve this requirement, 

Grid: 

 

<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })"> 

    <e-data-manager id="myData" url="/api/Orders" adaptor="WebApiAdaptor" crossDomain="true"></e-data-manager> 

 

                  ... 

 

</ejs-grid> 

 

-------------------------------------------------------------------------------------- 

 

Controller Side: 

 

namespace AngularwithASPCore.Controllers 

{ 

    [Produces("application/json")] 

    [Route("api/Orders")] 

    public class OrdersController : Controller 

    { 

        // GET: api/Orders 

        [HttpGet] 

 

        public object Get() 

        { 

            var queryString = Request.Query; 

            int skip = Convert.ToInt32(queryString["$skip"]); 

            int take = Convert.ToInt32(queryString["$top"]); 

            var data = OrdersDetails.GetAllRecords().ToList(); 

            return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() }; 

        } 

 

        // POST: api/Orders 

        [HttpPost] 

        public object Post([FromBody]OrdersDetails value) 

        { 

            OrdersDetails.GetAllRecords().Insert(0, value); 

            return value; 

        } 

 

 

        // PUT: api/Orders/5 

        [HttpPut] 

        public object Put(int id, [FromBody]OrdersDetails value) 

        { 

            var data = OrdersDetails.GetAllRecords().Where(or => or.OrderID == value.OrderID).FirstOrDefault(); 

            if (data != null) 

            { 

                var ord = value; 

                OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 

                val.OrderID = ord.OrderID; 

                val.EmployeeID = ord.EmployeeID; 

                val.CustomerID = ord.CustomerID; 

                val.Freight = ord.Freight; 

                val.OrderDate = ord.OrderDate; 

                val.ShipCity = ord.ShipCity; 

            } 

            return value; 

        } 

 

        // DELETE: api/ApiWithActions/5 

        [HttpDelete("{id:int}")] 

        [Route("Orders/{id:int}")] 

        public void Delete(int id) 

        { 

            var data = OrdersDetails.GetAllRecords().Where(or => or.OrderID == id).FirstOrDefault(); 

            OrdersDetails.GetAllRecords().Remove(data); 

        } 

    } 

} 

We have prepared the sample with this requirement and that can be download from the below link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/F1414041670103206.zip 

Still If you facing this sample issue, please share the following details for further assistance, 

1. Full Grid code and controller code.
2. Network tab response while perform CRUD actions in Grid.
3. If any errors displayed in console window, then please share the screenshot of that error.
4. If possible try to reproduce the reported issue in that sample and send back to us.
5. Grid package version.

Regards, 

Venkatesh Ayothiraman. 

[David Davies]

Looks like I've got it working now, thanks.

Spoke too soon. While the PUT is working, the POST isn't. I've copied the function declaration from your example but it's giving me the following error when I try to save a new record:

HTTP400: BAD REQUEST - The request could not be processed by the server due to invalid syntax.
(XHR)POST - https://localhost:44366/api/Countries

I am curious about something else. The Id (first parameter) of the PUT function is always zero. Why is that?

[Mohammed Farook J]

Hi David, 

 

Query #1: HTTP400: BAD REQUEST - The request could not be processed by the server due to invalid syntax. 

 

We have analyzed your query and suspect that client-side request arguments do not match with controller side arguments. So please ensure this cause in your project. And also we found that you have enabled IsIdentity property in the primary key column. While enabling the IsIdentity property in a primary key column, then it should be handled in server side while inserting records to Grid. Please refer the below code snippet, 

 

public object Post([FromBody]OrdersDetails value) 

        { 

            //Here we have auto-incremented the identity column value So you can change based on your requirement 

            value.OrderID = OrdersDetails.GetAllRecords().First().OrderID + 10000;  

            OrdersDetails.GetAllRecords().Insert(0, value); 

            return value; 

        } 

Note: If corresponding data source has isIdentity field then it will automatically handle the Is Identity value while adding the record.  

 

Still If you facing the same issue, please share the following details for further assistance, 

 

1. Full Grid code and controller code.
2. Network tab response while adding the new record.
3. Video demonstration of this issue.
4. If possible, try to reproduce this issue in our previous update sample and send back to us.

 

Query #2: The Id (first parameter) of the PUT function is always zero 

 

We have used this id (i.e First parameter of the put method) to collect when some additional parameters passed from the client side. If you do not pass any additional parameter, then please remove that first parameter from your code. Please use the below code, 

 

public object Put([FromBody]OrdersDetails value) 

        { 

            var data = OrdersDetails.GetAllRecords().Where(or => or.OrderID == value.OrderID).FirstOrDefault(); 

            if (data != null) 

            { 

                var ord = value; 

                OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 

                val.OrderID = ord.OrderID; 

                val.EmployeeID = ord.EmployeeID; 

                val.CustomerID = ord.CustomerID; 

                val.Freight = ord.Freight; 

                val.OrderDate = ord.OrderDate; 

                val.ShipCity = ord.ShipCity; 

            } 

            return value; 

        } 

 

Regards, 

J Mohammed Farook. 

 

 

 

 

 

[David Davies]

Thanks again.

It was indeed the isIdentity that was causing the problem.

I now have it working. However, I did hit another issue when adding a record. For some reason, despite it being an identity field, the Grid was expecting me to manually type in an ID. I tried to disable editing on the column but allowEditing="false" didn't work. So, in the end I just hid the column altogether using visible="false".

[Mohammed Farook J]

Hi David, 

We are able to reproduce the reported issue “AllowEditing property is not working in IsIdentity column” and logged a defect report for the same. This fix will be available in upcoming patch release at first week of January, 2019. Until then we appreciate your patience. 

 

 

Regards, 

J Mohammed Farook