Настройка отображения постраничного (page) dgrid

Материал из Course Orchestra
Перейти к: навигация, поиск

Примерный вид отформатированного grid'а

Gridlooks.png

Настройка css

Высота

  1. Высота определяется следующим кодом (внутренний div с текстом)
.dgrid-cell div
{
max-height: 33px;
}
  1. Чтобы все строчки имели одинаковую высоту, используйте height вместо max-height
  2. Текущая установка при шрифте small показывает две строчки и чуть-чуть третьей (чтобы понятно было, что текст отображается не весь)
  3. При наведении на текст всегда появляется hint (эта настройка на текущий момент не может быть изменена)

Подкрашивание строк

В гриде удобно видеть четные и нечетные строки разным цветом. Цветные строки также должны чередоваться, однако в showcase это пока не поддерживается. Поэтому пока единственный вариант -- это явно все строки красить нужным цветом. Класс цвета определяется для каждой строки при формировании grid'а. Цвет для строки задается следующим образом

.класс_цвета {
    background-color: red; 
}

Подбор цвета

Для подбора цвета рекомендуется использовать данную ссылку Color picker.

В верхней части окна введите какой-либо цвет, например 9DC493 (зеленый). Чтобы получить другой цвет этой же палитры и яркости меняйте значение в поле H. Значения в нем изменяются в пределах от 0 до 360. Соответственно, если необходимо получить 6 цветов, то значение необходимо выбирать через 60. При каждом изменении копируйте шестнадцатиричное значение в css.

Если Вы хотите использовать один цвет, но разные значения яркости, используйте параметр B.

Параметр S необходимо использовать для задания степени цветности -- от черно-белого до цветного. Этим параметром лучше всего играться в последнюю очередь. Обычно он важен при работе со светлыми тонами.

Чередование цветов

Для отключения чередования удалите класс .dgrid-row-odd

Использование иконок в панели инструментов

В качестве картинок допускается использовать только формат png с прозрачным фоном.

Довольно много иконок лежит в папке \\SERVER-2\share\exchange\Users\Поташников\icons\.

Для конвертации ico в png воспользуйтесь Конвертер ico в png/

css для вставки

.dgrid-row
{
overflow: hidden;
border-bottom: 1px dotted #99b9e9;
}

.dgrid-cell
{
border-style: none dotted none none  !important;
border-color: #99b9e9 !important;
vertical-align: middle !important;
}

.dgrid-row-odd {
    background-color: #ebf0f7; 
}

.dgrid-cell div
{
max-height: 33px;
}

.dgrid-header th {
    text-align: center !important;
    vertical-align: middle !important;  
    font-size: x-small !important;
}

.dgrid-header th {
    text-align: center !important;
}

.dgrid-header, .dgrid-header-row, .dgrid-footer {
    background-color: #ebf0f7 !important;
    border-bottom: 1px solid #99b9e9 !important;
    overflow: hidden !important;
}
.dgrid-footer 
{
padding: 3px !important;
}
.dgrid-scroller
{
border-bottom: 1px solid #99b9e9 !important;
}
.dgrid-resize-header-container
{
height: inherit !important;
}

.dgrid {
    border-color: #99b9e9 !important;
    border-style: none solid !important;
    border-width: 1px !important;

}

.x-toolbar-mark {
    border: 1px solid #99b9e9 !important;
}
.dgrid-footer div {
    font-size: x-small;
    font-weight: bold;
}
.dgrid-footer input {
    font-size: x-small;
    font-weight: bold;
}
.dgrid-footer select {
    font-size: x-small;
    font-weight: bold;
}