1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. When add the first child grid record ,no records adding

When add the first child grid record ,no records adding

Hi, 
Q-When  I add the first child grid record  in batch mode, no records adding and
 when I press 'F12' 
 "Uncaught TypeError: e.getDate is not a function
    at ej2.min.js:1
    at e.toView (ej2.min.js:1)
    at e.format (ej2.min.js:1)
    at e.refreshCell (ej2.min.js:1)
    at e.render (ej2.min.js:1)
    at m (ej2.min.js:1)
    at e.refreshRow (ej2.min.js:1)
    at e.render (ej2.min.js:1)
    at e.<anonymous> (ej2.min.js:1)
    at e.notify (ej2.min.js:1)"
  But when I add record manually in database, it is view normal in child grid and I can adding new row normally too ?

My Controller :
     public async Task<IActionResult> CreateBatch([FromBody] CRUDModel<DayStartPenaltyConfigurationViewModel> ds_PenaltyConfigration)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    if (ds_PenaltyConfigration.Added.Count > 0)
                    {
                         //code

                    }
                    
                }
               
            }
            catch (Exception ex)
            {
                return BadRequest($"Error getting  from api: {ex.Message},{ex.InnerException}");
            }
        }


My View (index.cshtml)

@{
    ViewData["Title"] = ResourcesWeb.PayrollResource.DayStartPenaltyConfiguration;
}

<style>
    .e-toast-container .e-toast {
        background-color: #5cb85c;
    }
</style>
@{
    var beforeBatchSaveChild = "beforeBatchSave";
    var failure = "failure";
}
@{
    var timeParam = new Syncfusion.EJ2.Calendars.TimePicker();
    var dpParams = new Syncfusion.EJ2.Calendars.DatePicker();
    var dateNow = DateTime.Now.Date;
    var timeNow = DateTime.Now.ToShortTimeString();
}

@{
    //Html.AntiForgeryToken();
    var ChildGrid1 = new Syncfusion.EJ2.Grids.Grid()
    {
        DataSource = new Syncfusion.EJ2.DataManager()
        {
            Url = "/DayStartPenaltyConfiguration/DSConfigurationDatasource",
            BatchUrl = "/DayStartPenaltyConfiguration/CreateBatch",
            Adaptor = "UrlAdaptor"
        },
        BeforeBatchSave = beforeBatchSaveChild,
        //ActionBegin= "Begin",
        ActionFailure = failure,
        QueryString = "StartConfigRefID",
        EditSettings = new Syncfusion.EJ2.Grids.GridEditSettings()
        {
            AllowAdding = true,
            AllowEditing = true,
            ShowConfirmDialog = true,
            AllowEditOnDblClick=false,
            Mode = Syncfusion.EJ2.Grids.EditMode.Batch
        },
        Toolbar = new List<string>() { "Add", "Update", "Cancel" },
        //Aggregates = new List<Syncfusion.EJ2.Grids.GridAggregate> {
        //    new Syncfusion.EJ2.Grids.GridAggregate() {Columns =col} },
        AllowFiltering = true,
        AllowSorting = true,
        Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
new Syncfusion.EJ2.Grids.GridColumn(){ Field="ID", HeaderText="ID",DefaultValue=0, IsPrimaryKey=true, Width="120"},

new Syncfusion.EJ2.Grids.GridColumn(){ Field="FromDuration", HeaderText=ResourcesWeb.PayrollResource.FromDuration,CustomFormat=(new { type ="time",format=" HH:mm"})
,Width = "300", ValidationRules = (new {required=true}),DefaultValue = timeNow,Edit =(new {create = "createFrom", read = "readFrom", destroy = "destroyFrom", write = "writeFrom"}), EditType = "timepickeredit" },

new Syncfusion.EJ2.Grids.GridColumn(){ Field="ToDuration", HeaderText=ResourcesWeb.PayrollResource.ToDuration,CustomFormat=(new { type ="time",format=" HH:mm"})
,Width = "300", ValidationRules = (new {required=true}),DefaultValue = timeNow,Edit =(new {create = "createTO", read = "readTO", destroy = "destroyTO", write = "writeTO"}), EditType = "timepickeredit" },

new Syncfusion.EJ2.Grids.GridColumn(){ Field="PenaltyTimeAmount", HeaderText=ResourcesWeb.PayrollResource.PenaltyTimeAmount,CustomFormat=(new { type ="time",format=" HH:mm"})
,Width = "300", ValidationRules = (new {required=true}),DefaultValue = timeNow,Edit =(new {create = "createAmount", read = "readAmount", destroy = "destroyAmount", write = "writeAmount"}), EditType = "timepickeredit" },

new Syncfusion.EJ2.Grids.GridColumn(){ Field="StartConfigRefID", HeaderText=ResourcesWeb.PayrollResource.TicketPaths,Visible=false
                       ,Width="200" },
}

    };
}

