change row background color on change event

7 posts, 2 answers
  1. Thomas
    Thomas avatar
    21 posts
    Member since:
    Aug 2013

    Posted 02 Oct 2013 Link to this post

    I'm using a Kendo UI Grid that is changing the bg color of each row due to a condition in the databound event like this:
    function onDataBound(e) {
     
        var grid = $("#Software").data("kendoGrid");
        var gridData = grid.dataSource.view();
     
        for (var i = 0; i < gridData.length; i++) {
            var currentUid = gridData[i].uid;
            if (gridData[i].CategoryID == 1) {
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).addClass("green");
            }
            else if (gridData[i].CategoryID == 2 ){
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).addClass("red");
            }
            else {
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).addClass("yellow");
            }
        }
    }
    I have a custom column where 3 buttons are given to categorize. What I want to do now, is to change the background color of a row immideately, when one of these buttons is clicked. The background color changes, when the grid is reloaded, but this takes far too long 'cause the grid is filled with a lot of data. I only want to add e.g. the css class "green" to the affected row. 
    For example:
    function SetGreen(sid, cid) {
     
        var grid = $("#grid").data("kendoGrid");
     
        cid =1;
        var url = '@Url.Action("SetMethod","SetController")';
     
        $.post(url, { SID: sid, CID: cid });
     
        grid.saveChanges();
     
        //right here I want to set the bg color for the affected row
    }
    thanks in advance
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2272 posts

    Posted 02 Oct 2013 Link to this post

    Hello Thomas,


    If I understand correctly, the setGreen function is executed on button click and the button is inside a Grid column. If that is the case, I would suggest you to use the closest jQuery method to get the current row.
    E.g.
    $(this).closest("tr").addClass("green");

    Please let me know if this was the information that you were looking for. I wish you a great day!

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Thomas
    Thomas avatar
    21 posts
    Member since:
    Aug 2013

    Posted 02 Oct 2013 Link to this post

    Hi Dimiter,

    your assumption is totally right. The buttons are inside of a grid column and use a clienttemplate, 'cause the buttons are images <input type='image'>, hope this
    makes no difference.

    I tried to use your provided code snippet, by putting it at the end of the setGreen function, but it didn't work. If I alert($(this).closest("tr")); the output is
    [object Object], but the row color didn't change.

    any further advice?

    thanks in advance
  4. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2272 posts

    Posted 03 Oct 2013 Link to this post

    Hello Thomas,


    I am not sure what is the exact reason for the problem. Here is the configuration, that I am testing with on my side.
    E.g.
    columns.Bound(p => p.UnitsInStock).ClientTemplate("<input type='image' class='mytest'>");

    $("#Grid").on("click", ".mytest", function () {
        $(this).closest("tr").css("background-color", "green");
    });

    If you are experiencing any further issues, please share some of the code from the Grid configuration, so I could inspect it further.

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Thomas
    Thomas avatar
    21 posts
    Member since:
    Aug 2013

    Posted 03 Oct 2013 Link to this post

    Hi Dimiter,

    this is exactly what I was looking for! many many thanks. I have one last question left: after one of the buttons is clicked, the row color changes now perfectly, but I want to do some database operations in the background as well. how can I pass parameters? I tried to pass SID, CID via the function call of setgreen
    .ClientTemplate(
    "<input type='image' src='" + @Url.Content("~/Content/Images/32x32/bullet_green.png") + "' class='SetGreen("#=SID#","#=CID#")'>");
    $("#Grid").on("click", ".SetGreen", function (sid, cid) {
    $(this).closest("tr").css("background-color", "rgb(232, 246, 222)");
     
    if (cid == 'null') {
     
                cid = 2;
                var url = '@Url.Action("SetAction", "Controller")';
            }
            else {
                cid = 2;
                var url = '@Url.Action("SetAction", "Controller")';
            }       
    var grid = $('#Grid').data('kendoGrid');
             
     
    $.post(url, { SID: sid, CID: cid });
    grid.saveChanges();
     
        });
    but this is not working. What is the correct way of passing parameters here? I'm really new to js and the kendo ui so I may ask strange questions :D

    cheers and many thanks
  6. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2272 posts

    Posted 03 Oct 2013 Link to this post

    Hi Thomas,


    This is the correct syntax for passing additional parameters via jQuery post method. Here is an example from the jQuery API page.
    E.g.
    $.post( "test.php", { name: "John", time: "2pm" })
      .done(function( data ) {
        alert( "Data Loaded: " + data );
      });

    You could check the console of your browsers developer tools for JavaScript errors and also the network tab to ensure that the request is sent correctly. 


    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Thomas
    Thomas avatar
    21 posts
    Member since:
    Aug 2013

    Posted 04 Oct 2013 Link to this post

    Hi Dimiter,

    many many thanks for your help. that fixed the issue.

    have a great day
Back to Top