change row background color on change event

[Thomas]

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

[Dimiter Madjarov]

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

[Thomas]

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

[Dimiter Madjarov]

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

[Thomas]

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

[Dimiter Madjarov]

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

[Thomas]

Hi Dimiter,

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

have a great day