How to see dirty flag on the cell after change cell's value programmatically?

4 Answers 645 Views
Grid
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
Daochuen asked on 14 May 2021, 08:32 PM

hello, 

I have students kendo grid in my MVC project with below settings . I’d like to mark dirty flag on the certain cells programmatically. But I didn’t see dirty flag (red triangle on let top corner) on the cell after I run js code. Could someone help me out? Thanks!

 

.Editable(editable => editable.Mode(GridEditMode.InCell))

                .ColumnMenu()

                .Resizable(resizable => resizable.Columns(true))

                .Pageable(p => p.PageSizes(new int[] {25, 50, 100 }))

                .DataSource(dataSource => dataSource

                    .Ajax()

                    .Batch(true)

                    .ServerOperation(false)

                    .PageSize(15)

                                ...

 

Run JavaScript when button click:

 

        $("#markDirty").click(function (e) {

            e.preventDefault();

            var grid = $("#studentGrid").data("kendoGrid");

            var data = grid.dataSource.data();

 

            for (var i = 0; i < data.length; i++) {

                if (data[i].ClassName == "MVC") {

                    data[i].ClassName = "MVC 5.0";

                    data[i].dirty = true;

                }

            }

            grid.refresh();//didn't see the data change without this line.

        });

4 Answers, 1 is accepted

Sort by
0
Accepted
Petar
Telerik team
answered on 19 May 2021, 08:45 AM

Hello Daochuen,

Try changing the "markDirty" function as it is demonstrated below.

$("#markDirty").click(function (e) {
    e.preventDefault();
    var grid = $("#studentGrid").data("kendoGrid");
    var data = grid.dataSource.data();

    for (var i = 0; i < data.length; i++) {

        if (data[i].ClassName == "MVC") {
            data[i].set("ClassName", "MVC 5.0");
            data[i].dirty = true;
        }

    }
    grid.refresh();//didn't see the data change without this line.
});

What I've changed, compared to your implementation, is the line in yellow. The suggested approach uses the set method. When testing the above code locally, everything seems to be as you need it in your application. 

Check the suggested approach and let me know if you have additional questions. 

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 19 May 2021, 02:13 PM

Thanks Petar.  Result is same - data got changed but no red triangle dirty flag showed on the top left corner of the cell.

Petar
Telerik team
commented on 21 May 2021, 12:50 PM

Hi Daochuen,

Can you check the attached project? It uses the code I shared in my previous reply. You will see that together with the data change, there is a dirty flag in the "Class Name" column. 

Can you compare the implementation of the attached project with the one in the application you are working on? Maybe you will spot some differences that can be the reason why the dirty flags don't appear? What Kendo UI Theme do you use? Are there any custom CSS styles applied to your project? Such styles could be hiding the dirty flag.  

If you don't manage to go resolve the issue in your application, can you replicate it in the attached project? Once the issue can be reproduced in the attached example, send it to me and I will further investigate what is happening in it. 

Regards,
Petar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Petar
Telerik team
answered on 21 May 2021, 12:51 PM

Here is the attached project

 

Regards,
Petar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 22 May 2021, 04:11 AM

 Hi Petar

 Thank you for provided the code. Our system does not allow to run other project directly except adding more security code on. I didn’t take that action but I believe that you can see the “dirty flag” in your sample project.  By comparing the files I found version of our jquery files are much older than yours. I guess that might be the problem. Thank you very much for your effort to help me the issue.

Petar
Telerik team
commented on 26 May 2021, 07:40 AM

Hi Daochuen.

I hope that updating the jQuery version of your project will resolve the issue with the "dirty flag".

Tags
Grid
Asked by
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Petar
Telerik team
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or