We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

BUG: Changes on the grid in edit mode doesn't persist when saving them!!!

Hi

I am working in Syncfusion v15.2.0.40. The MVC grid have an strange behavior that is driving me nut. Is a trick one. Once the grid has 2 or more columns, when you click on the row and edit a cell, changes doesn't persist. I mean this:

My first column is called "Infracción". It's value in the second row is "Periodo 3". It looks like this:


I am going to edit it to read "Periodo 4". Here is the table while I am editing it:


The problem is that when I press enter, the row still shows "periodo 3" and not the updated value. Now... if I click the row to edit it again, ONLY THEN I see my updated value, but if I save it again, either by pressing enter or pressing the save button at the toolbar, the changes are not shown.

Again, I can only see my changes when the row enters to edit mode when I click on it.

This strange behavior makes the whole editing feature of the table completely useless.

Here is the code of my grid:

@(Html.EJ().Grid<object>("MultiplesImputacionesGrid")

                    .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().RowPosition(RowPosition.Bottom); })
                    .ToolbarSettings(toolbar =>
                    {
                        toolbar.ShowToolbar().ToolbarItems(items =>
                        {
                            items.AddTool(ToolBarItems.Add);
                            items.AddTool(ToolBarItems.Edit);
                            items.AddTool(ToolBarItems.Delete);
                            items.AddTool(ToolBarItems.Update);
                            items.AddTool(ToolBarItems.Cancel);
                        });
                    })
                    .Columns(col =>

                    {

                        col.Field("Infraccion").HeaderText("Infracción").TextAlign(TextAlign.Center).Add();

                        col.Field("Fecha").HeaderText("Fecha").Format("{0:dd/MM/yyyy}").TextAlign(TextAlign.Center).EditType(EditingType.Datepicker).Add();

                        col.Field("Periodos").HeaderText("Periodos").TextAlign(TextAlign.Center).Add();

                        col.Field("MultaAdministrativa").HeaderText("Multa Administrativa").TextAlign(TextAlign.Center).Add();

                        col.Field("GastosAdministrativos").HeaderText("Gastos Administrativos").TextAlign(TextAlign.Center).Add();
                    })
                )


There's a workaround for this??? Can I somehow force the grid to refresh the data when I save the row? The data is there because when I click the row, it shows the changes that I did. It just never shows it when I save the row.

Please help!! I must disable the editing feature of the grid because of this!

Thank you!!


7 Replies

SO Samuel Otero August 3, 2017 09:10 PM UTC

I thought that I created a workaround for this. I added a function to be called after the action of saving is completed. It looks like this:

