Dirty Flag for Kendo Grid

[Tuan Minh]

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.

[Dimiter Madjarov]

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

 

 

[Tuan Minh]

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]

Hello Tuan Minh,

Yes you are correct, thank you for mentioning this.

Regards,
Dimiter Madjarov
Telerik by Progress

 

 

[RON GERARD]

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

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

[noureddine]

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]

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