This is a migrated thread and some comments may be shown as answers.

change row background color on change event

6 Answers 765 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 2
Thomas asked on 02 Oct 2013, 08:04 AM
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

6 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 02 Oct 2013, 09:52 AM
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!
0
Thomas
Top achievements
Rank 2
answered on 02 Oct 2013, 11:54 AM
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
0
Accepted
Dimiter Madjarov
Telerik team
answered on 03 Oct 2013, 06:55 AM
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!
0
Thomas
Top achievements
Rank 2
answered on 03 Oct 2013, 08:17 AM
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
0
Accepted
Dimiter Madjarov
Telerik team
answered on 03 Oct 2013, 08:37 AM
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!
0
Thomas
Top achievements
Rank 2
answered on 04 Oct 2013, 06:07 AM
Hi Dimiter,

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

have a great day
Tags
Grid
Asked by
Thomas
Top achievements
Rank 2
Answers by
Dimiter Madjarov
Telerik team
Thomas
Top achievements
Rank 2
Share this question
or