Изменить строку сетки кендо по щелчку

Я надеюсь, что кто-то может предложить помощь в этом. У меня есть сетка кендо в html-документе (без MVC), и я хочу изменить класс всей строки при выборе строки. Я пробовал разные подходы, но безуспешно. Я сейчас нахожусь по адресу:

// в определении сетки кендо - сетка называется '#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]);
    },

Функция CallDocument запущена, и поэтому я знаю, что по крайней мере могу добраться до этой функции.

РЕДАКТИРОВАТЬ: вот решение, которое я придумал, и спасибо всем

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

    },

Мне нужно было использовать форму «tr.k-state-selected» и изменить с помощью attr, чтобы изменить набор классов.


select row grid kendo-ui
person Mark McWhirter    schedule 03.01.2014    source источник
comment
Можете ли вы разорвать цепочку и выполнить отладку на уровне селектора и выполнить console.log или старое предупреждение, чтобы увидеть, выбрана ли фактическая строка. Остальное выглядит нормально, я думаю, что селектор не может добраться до этой строки. что такое k-state-selected?   -  person Farrukh Subhani    schedule 03.01.2014
comment
«k-state-selected» в кендо гарантированно будет выбранной строкой. Таким образом, я должен иметь возможность сканировать таблицу в поисках строки с параметром «k-state-selected» и изменить класс.   -  person Mark McWhirter    schedule 03.01.2014
comment
так k-state-selected — это класс для этого элемента строки tr? вместо tr[k-state-selected] вы должны использовать tr.k-state-selected в своем методе поиска   -  person Farrukh Subhani    schedule 03.01.2014
comment
Спасибо, и это помогло с решением, которое я только что придумал.   -  person Mark McWhirter    schedule 03.01.2014
comment
Вы можете использовать функции jquery, такие как addClass и removeClass, вместо attr, и это не повлияет на существующие классы, а просто добавьте и удалите указанный вами класс. Например, $("#grid tr.k-state-selected").addClass("detail") добавит этот класс в tr внутри #grid, а removeClass удалит его.   -  person Farrukh Subhani    schedule 03.01.2014

Ответы (2)


arrow_upward
3
arrow_downward

Чтобы пометить каждую посещенную строку как выбранную, вы можете добавить класс CSS к событию change.

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");

Класс ob-selected остается, когда вы переходите в другую ячейку, так как это не имеет ничего общего с KendoUI.

Пример здесь: http://jsfiddle.net/2TGLp/1/

Единственный вопрос в том, что он не остается выбранным, если вы применяете фильтры, переходите на другую страницу... но не уверен, что это важно для вас.

person OnaBai    schedule 03.01.2014
comment
Я заставил это работать сейчас, и это было так, как вы предложили. У меня есть несколько классов, связанных с текущей строкой, поэтому я помещаю это в событие изменения сетки: change: function (e) { $(#grid tbody).find(tr.k-state-selected).attr(class , подробно читайте k-состояние-выбрано); CallDocument(this._data[0]); }, - person Mark McWhirter; 03.01.2014

arrow_upward
1
arrow_downward

Я переопределяю свои стили кендо, используя как css, так и javascript (в зависимости от сценария).

CSS:

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

Javascript/JQuery:

$('k-state-selected').css('color', '#000000')
person id.ot    schedule 03.01.2014
comment
Спасибо, но для уточнения мне нужно, чтобы класс сохранялся, когда я перехожу к другой строке. - person Mark McWhirter; 03.01.2014
comment
Затем мы можем добавить класс (например, .black { color: #000 !important }) using javascript and use !important`, если это необходимо. Это можно сделать с помощью $('#grid k-state-selected').addclass('black') - person id.ot; 03.01.2014