Выравнивание панели инструментов Kendo UI

Кнопки панели инструментов Kendo UI Grid. Интересно, можно ли выровнять превосходить и пдф только по правой стороне панели. И Создавать будет поддерживаться слева.

toolbar: ["create", "excel", "pdf"],

Я пробовал .k-grid-toolbar a { float:right; }, но он выравнивает все кнопки вправо.

Спасибо

kendo-ui kendo-grid

08.04.2019 10:52

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

2 183

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете использовать toolbar: kendo.template($("#template").html()) для этого. Взгляните на это демо для примера.

08.04.2019 10:59

Вы можете получить доступ к определенной ссылке в CSS по ее индексу с помощью :nth-child(), см. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

08.04.2019 11:07

Ответ принят как подходящий

Вы можете использовать CSS, чтобы сделать это. Кнопки имеют фиксированные имена классов, которые вы можете использовать.

См. фрагмент для демонстрации:

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel = "stylesheet" href = "https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
    <link rel = "stylesheet" href = "https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
    <link rel = "stylesheet" href = "https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
    <link rel = "stylesheet" href = "https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>

    <script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src = "https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
  
    <style>
        .k-grid-toolbar {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }
      
        .k-grid-toolbar .k-grid-excel {
            margin-left: auto;
        }
    </style>
</head>
<body>
  
<div id = "grid"></div>
<script>
$("#grid").kendoGrid({
  toolbar: ["create", "excel", "pdf"],
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33},
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: true
});
</script>
</body>
</html>

08.04.2019 12:18

Другие вопросы по теме

Как сфокусироваться на определенной ячейке при редактировании строки

Kendo Grid Экспорт в Excel Сохранить в определенном месте

Как отображать переменную JS в элементе itemTemplate пользовательского интерфейса кендо, когда значение переменной содержит пробелы

Сетка кендо отправляет json на контроллер

Kendo Grid — условный шаблон клиента

Как исправить вид сетки

Antixss для Kendo Grid

Как «Отфильтровать данные Kendo Grid на serverSide с помощью фильтра с несколькими флажками, в котором сделаны некоторые выборки по умолчанию»

Как передать данные строки Kendo Grid во всплывающее окно Kendo в частичном представлении в jQuery?

Фильтруемое свойство столбца Kendo Grid «ui» не работает, когда указано свойство «multi: true»

Выравнивание панели инструментов Kendo UI

Ответы 3

Другие вопросы по теме

Похожие вопросы