CODEWITHSUNDEEP
jqueryhtmlcsskendo-uikendo-grid
Akhil Koul
Akhil Koul

Reputation: 59

Kendo Grid Row click change color

I have a kendo grid with the following code : 

var data = <?php echo $model->over_view; ?>;
        var grid = $("#grid").kendoGrid({
            dataSource: {
                data: data,
                pageSize: 10,
                sort: { field: "metric", dir: "asc" }
            },
            dataBound: function () {
                $('td').each(function () {
                    if($(this).text() == 0){
                        $(this).text('.');
                    }
                    if ($(this).text() == 'Bad') {
                        $(this).addClass('critical')
                    } else if ($(this).text() == 'Good') {
                        $(this).addClass('ok')
                    } else if ($(this).text() == 'Suspect') {
                        $(this).addClass('warning')
                    } else if ($(this).text() == 'Idle') {
                        $(this).addClass('idle')
                    }
                })
            },
            //rowTemplate: '<tr class="#: classification ==\"Good\" ? "discontinued" : "" #" data-uid="#: uid #"><td>#: classification #</td><td>#: MAC #</td> <td>#: f_Auth #</td><td>#: f_Assoc #</td><td>#: f_EAP #</td><td>#: f_EAPOL #</td><td>#: f_Data #</td><td>#: f_DHCP #</td> <td>#: f_Unk #</td><td>#: metric #</td></tr>',
            sortable: true,
            resizable : true,
            pageable: true,
            toolbar: kendo.template($("#filterDeviceType").html()),
            columns: [
                { field: "classification", title: "Device Health",headerAttributes:{ style:"text-align:center"}},
                { field: "display_mac", title: "Devices", width: 150,headerAttributes:{ style:"text-align:center "}, template:"<a target=\"_blank\" href='"+$("#visualize-url").val()+ "?trace_id=" + $("#trace-id").val()+"&mac="+"${MAC}&perspective=${type}'>${display_mac}</a>" },
                { field: "f_Auth", title: "Authentication Failure",headerAttributes:{ style:"text-align:center"} },
                { field: "f_Assoc", title: "Association Failure",headerAttributes:{ style:"text-align:center"}},
                { field: "f_ReAssoc", title: "Re-Association Failure",headerAttributes:{ style:"text-align:center"}},
                { field: "f_EAP", title: "EAP Failure" ,headerAttributes:{ style:"text-align:center"}},
                { field: "f_EAPOL", title: "EAPOL Failure",headerAttributes:{ style:"text-align:center"}},
                { field: "f_Data", title: "Data Failure",headerAttributes:{ style:"text-align:center"}},
                { field: "f_DHCP", title: "DHCP Failure",headerAttributes:{ style:"text-align:center"}},
                { field: "Data", title: "Data Packets",headerAttributes:{ style:"text-align:center"}},
                { field: "Total", title: "Total Packets",headerAttributes:{ style:"text-align:center"}}

            ]
        });

The second column in the grid "Devices" is a hyperlink with each row-item pointing to a particular page. I want to add the functionality, whereby if a user clicks on a row item, the kendo grid remembers the click and changes the color of that row item accordingly(from blue to maybe violet, like google does in its search page) How do i do that?

Upvotes: 1

Views: 2793

Answers (2)

Sreekanth A
Sreekanth A

Reputation: 1

I tried with the code .k-grid th.k-state-selected, .k-grid td.k-state-selected, .k-grid tr.k-state-selected > td { color: #292b2c; background-color: #cecece !important; } and it worked for me.

Upvotes: 0

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

This can be done without even worrying about the kendo framework. All you have is a table and when you click the link you want to highlight the row. So here is what you can do.

$("#grid tr a").on('click',function(){
  $("#grid tr.activeRow").removeClass('activeRow'); //remove previous active row
  $(this).closest('tr').addClass('.activeRow');//set current row as active
});

So what we have done is we bind a click event to all the anchor tags inside the table, And when it is clicked we find the closest tr and apply the class activeRow. Now we have to specify the CSS rule to change the color for this class.

tr.activeRow td{
  background-color: violet;
 }

Edit 1:

I only want to change the color of that row element( the hyperlink ), not the entire row.

to change only the td of the anchor tag you can do this.

$(this).closest('td').css('background-color','violet');

Else you can assign a class 

 $(this).closest('td').addClass('activeTd');

And css rule like

 td.activeTd {
   background-color: violet; 
 }

Also, where do i put this code?

you have to put the jquery in your grid databound event.

Upvotes: 1

Related Questions