How to update single row values in EJ2 grid control

[Vasyl Shepelyov]

Hi,

I'm struggling to find the way to update values of a single row in a grid control. I have 2 scenarios:

1. User selects a row, presses a separate button (outside of the grid), selected row's data is posted to a controller, controller modifies selected row's data and sends it back, grid's row is updated with new data. In this scenario, I don't know how to get grid's row updated with new data. Everything else seems to work fine. Here's the code I'm using:

function evaluate() {
 
            var form = $('#__AjaxAntiForgeryForm');
            var token = $('input[name="__RequestVerificationToken"]', form).val();
 
            var grid = document.getElementById("OrderHistoryGrid").ej2_instances[0];
            if (grid.getSelectedRowIndexes().length) {
 
                let selectedRow = grid.getSelectedRowIndexes()[0];
                let selectedRec = grid.getSelectedRecords()[0];
              
                $.ajax({
                    url: "/Orders/EvaluateOrder",
                    type: "POST",
                    data: {
                        __RequestVerificationToken: token,
                        orderData: selectedRec
                    },
                    success: function (data) {

                           ====== What to write here ? =====                     

                    },
                    error: function (jqXHR) {

                        alert("Error: can't evaluate: " + jqXHR.responseText)
                    }
                });
            } else {
                alert("No records selected.");
            }

          }

2. User presses the button which is rendered as custom template in each row. Data from respective row is posted to a controller, controller modifies the row's data and sends it back, grid's row is updated with new data. In this scenario, I'm not sure how to get relevant row's data on button click inside the row. Once I get this data, I'll be able to post it to controller. And then I'll need to update grid's row with modified data, which I'm not sure how to do.

Thank you in advance!

[Thavasianand Sankaranarayanan]

Hi Vasyl, 

Greetings from Syncfusion. 

Query #1: I don't know how to get grid's row updated with new data 

We suggest to use updateRow method of the Grid editModule to achieve this requirement. Please refer the following code snippet, 

document.getElementById('btn').addEventListener('click', function (e) { 

        var grid = document.getElementById('Grid').ej2_instances[0]; 

        var selectedRecords = grid.getSelectedRecords(); 

        var index = grid.getSelectedRowIndexes()[0]; 

        var data = JSON.stringify({ value: selectedRecords[0] }); 

        var ajax = new ej.base.Ajax({ 

            url: "/Home/Update", 

            type: "POST", 

            data: data 

        }); 

        ajax.send().then(function (data) { 

            grid.editModule.updateRow(index, JSON.parse(data)); 

        }).catch(function (xhr) { 

            console.log(xhr); 

        }); 

 

    }); 

Refer the help documentation. 

 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#getselectedrowindexes 

 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/edit/#updaterow 

Note: From your query, we found that you have manually performed the Grid update action. We have handled the Grid actions by using the primaryKey values of the Grid. So please do not change the primaryKey values while perform the manual update action. 

Query #2: I'm not sure how to get relevant row's data on button click inside the row 

From this query, we found that you want to access the row value details inside the command button click event. Please refer the following code to achieve this requirement, 

 

    function load() { 

        this.columns[3].commands[0].buttonOption.click = function (args) {     //click event for custom command button 

            var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

            var rowObj = grid.getRowObjectFromUID(ej.base.closest(args.target, '.e-row').getAttribute('data-uid')); 

            console.log(rowObj.data);  // You can get the respective row data here 

        } 

    }; 

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

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

Regards, 

Thavasianand S. 

[Vasyl Shepelyov]

Hi,

Thank you for your reply. What are pre-requisites for it to work? 

Provided sample just works fine. When I copy it to my project, it works fine. When I replace object from the sample project with my object, it doesn't work.

I've noticed that data source should be a static field in controller, otherwise it doesn't work. Is it possible to make it work without declaring data source as static field?

public class HomeController : Controller
{
    public static List<Orders> order = new List<Orders>();
 
    public ActionResult Index()

Just in case, my object is like this:

public class OrderHistory
    {
        public OrderHistory() { }
 
        public OrderHistory(int orderId, DateTime dateTimeUtc)
        {
            OrderId = orderId;
            DateTimeUtcTicks = dateTimeUtc.Ticks;
        }
 
        [Key]
        public int Id { get; set; }
 
        [Index("IX_OrderIdAndDate", Order = 0, IsUnique = true)]
        public int OrderId { get; set; }
        public Order Order { get; set; }
 
        [Index("IX_OrderIdAndDate", Order = 1, IsUnique = true)]
        public long DateTimeUtcTicks { get; set; }
 
        [NotMapped]
        public string DateTimeUtcTicksString
        {
            get
            {
                return DateTimeUtcTicks.ToString();
            }
            set
            {
                DateTimeUtcTicks = Convert.ToInt64(value);
            }
        }
 
        [NotMapped]
        public DateTime DateTimeUtc { get { return new DateTime(DateTimeUtcTicks, DateTimeKind.Utc); } }
 
        public bool AlreadyExistedInDb { get; set; }
 
        public string ShippingParametersChanges { get; set; }
        public bool ShippingParametersChanged { get { return !string.IsNullOrWhiteSpace(ShippingParametersChanges); } }
 
        public bool ShippingQuoteRequested { get; set; }
        public bool ShippingQuoteReceived { get; set; }
        public string ShippingQuoteError { get; set; }
 
        public List<ShippingService> ProposedShippingServices { get; set; }
 
        public string PreviousServiceCode { get; set; }
        public string NewServiceCode { get; set; }
 
        public bool NewServiceCodeSentToApi { get; set; }
        public bool NewServiceCodeApplied { get; set; }
        public string NewServiceCodeError { get; set; }
    }

Thank you

[Pavithra Subramaniyam]

Hi Vasyl, 

 

We need to maintain the values in the list until the program termination. So we have created the list as static. If we remove the static keyword, then the list will be created newly when we call the update method. We suspect that this is the cause of this issue. To resolve this issue, you need to reassign the values to the list in the update method before we filter the records from the list. Then only you can perform the update action with this non-static list. Please refer the following code snippet, 

 

public class HomeController : Controller 

    { 

        public List<Orders> order = new List<Orders>(); 

        public ActionResult Index() 

        { 

            if (order.Count == 0) 

                BindDataSource(); 

            ViewBag.data = order; 

            return View(); 

        } 

         

        public ActionResult Update(Orders value) 

        { 

            BindDataSource(); 

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

            if(data != null) 

            { 

                data.OrderID = value.OrderID; 

                data.CustomerID = "VINET"; 

                data.EmployeeID = 1; 

                data.OrderDate = new DateTime(2019, 01, 30); 

                data.ShipCity = "Brazil"; 

            } 

            return Json(data); 

        } 

        public void BindDataSource() 

        { 

            order.Add(new Orders(10248, 1, "1", "Reims", new DateTime(2108, 11, 12))); 

 

                  ...... 

       } 

   } 

 

Also, we have modified our sample with non-static list and that can be download from the below link, 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/F142355-modified-829836971.zip 

 

Regards, 

Pavithra S. 

[Vasyl Shepelyov]

Hi Pavithra, many thanks, new approach works fine.

Best regards,

Vasyl

[Pavithra Subramaniyam]

Hi Vasyl,  

Thanks for your update.  

We are happy to hear that the provided information helps you. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  

Pavithra S.