Добавление стилей фокуса в сетку интерфейса Kendo?

Question

Добавление стилей фокуса в сетку интерфейса Kendo?

0

Работа над улучшением доступности сайта с использованием сетки пользовательского интерфейса Kendo.

Испытывать трудности, добавляя стиль к сетке, используя все наследование стиля, встроенное в пользовательский интерфейс Kendo.

Кто-нибудь знает, как изменить стиль фокуса якорных тегов (или любых элементов HTML, если на то пошло) в сетке пользовательского интерфейса Kendo?

Пример. Я хотел бы добавить этот стиль к элементам сетки:

a:focus { outline: #FF0000 dotted medium; }

Zach B 03 янв. 2014, в 19:09

Источник

0

Можете ли вы предоставить JSFIDDLE
3bu1 03 янв. 2014, в 17:31
0

я не понял, что именно вы хотите ..? когда вы нажимаете на тег привязки, должен ли он один менять свое свойство, выглядя иначе, чем другие?
3bu1 03 янв. 2014, в 17:39
0

@3bu1 3bu1 - Задача заключалась в том, чтобы войти только в стили сетки, не затрагивая элементы вне шаблона Kendo UI. OnaBai заставил его работать через jsfiddle здесь
Zach B 04 янв. 2014, в 04:36

Показать ещё 1 комментарий

Теги:

html

css

kendo-ui

kendo-grid

3 ответа

0

Вы, скорее всего, просто должны добавить! Важно в свой css.

Я использую следующий JS, чтобы добавить класс css в tr в сетке kendo для цветных строк по-разному и для эффекта выделения (в данном случае с помощью td, содержащего определенное слово):

function setMessageColor(){
    $("#EventMessagesGrid tr td:contains('Nominal')").closest('tr').addClass("nominal-message");
    $("#EventMessagesGrid tr td:contains('Warning')").closest('tr').addClass("warning-message");
    $("#EventMessagesGrid tr td:contains('Failure')").closest('tr').addClass("failure-message");
}

С помощью css для этих классов, следующих этому шаблону:

.warning-message {
background-color: #fffdec !important;
}
.warning-message:hover {
    background-color: #fff9c2 !important;
}

Jonathan Buchanan 03 янв. 2014, в 16:22

0

В зависимости от настройки вашей сетки...

Kendo добавляет выбранный класс к элементу.

Вы можете настроить таргетинг в css на что-то вроде этого.

.k-state-selected{
    border: 1px dotted red !important;
}

Возможно, вам не понадобится важная информация, если вы загрузили свой css последним, но это не повредит.

Shayne Trosdahl 03 янв. 2014, в 15:23

Ещё вопросы

я не понял, что именно вы хотите ..? когда вы нажимаете на тег привязки, должен ли он один менять свое свойство, выглядя иначе, чем другие?
@3bu1 3bu1 - Задача заключалась в том, чтобы войти только в стили сетки, не затрагивая элементы вне шаблона Kendo UI. OnaBai заставил его работать через jsfiddle здесь

OnaBai · Accepted Answer · 2014-01-03T15-42-00.000Z

Я предполагаю, что вы используете шаблон для рендеринга столбца в качестве anchor HTML, правильно?

У вас должно быть что-то вроде:

{ 
    field: "City", 
    width: 200, 
    template: "<a href='http://maps.google.com?q=#= City #'>#= City #</a>" 
}

Если вы сделаете это и используете CSS:

a:focus { outline: #FF0000 dotted medium; }

Оно работает! Проверьте это здесь: http://jsfiddle.net/F5R7m/1/

Теперь возникает вопрос, хотите ли вы ограничить этот стиль только сеткой, чтобы привязка вне сетки не получала тот же стиль. Затем вы можете определить шаблон как:

{ 
    field: "City", 
    width: 200, 
    template: "<a class='ob-grid' href='http://maps.google.com?q=#= City #'>#= City #</a>" 
}

и стиль CSS:

a.ob-grid:focus { 
    outline: #FF0000 dotted medium;
}

и вы его запускаете, как в этом примере: http://jsfiddle.net/F5R7m/2/

Или вы можете ограничить его одной сеткой без изменения шаблона, указав CSS как:

#grid a:focus { 
    outline: #FF0000 dotted medium;
}

Где #grid ссылается на id вашей grid пользовательского интерфейса Kendo. Пример здесь: http://jsfiddle.net/F5R7m/3/

И если вы хотите его для каждой сетки на своей странице, вы можете определить CSS как:

.k-grid a:focus { 
    outline: #FF0000 dotted medium;
}

Тогда любой якорь HTML будет иметь красную пунктирную линию, когда он получит фокус, как здесь: http://jsfiddle.net/F5R7m/5/

Большое спасибо! Это именно то направление, в котором я пытался идти. Моя задача заключалась в том, чтобы понять, как войти в сетку пользовательского интерфейса Kendo без изменения шаблона или внешних стилей, как в третьем примере. Это очень подробное объяснение и очень ценится.