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 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
                             .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

  2. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 28 Mar 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) {
            
     
            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
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top