Dirty Flag for Kendo Grid

2 Answers 2278 Views
Grid
Tuan Minh
Top achievements
Rank 1
Tuan Minh asked on 26 Oct 2016, 04:35 AM

Hello Telerik Team,

I have a MVC kendo Grid bound to an Ajax DataSource. The grid uses InCell Edit mode.

I wish to be able to change the content of the grid via js and have achieved this by using set:

var firstItem = $('#inventoryTransReview_grid').data().kendoGrid.dataSource.data()[0];
firstItem.set('Remark','test')

 

While this will change the Remark column content to 'test' and set firstItem.dirty to be true, it won't show the little "dirty flag" marker like it normally will in case of directly editing the Grid.

Is it because the Dirty Flag marker is handled by the Grid and not the DataSource? Any workaround to show the "dirty flag" marker in this case?

Thanks,

Michael.

2 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 26 Oct 2016, 08:48 AM

Hello Tuan Minh,

When a Grid dataItem property is modified through the set method, the change event of the dataSource is triggered, which forces rebinding of the Grid. As a result the table element of the Grid will be redrawn. I would recommend to check the following example:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/preserve-the-dirty-indicator-in-incell-editing-and-client-operations

which demonstrates how to achieve the desired result. It uses the JavaScript Grid, but the relevant part could be used in the MVC one too. The columns have a template, invoking a JavaScript function:

template: "#=dirtyField(data,'ProductName')# #:ProductName#"

which prepends the dirty indicator to the cells if the item is dirty:

function dirtyField(data, fieldName){
    var hasClass = $("[data-uid=" + data.uid + "]").find(".k-dirty-cell").length < 1;
    if(data.dirty && data.dirtyFields[fieldName] && hasClass){
        return "<span class='k-dirty'></span>"
    }
    else{
        return "";
    }
}

Regards,
Dimiter Madjarov
Telerik by Progress
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Tuan Minh
Top achievements
Rank 1
answered on 26 Oct 2016, 09:38 AM

Thanks. Works perfectly. Important to note to include this js function to Change event of the DataSource:

function(e){
                if(e.action == "itemchange"){
                    e.items[0].dirtyFields = e.items[0].dirtyFields || {};
                    e.items[0].dirtyFields[e.field] = true;
                }
            }
Dimiter Madjarov
Telerik team
commented on 26 Oct 2016, 10:16 AM

Hello Tuan Minh,

Yes you are correct, thank you for mentioning this.

Regards,
Dimiter Madjarov
Telerik by Progress
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
RON GERARD
Top achievements
Rank 1
commented on 23 Apr 2018, 02:27 AM

Thank you, tried to do it in asp.net core app, maybe it will help you :

https://demos.telerik.com/aspnet-core/

noureddine
Top achievements
Rank 1
commented on 10 Jul 2019, 12:50 PM

I have an issue. My grid does not show the data. it just display columns name. 
My Model is a System.Data.DataTable .and I have used the following code:

@(Html.Kendo().Grid<dynamic>().Name("ChallengesResult")
                                                                                                                                            .ToolBar(tools => tools.Excel())
                                                                                                                                            .Excel(excel => excel
                                                                                                                                                .FileName("RésultatsDesDéfis.xlsx")
                                                                                                                                                .Filterable(true)
                                                                                                                                                .AllPages(true)
                                                                                                                                            )
                                                                                                                                            .Columns(columns =>
                                                                                                                                            {
                                                                                                                                                foreach (System.Data.DataColumn column in Model.Result.Columns)

                                                                                                                                                {
                                                                                                                                                    if (column.ColumnName == "Name")
                                                                                                                                                        columns.Bound(column.ColumnName).Title("Nom").Width(100);
                                                                                                                                                    else if (column.ColumnName == "Fname")
                                                                                                                                                        columns.Bound(column.ColumnName).Title("Prénom").Width(100);
                                                                                                                                                    else if (column.ColumnName == "Total Score")
                                                                                                                                                        columns.Bound(column.ColumnName).Title("Score Total").Width(100);
                                                                                                                                                    else
                                                                                                                                                        columns.Bound(column.ColumnName);
                                                                                                                                                }
                                                                                                                                            })
                                                                                                                                            .HtmlAttributes(new { style = "height: 550px;" })
                                                                                                                                            .Scrollable()
                                                                                                                                            //.Groupable()
                                                                                                                                            //.Sortable()
                                                                                                                                            .Resizable(resize => resize.Columns(true))
                                                                                                                                            .Pageable(pageable => pageable
                                                                                                                                                        .Refresh(true)
                                                                                                                                                        .PageSizes(true)
                                                                                                                                                        .ButtonCount(5)
                                                                                                                                                      )
                                                                                                                                             .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("ReadData", "Teacher", new { SchoolClassId = Model.SchoolClassId })))
             Do you have any Idea why I can not get the data ?many thanks in advance

Preslav
Telerik team
commented on 11 Jul 2019, 10:35 AM

Hi Noureddine,

I checked the provided code and based on it, I am afraid that I am not sure what is causing the described faulty behavior.

Having said that, it will help me a lot if you can send us an isolated project that clearly replicates the issue. I will use this project to understand the case fully and eventually finding a workaround.

I look forward to your reply.


Regards,
Preslav
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Tuan Minh
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Tuan Minh
Top achievements
Rank 1
Share this question
or