function ActionCompleted(args) {

    if (args.requestType == "save") {

        var gridObj = $("#MultiplesImputacionesGrid").data("ejGrid");


        gridObj.refreshContent();

    }



But it DOESN'T WORK. It does a real mess. When I click the last row (the second row), the value of the cell change itself to the value of the top cell (the first row) and when I edit that second row, it actually edits the cell of the first row.

Refreshing the grid content doesn't help. This is a real mess!! OMG haven't anyone reported this?? 



TS Thavasianand Sankaranarayanan Syncfusion Team August 4, 2017 06:08 AM UTC

Hi Samuel, 

Thanks for contacting Syncfusion support. 

We have analyzed and checked your given code example. We suspect that you want to do CRUD operations in Grid but while editing the record first record value gets shown in other records editing. 

If Grid columns does not have primaryKey column then CRUD operations will not properly work. CRUD operations are performed based on the primaryKey column in Grid. So, you need to enable isPrimaryKey property in any one of the column, which has unique values. 

Refer the help documentation. 


We have already discuss about the mentioned issue in the following knowledge base documentation. 


If we misunderstood your query then please get back to us. 

Regards, 
Thavasianand S. 



SO Samuel Otero August 4, 2017 07:08 PM UTC

As your documentation suggest, I created one new column to be the primary key. The column is not been auto-incremented for now. I have another thread for that. But, for the sake of testing, I added a new column to be the primary key, and when I add a new row, I write an unique number for it. I do that until I have at least two rows. Then, when I try to edit the second one, same thing happens. It acts crazy. I don't have a datasource for this grid because it starts empty. This has something to do with the problem to edit, even if I have the primary key? Again, adding a unique number to the primary key cell when I add a new row, doesn't work. I try to edit the other columns with no avail.What I am doing wrong??? This is getting frustrating.


SO Samuel Otero August 4, 2017 07:22 PM UTC

Ok I investigated more and I think I found the reason why it doesn't work for me, even if I define a primary key. Understanding why, is even more frustrating.

First, I needed new rows to be added at the bottom of the grid, not above. Suggested by you in this thread, I have the following .js code that is the workaround and to the job:

if (args.requestType == "save") {       

this.model.dataSource.shift();// Remove the newly added record from first position       
this.model.dataSource.push(args.data)// Push the newly added record in data source       
this.refreshContent();    

}

Now, that does the job of putting rows at the bottom of the grid when they are saved, but that code is also the problem why I can't edit in my grid properly, even if I add a primary key. If I just comment or remove that code, adding a primary key resolves the problem of not been able to edit correctly. 

Again, I can edit if I add the primary key to the grid, but only if I delete the code that I need for the rows to be moved at the bottom of the grid when saved. Damn, what should I do so BOTH THINGS work properly??? Little bit frustrated here. Help!

Thank you



SO Samuel Otero August 7, 2017 01:52 PM UTC

Sooooooooooooo?? Someone is kinda desperate here! 

Thank you!



SO Samuel Otero August 7, 2017 03:33 PM UTC

I solved everything with some logic. I have some threads alive in this forum searching for ways to do some things. This codes resumes everything working well. I needed to add some custom logic to it in order to work properly.

var RecordJustAdded = false;

var InfraccionData = [

    { id: "Primera", text: "Primera" },

    { id: "Segunda", text: "Segunda" },

    { id: "Tercera", text: "Tercera" },

    { id: "Cuarta", text: "Cuarta" },

    { id: "Quinta", text: "Quinta" }, 

    { id: "Sexta", text: "Sexta" },

    { id: "Septima", text: "Séptima" },

    { id: "Octava", text: "Octava" },

    { id: "Novena", text: "Novena" },

    { id: "Decima", text: "Décima" }

];

function ActionBegin(args) {

    if (args.requestType == "save") {

        if (RecordJustAdded) {

            var index = this.model.dataSource.length - 1;

            if (index == -1) {

                args.data.InfraccionId = 1;

            }

            else {

                args.data.InfraccionId = this.model.dataSource[index].InfraccionId + 1

            }          

        }     

    }

    else if (args.requestType == "cancel") {

        RecordJustAdded = false

    }


}

function ActionCompleted(args) {

    if (args.requestType == "add") {


        $("#" + this._id + "Infraccion").ejDropDownList({


            dataSource: InfraccionData,


            field: { text: "text", value: "text" },

            width: "100%"

        });

        RecordJustAdded = true;

    }

    if (args.requestType == "save" && RecordJustAdded) {


        this.model.dataSource.shift();// Remove the newly added record from first position

        this.model.dataSource.push(args.data)// Push the newly added record in data source

        this.refreshContent();

        RecordJustAdded = false;

    }

Please refer to this thread in order to understand what that "RecordJustAdded" variable does.



PK Prasanna Kumar Viswanathan Syncfusion Team August 8, 2017 06:06 AM UTC

Hi Samuel, 

We are happy to hear that you have found the solution for the mentioned query.  

In the solution we found that you have used flag variable and for the flag variable you have defined true in the actionComplete event of ejGrid when the requestType is add. Instead of defining true value in the actionComplete event we also suggest you to define the true value for the flag variable in actionBegin event of ejGrid.  

In actionBegin event we check the condition with the gridform tr has class e-addedrow and define the true value for the flag variable.  

Find the code example and sample:  


@(Html.EJ().Grid<object>("FlatGrid") 
    .Datasource((IEnumerable<object>)ViewBag.datasource) 
    .AllowSorting() 
    .AllowPaging() 
    ----------------------------- 
    .Columns(col => 
     { 
        ---------------------- 
     }) 
  ) 
 
 
<script> 
 
    var RecordJustAdded = false; 
 
    var InfraccionData = [ 
 
    { id: "Reims", text: "Reims" }, 
 
    { id: "Lyon", text: "Lyon" }, 
 
    { id: "Charleroi", text: "Charleroi" }, 
 
    { id: "Bern", text: "Bern" }, 
 
    { id: "Resende", text: "Resende" }, 
 
    { id: "UK", text: "UK" }, 
 
    { id: "USA", text: "USA" }, 
 
    { id: "Berlin", text: "Berlin" }, 
 
    { id: "Belgium", text: "Belgium" }, 
 
    { id: "Graz", text: "Graz" } 
 
    ]; 
    function begin(args) { 
        if (args.requestType == "save" && this.element.find(".gridform").parents("tr").hasClass("e-addedrow")) { 
            var index = this.model.dataSource.length - 1; 
            args.data.OrderID = this.model.dataSource[index].OrderID + 1; 
            RecordJustAdded = true; 
        } 
    } 
    function complete(args) { 
        if (args.requestType == "add") { 
            $("#" + this._id + "ShipCity").ejDropDownList({ 
                dataSource: InfraccionData, 
                field: { text: "text", value: "text" }, 
                width: "100%" 
            }); 
        } 
        if (args.requestType == "save" && RecordJustAdded) { 
            this.model.dataSource.shift();// Remove the newly added record from first position 
            this.model.dataSource.push(args.data)// Push the newly added record in data source 
            this.refreshContent(); 
            RecordJustAdded = false; 
        } 
    } 
</script> 


For the mentioned query, you can also use the above solution. 

Regards, 
Prasanna Kumar N.S.V 


Loader.
Up arrow icon