Show Hidden fields on Edit Dialog

 I have tried to follow your example in the guide and when I put the ActionBecgin part in my grid it returns a blank page with this error in the javascript browser.



Here is my code:
<div class="inventoryGrid">
    @Html.EJS().Grid("InventoryGrid").DataSource(DataManager => { DataManager.Json(@Model.Inventory.ToArray()).InsertUrl("/Home/AddInventoryItem").UpdateUrl("/Home/UpdateInventoryItem").Adaptor("RemoteSaveAdaptor"); }).AllowFiltering(true).AllowSorting(true).ActionBegin("actionBegin").ActionComplete("actionComplete")Columns(col =>
    {
    col.Field("InventoryID").HeaderText("Id").IsPrimaryKey(true).IsIdentity(true).AllowEditing(false).Width("40").Add();
    col.Field("HECNumber").HeaderText("HEC Number").Width("50").Visible(false).Add();
   
    }).AllowPaging(true).FilterSettings(filter => filter.Columns(filterColumns)).SortSettings(sort => sort.Columns(sortColumns)).PageSettings(page => page.PageSize(15)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit" }).Render()

</div>

@Html.EJS().ScriptManager()

function actionBegin(args) {
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            for (var i = 0; i < this.columns.length; i++) {
               if (this.columns[i].field == "HEC Number") {
                   this.columns[i].visible = true;
               }
              
            }
        }
    }

    function actionComplete(args) {
        if (args.requestType === 'save') {
            for (var i = 0; i < this.columns.length; i++) {
                if (this.columns[i].field == "HEC Number") {
                    this.columns[i].visible = false;
                }
               
                }
        }
    }
</script>

1 Reply 1 reply marked as answer

VS Vignesh Sivagnanam Syncfusion Team January 25, 2021 09:04 AM UTC

Hi Danyelle 

Greetings from Syncfusion support 

Based on your query we have prepared a sample using your code example and we are able to reproduce the reported issue at our end. To resolve the mentioned issue we suggest to add the ScriptManager at the bottom of the page. Please refer the below code example for your reference 

Code Example:   
@Html.EJS().Grid("RemoteSaveAdaptor").DataSource(dataManager => { dataManager.Json(@Model.orderData.ToArray()).InsertUrl("/Home/Insert").RemoveUrl("/Home/Delete").UpdateUrl("/Home/Update").Adaptor("RemoteSaveAdaptor"); }).Columns(col => 
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("30%").Add(); 
    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add(); 
    col.Field("CustomerID").HeaderText("CustomerID").Width("70").Visible(false).Add(); 

}).AllowPaging().ActionBegin("actionBegin").ActionComplete("actionComplete").AllowSorting(true).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Render() 

<script> 
  function actionBegin(args)
    if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { 
      for (var i = 0; i < this.columns.length; i++) { 
        if (this.columns[i].field == "CustomerID") { 
          this.columns[i].visible = true; 
        } 

      } 
    } 
  } 
  function actionComplete(args) { 
    if (args.requestType === 'save') { 
      for (var i = 0; i < this.columns.length; i++) { 
        if (this.columns[i].field == "CustomerID") { 
          this.columns[i].visible = false; 
        } 

      } 
    } 
  } 

</script> 
@Html.EJS().ScriptManager() 


Please get back to us if you require any further assistance. 

Regards, 
Vignesh Sivagnanam 


Marked as answer
Loader.
Up arrow icon