CODEWITHSUNDEEP
selectgridkendo-uirow
Mark McWhirter
Mark McWhirter

Reputation: 1196

Change Kendo grid row on click

I'm hoping someone can offer help in this. I have a Kendo grid in a html document (no MVC), and am wanting to change the class of the entire row on row select. I have tried various approaches, still with no luck. I am currently at:

// within kendo grid definition - grid called '#grid'

    change: function (e) {
        $("#grid tbody").find("tr[k-state-selected]").css("color", "black");
        var id = $("#grid").closest("tr").css("color", "black");
        CallDocument(this._data[0]);
    },

The function CallDocument is being fired, and so I know I can at least get to the function.

EDIT: Here is the solution that I came up with, and thanks to everyone 

change: function (e) {
            $("#grid tbody").find("tr.k-state-selected").attr("class", "detail read k-state-selected");

    },

I needed to use the 'tr.k-state-selected' form, and change using attr in order to change the set of classes.

Upvotes: 1

Views: 14159

Answers (2)

OnaBai
OnaBai

Reputation: 40887

To mark every visited row as selected, you might add a CSS class on change event.

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : false,
    pageable  : true,
    selectable: true,
    columns   :
    [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 200, title: "Last Name" },
        { field: "City", width: 200 }
    ],
    change : function (e) {
        this.select().addClass("ob-selected");
    }
}).data("kendoGrid");

The class ob-selected stays when you move to another cell since this does nothing to do with KendoUI.

Example here : http://jsfiddle.net/2TGLp/1/

The only question is that it does not stay selected if you apply filters, change to a different page... but not sure if this is important for you.

Upvotes: 3

id.ot
id.ot

Reputation: 3131

I override my Kendo styles using both css and javascript (depending on the scenario).

CSS: 

.k-state-selected {
    color: black;
}

Javascript/jQuery:

$('k-state-selected').css('color', '#000000')

Upvotes: 1

Related Questions