ASP.NET MVC Grid change color of row

[Rimes]

I am trying to build an offline app with telerik grids. I am using grid with inline editing 

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

Now i want to check, before of after the save attempt was made (actually it would be a lot better before, but i couldnt manage that with inline editing, so I am waiting for the result from the controller), if there is an internet connection, and if not to save the data in the localstorage and change the color of the row to indicate that this entry has not been saved to the server. I have tried to use the onChange on the datasource and check if the "sync" button is pressed.

.DataSource(dataSource => dataSource
                         .Ajax()
                         .PageSize(10)
                         .Model(model => model.Id(p => p.Nr))
                         .Events(events => events.Change("onChange"))
                         .Create(update => update.Action("Service_Create", "Service"))
                         .Update(update => update.Action("Service_Update", "Service"))
                         .Read(read => read.Action("Service_Read", "Service").Data("ServiceSearchparameter"))
                    )

function onChange(e) {
        if (e.action == 'sync') {

            var tr = $(e.target).closest("tr"); //get the row

            tr.addClass("offlineElement");


        }
   }

 

When I do it like that, nothing is happening, I checked the sourcecode and the class "offlineElement" is not being added to the tr

Is there something I am missing ?

 

P.S Sorry for posting here, since I am using the trial version, I am not allowed to post on ASP.NET MVC forum

[Radoslav]

Hello Rimes,

To achieve the desired functionality you can use following approach:
In onChange event cache the uid of the row which you want to highlight and then in databound event add the desired class to all cached rows:

<script type="text/javascript">
    var uids = [];
    function onChange(e) {
        …

        uids.push(e.items[0].uid);
…
    }

    function DataBound(e) {
        uids.forEach(function (item) {
            var tr = $("#grid").find('tr[data-uid=' + item + ']'); //get the row

            tr.addClass("offlineElement");
        });

    }

</script>

Additionally I am sending you a simple example which demonstrates this approach.

I hope this helps.

Regards,
Radoslav
Telerik