Add addRecord si not working properly

[Manuel Caballero]

Hello,

If ou filter some column in a grid control, and then you add a new record with the javascript function addRecord, the row is added in the grid, but the row is not added in the dataSource object of the grid.

It only happens when one o more columns are filtered.

Thanks.

[Rajapandi Ravi]

Hi Manuel,

Greetings from Syncfusion support

Based on your query, it seems that after applying filters to multiple columns and invoking the addRecord method, the record is not being added to the Grid's dataSource.

To investigate further, we created a sample where we applied multiple column filters and then invoked the addRecord method. However, we were unable to reproduce the reported issue, as it worked as expected on our end.

Please refer to the code example and sample below for more details.

Index.cshtml

 

<script>

    function addRecord() { //addRecord button click event

        var obj = { OrderID: 1009, CustomerID: "Vinet", EmployeeID: 1, Freight: 12.32, ShipCountry: "Brazil", ShipCity: "Madrid" };

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

        grid.addRecord(obj);

    }

</script>

 

Sample: Check the attachment.

Screenshot:

Invoked the addRecord method after applying multiple column filter, add the new data in the datasource.

Since your provided information was not sufficient to proceed further, please verify and share the below details

1)            Ensure that the isPrimaryKey property is set in the Grid column. The editing feature requires a primary key

                column for CRUD operations. To define the primary key, set Columns.IsPrimaryKey to true for the relevant                                column. Please refer the below documentation for more information.

                Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/edit

2)            Share the code details on how you are invoking the addRecord method of the Grid. Additionally, provide the

                complete Grid rendering code so we can review your initialization settings, implemented features, and data                            binding.

3)           Share your Syncfusion NuGet package and script version.

4)           Share any issue reproducible sample or try to reproduce the issue with our shared sample that would be helpful

              for us to provide better solution.

Regards,
Rajapandi R

Attachment: 196160sample_f4a32a15.zip

[Manuel Caballero]

Hello,

To reproduce the issue, you have to set true the property EnableInfiniteScrolling.

Thanks!

[Rajapandi Ravi]

Manuel,

To reproduce the reported issue, we enabled the EnableInfiniteScrolling property as you mentioned. After enabling Infinite Scrolling, we attempted to replicate the problem by applying multiple column filters and then invoking the addRecord method. However, the record was successfully added to the Grid’s dataSource, and we did not encounter the reported issue on our end.

Index.cshtml

 

<div class="control-section">

    <button id="btn" onclick="addRecord()">Add Record</button>

    @Html.EJS().Grid("Grid").DataSource(ds => ds.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").InsertUrl("/Home/Insert").UpdateUrl("/Home/Update").RemoveUrl("/Home/Remove")).Columns(col =>

    {

       .  .  .  .  .  .  .  .  .  .  .  .  .  .

       .  .  .  .  .  .  .  .  .  .  .  .  .  .

       .  .  .  .  .  .  .  .  .  .  .  .  .  .   

 

}).Height("450").EnableInfiniteScrolling(true).PageSettings(page => page.PageSize(50)).Toolbar(new List<string>

        () { "Add", "Edit", "Delete", "Update", "Cancel" }).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true); }).Render()

</div>

 

<script>

    function addRecord() { //addRecord button click event

        var obj = { OrderID: 1009, CustomerID: "Vinet", EmployeeID: 1, Freight: 12.32, ShipCountry: "Brazil", ShipCity: "Madrid" };

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

        grid.addRecord(obj);

    }

</script>

Sample: Check the attachment.

Video demo: Check the attachment.

Since the reported problem only occurs in your application setup, kindly share us the requested information which was updated in our previous update and Share any issue reproducible sample or try to reproduce the issue with our shared sample that would be helpful for us to provide better solution.

Attachment: 196160attachmentsvideoandsample_283a7839.zip