1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Enable edit only for the latest row item

Enable edit only for the latest row item

Hi,


My requirement is after editing a line item instead of updating that row it should create a new line item with changed values(I am able to achieve that, only issue is after the action Datagrid is not getting refreshed itself). so only the latest row should be editable.
Kindly help me in disabling the edit option for all the rows except the latest one. and if the Datagrid has no rows then only enable the create option else disable Add option.

3 Replies 1 reply marked as answer
SK Sujith Kumar Rajkumar Syncfusion Team June 12, 2020 01:20 PM UTC

Hi Sidhartha, 
 
Greetings from Syncfusion support. 
 
From your query we could understand that your requirement is to - “Only have one row editable(last added one) and on editing add a new record with the edited value. And also to enable ‘Add’ toolbar button only if there are no records in the Grid”. You can achieve this requirement using the following steps, 
 
In the below explained scenario initially the Grid is rendered with only one record and the primary key value of the first record is stored in global variable. Now using the toolbar module the ‘Add’ toolbar button is enabled or disabled based on the data source length. These operations are performed in the Grid’s dataBound event handler using flag variable so that it is only executed on initial render. 
 
// Global variable= to store the primary key value of the last edited row 
// Based on this value the only row(last edited row) to be edited can be determined 
var editPrimaryKeyId; 
var initialRender = true; 
 
// Grid’s dataBound event handler 
function onDataBound(args) { 
        if (initialRender) { 
            // The Grid data source’s primary key value is stored in global variable 
            editPrimaryKeyId = this.dataSource[0]["OrderID"]; 
            // ‘Add’ toolbar item is enabled/disabled based on data source length 
            if (this.dataSource.length === 0) { 
                this.toolbarModule.toolbar.enableItems(0, true); 
            } else { 
                this.toolbarModule.toolbar.enableItems(0, false); 
            } 
            initialRender = false; 
        } 
} 
 
You also need to enable/disable the ‘Add’ toolbar item in the actionComplete event handler using timeout function(Since only after data add is completely over the toolbar status is updated in the Grid. So need to change the ‘Add’ toolbar item status only after this is completed) as demonstrated in the below code snippet, 
 
// Grid’s actionComplete event handler 
function actionComplete(args) { 
        if (args.requestType === "save" || args.requestType === "delete") { 
            var proxy = this; 
            // ‘Add’ toolbar item is enabled/disabled based on data source length 
            (this.dataSource.length === 0) ? setTimeout(function () { proxy.toolbarModule.toolbar.enableItems(0, true) }, 2) : setTimeout(function () { proxy.toolbarModule.toolbar.enableItems(0, false) }, 2); 
        } 
} 
 
Now in the Grid’s actionBegin event handler the edit operation is cancelled if the stored primary key value is not the same for the currently edited row. Then while saving the record for the edit operation the edit is cancelled and closed by setting false value to the arguments cancel property and using the Grid’s closeEdit method respectively. The edited data retrieved from the actionBegin arguments is added as new record using the Grid’s addRecord method. Also when new row data is added(When no records are present in the Grid) its primary key value needs to be updated in the global variable. This is demonstrated in the below code snippet, 
 
// Grid’s actionBegin event handler 
function actionBegin(args) { 
        // Executed only if data source is not empty 
        if (this.dataSource.length !== 0) { 
            if (args.requestType === "beginEdit" && args.rowData["OrderID"] !== editPrimaryKeyId) { 
                // Edit operation is cancelled if it is not the latest added row 
                args.cancel = true; 
            } 
            if (args.action !== "add" && args.requestType === "save") { 
                // Deep copy of the edited data 
                var newData = Object.assign({}, args.data); 
                // Save operation is cancelled and edit is closed 
                args.cancel = true; 
                this.closeEdit(); 
                // Randomly generated number for the new data’s primary key 
                newData["OrderID"] = newData["OrderID"] + parseInt(Math.random() * 100); 
                // The latest row’s primary key is updated in the global variable 
                editPrimaryKeyId = newData["OrderID"]; 
                // Edited data is added as new record 
                this.addRecord(newData); 
            } 
        } else if (this.dataSource.length === 0 && args.action === "add" && args.requestType === "save") { 
            // The newly added row’s primary key is updated in the global variable 
            var newData = Object.assign({}, args.data); 
            editPrimaryKeyId = newData["OrderID"]; 
        } 
} 
 
We have prepared a sample based on this for your reference. You can download it from the following link, 
 
 
 
Using this approach you can achieve your requirement. 
 
If we misunderstood your query or if you require any further assistance then please get back to us. 
 
Regards, 
Sujith R 


SI Sidhartha June 19, 2020 11:17 AM UTC

