ASP.NET MVC Grid change color of row

2 posts, 0 answers
  1. Rimes
    Rimes avatar
    1 posts
    Member since:
    Mar 2016

    Posted 23 Mar 2016 Link to this post

    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
                             .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 = $("tr"); //get the row


    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

  2. Radoslav
    Radoslav avatar
    1566 posts

    Posted 28 Mar 2016 Link to this post

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

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

    I hope this helps.

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top