<h1>@ResourcesWeb.PayrollResource.DayStartPenaltyConfiguration</h1>
<br /> 

<ejs-toast id="element" showCloseButton="true">
    <e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>
 
<ejs-grid id="DataGrid" gridLines="Both" childGrid="ChildGrid1" height="500"
          toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" created="created" allowPaging="true"
          allowSorting="true" allowFiltering="true" allowMultiSorting="true" allowReordering="true">
  
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"
                         mode="Dialog" showConfirmDialog="false" allowEditOnDblClick="false"></e-grid-editSettings>
    <e-grid-pagesettings pageSize="10"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="StartConfigRefID" headerText="ID" isPrimaryKey="true" textAlign="Right" width="50" visible="false"></e-grid-column>
        <e-grid-column field="ConfigurationName" headerText="@ResourcesWeb.PayrollResource.DSConfigurationRefName"                      
                       width="300" EditType="stringedit">
        </e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>
    function failure(args) {
        var errorMessage = args.error[0].error.responseText.split("Exception:")[1].split('<br>')[0];  //extract the message from args
        alert(errorMessage);
    }
    function beforeBatchSave(args) {
        for (var i = 0; i < args.batchChanges.addedRecords.length; i++) {
            args.batchChanges.addedRecords[i][this.queryString] = this.parentDetails.parentKeyFieldValue;  // maintain the querystring in the added record by setting the query string value as parentKeyFieldValue
        }
    }
 var grid = document.querySelector('#DataGrid').ej2_instances[0];
        grid.dataSource = new ej.data.DataManager({
            url: "/DayStartPenaltyConfigReference/UrlDatasource",
            insertUrl: "/DayStartPenaltyConfigReference/Create",
            //updateUrl: "/TicketPathReference/Edit",
            removeUrl: "/DayStartPenaltyConfigReference/Delete",
            adaptor: new CustomAdaptor()
        });
//other javascript code
</script>

Thanks for all







3 Replies 1 reply marked as answer
SK Sujith Kumar Rajkumar Syncfusion Team June 1, 2021 11:26 AM UTC

Hi Ahmed, 
 
Greetings from Syncfusion support. 
 
Based on the provided information, we could understand that you are facing issue while trying to add a new record in the child Grid. We would like to let you know that since the parent and child Grid are related by queryString field value, you need to set value for queryString field in the added data using the beforeBatchSave event handler in order to maintain this relation in the newly added record. 
 
This is demonstrated in the below code snippet where the parent record’s queryString field value(in this case ‘EmployeeID’ column) is set as the EmployeeID field value of the newly added records in the beforeBatchSave event, 
 
// Grid’s beforeBatchSave event handler 
function beforeBatchSave(args) { 
      if (args.batchChanges.addedRecords.length !== 0) { 
          // The current queryString value is set to the child Grid’s added data 
          args.batchChanges.addedRecords.forEach(dat => dat["EmployeeID"] = this.parentDetails.parentKeyFieldValue); 
      } 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 


AH Ahmed June 2, 2021 02:38 PM UTC

Hi,

Thanks a lot for your response, but

The problem is not when I click on Save button but the problem is when I click on Add button in child grid batch mode, No rows available for editing.

And when I press on F12 Key to show JavaScript Console, I found an error in ej.min.js

The Error Message is

"Uncaught TypeError: e.getDate is not a function ej2.min.js:1

    at ej2.min.js:1

    at e.toView (ej2.min.js:1)

    at e.format (ej2.min.js:1)

    at e.refreshCell (ej2.min.js:1)

    at e.render (ej2.min.js:1)

    at m (ej2.min.js:1)

    at e.refreshRow (ej2.min.js:1)

    at e.render (ej2.min.js:1)

    at e.<anonymous> (ej2.min.js:1)

    at e.notify (ej2.min.js:1)"


When I click Add

When Press F12 Key


SK Sujith Kumar Rajkumar Syncfusion Team June 3, 2021 10:58 AM UTC

Hi Ahmed, 
 
Based on the provided details and code snippet we could see that you have used the cell edit template for rendering edit controls for the ‘FromDuration’, ‘ToDuration’ and ‘PenaltyTimeAmount’ columns of the child Grid and suspect that this might be where the issue could be occurring. So please share us the following information to validate further on this, 
 
  • The cell edit template functions(create, write, read and destroy) defined for the child Grid columns.
  • Let us know how you have referenced the ej2.min.js script file in your application.
  • If possible share us a video demonstration of the problem to understand it better.
 
Regards, 
Sujith R 


Marked as answer
Loader.
Up arrow icon