Блог

Главная - Вопросы по программированию - Выравнивание панели инструментов Kendo UI

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

#kendo-ui #kendo-grid

#kendo-ui #кендо-сетка

Вопрос:

В кнопках панели инструментов сетки пользовательского интерфейса Kendo. Мне интересно, можно ли выровнять Excel и pdf только по правой стороне панели. И Создать будет сохраняться с левой стороны.

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

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

Спасибо

Ответ №1:

Вы можете использовать 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>

Ответ №2:

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

Ответ №3:

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