The example you provided works fine , but my datasource is through URL. In that case it does not work. Here is the code sample 

Controller URLDatasourcemethod:

public ActionResult UrlDatasource2380([FromBody]DataManagerRequest dm)
        {

            IEnumerable DataSource = _context.Parameter.Where(pr => pr.PlantCode == "2380").ToList();

            DataOperations operation = new DataOperations();
            if (dm.Search != null && dm.Search.Count > 0)
            {
                DataSource = operation.PerformSearching(DataSource, dm.Search);  //Search
            }
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
            {
                DataSource = operation.PerformSorting(DataSource, dm.Sorted);
            }
            int count = DataSource.Cast().Count();
            if (dm.Skip != 0)//Paging
            {
                DataSource = operation.PerformSkip(DataSource, dm.Skip);
            }
            if (dm.Take != 0)
            {
                DataSource = operation.PerformTake(DataSource, dm.Take);
            }

            return Json(new { result = DataSource, count = count });
        }

Create Method

public ActionResult Create([FromBody]CRUDModel value)
        {           //do stuff
                        
            _context.Parameter.Add(value.Value);
            _context.SaveChanges();
            return Json(value.Value);
        }    

Update Method

public ActionResult Update([FromBody]CRUDModel parameter)
        {

            var ptmr = parameter;

            Parameter val = _context.Parameter.Where(or => or.ID == ptmr.Value.ID).FirstOrDefault();
            val.ID = 0;
            val.PlantCode = ptmr.Value.PlantCode;
            val.LabourRate = ptmr.Value.LabourRate;
            val.PlantCode = ptmr.Value.PlantCode;
            val.ProductionOverhead = ptmr.Value.ProductionOverhead;
            val.MaterialOverhead = ptmr.Value.MaterialOverhead;
            val.InventoryCarryingCost = ptmr.Value.InventoryCarryingCost;
            val.SGA = ptmr.Value.SGA;
            val.Margin = ptmr.Value.Margin;
            val.ServiceRepairRate = ptmr.Value.ServiceRepairRate;
            val.RejectionRate = ptmr.Value.RejectionRate;
            val.UpdatedDate =System.DateTime.Now.Date;

            _context.Parameter.Add(val);
            _context.SaveChanges();
            return Json(val);
        }


CSHTML:

 

                       

                       
                        

                       

                           
                            
                           
                           

                           

                           

                           

                           

                           

                           

                           

                           

                            


                       
                   



                   

Kindly help me .

SK Sujith Kumar Rajkumar Syncfusion Team June 22, 2020 08:04 AM UTC

Hi Sidhartha, 
 
With the remote data you will not be able to access the entire data source from the Grid’s dataSource property. For this case instead of checking the Grid’s dataSource length in the event handlers you can check the Grid’s currentViewData(returns the current visible data) property length to achieve your requirement. This is demonstrated for the previous customization provided in the below code snippet, 
 
function onDataBound(args) { 
        if (initialRender) { 
            editPrimaryKeyId = this.currentViewData[0]["OrderID"]; 
            if (this.currentViewData.length === 0) { 
            this.toolbarModule.toolbar.enableItems(0, true); 
        } else { 
            this.toolbarModule.toolbar.enableItems(0, false); 
            } 
            initialRender = false; 
        } 
} 
 
function actionComplete(args) { 
        if (args.requestType === "save" || args.requestType === "delete" || args.requestType === "cancel") { 
            var proxy = this; 
            (this.currentViewData.length === 0) ? setTimeout(function () { proxy.toolbarModule.toolbar.enableItems(0, true) }, 2) : setTimeout(function () { proxy.toolbarModule.toolbar.enableItems(0, false) }, 2); 
        } 
    } 
 
    function actionBegin(args) { 
        if (this.currentViewData.length !== 0) { 
            if (args.requestType === "beginEdit" && args.rowData["OrderID"] !== editPrimaryKeyId) { 
                args.cancel = true; 
            } 
            if (args.action !== "add" && args.requestType === "save") { 
                var newData = Object.assign({}, args.data); 
                args.cancel = true; 
                this.closeEdit(); 
                newData["OrderID"] = newData["OrderID"] + parseInt(Math.random() * 100); 
                editPrimaryKeyId = newData["OrderID"]; 
                this.addRecord(newData); 
            } 
        } else if (this.currentViewData.length === 0 && args.action === "add" && args.requestType === "save") { 
            var newData = Object.assign({}, args.data); 
            editPrimaryKeyId = newData["OrderID"]; 
        } 
    } 
 
Modified sample for your reference, 
 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


Marked as answer
Loader.
Up arrow icon