Запретить использование класса k-button - Telerik KendoUI

У меня есть всплывающее окно кендо, которое автоматически применяет класс k-button к кнопкам в этом окне.

<button data-role="button" title="Save record and close" class="btn btn-primary k-button" style="" id="saveClose" role="button" aria-disabled="false" tabindex="0">Save &amp; Close</button>

Вот оригинальная кнопка

<div class="btn-group mr5">
  <button id="del" class="btn btn-primary" type="button" title="Delete>
	<i class=" fa fa-minus mr5 "></i>
	 Delete
  </button>
</div>

Я хочу, чтобы когда сетка загружалась, она НЕ добавляла класс k-button к кнопке.


telerik kendo-ui kendo-window
person Gary McNeill    schedule 31.07.2015    source источник
comment
почему бы просто не добавить какой-нибудь jquery, например $(button).removeClass('k-button'), чтобы удалить класс.   -  person David Shorthose    schedule 31.07.2015
comment
Я сделал это так, но требование состоит в том, чтобы оно никогда не генерировалось в первую очередь.   -  person Gary McNeill    schedule 31.07.2015
comment
Кроме добавления собственных кнопок во всплывающее окно, вы ничего не можете с этим поделать. Поскольку они являются частью структуры, они будут оформлены в стиле кендо. в качестве альтернативы, если вы не хотите, чтобы их стиль на кнопке просто переопределил css своим собственным.   -  person David Shorthose    schedule 31.07.2015
comment
Я предполагаю, что ваши кнопки — это простые кнопки HTML, а не кнопки Kendo, верно?   -  person chiapa    schedule 31.07.2015
comment
Кнопки - это html-кнопки, да. Я хочу, чтобы стиль начальной загрузки имел приоритет над стилем кендо.   -  person Gary McNeill    schedule 31.07.2015
comment
Не могли бы вы опубликовать код своей оригинальной кнопки?   -  person chiapa    schedule 31.07.2015

Ответы (2)


arrow_upward
1
arrow_downward

Я не могу воспроизвести эту проблему, но я попытался найти решение для нее.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
    <div>
        <button id="OpenWin">OPEN</button>
        <div id="window">
            <button data-role="button" title="Save record and close" class="btn btn-primary"
                id="saveClose" role="button" aria-disabled="false" tabindex="0">
                Save &amp; Close</button>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var window = $("#window");
            $("#OpenWin").click(function (e) {
                window.data("kendoWindow").open();
            });
            window.kendoWindow({
                width: "505px",
                height: "315px",
                title: "Rams's Ten Principles of Good Design",
                actions: ["Pin", "Refresh", "Maximize", "Close"],
                open: hideButtonStyle,
                activate: hideButtonStyle,
                refresh: hideButtonStyle,
                visible: false
            });
        });
        function hideButtonStyle(e) {
            //Below code line remove all CSS class from the button
            $("#saveClose").removeClass();
            //Below code line re-add your existing CSS class
            $("#saveClose").addClass("btn btn-primary");
        }
    </script>
</body>
</html>

Дайте мне знать, если есть какие-либо опасения.

person Jayesh Goyani    schedule 31.07.2015
comment
Я отмечу это как ответ. Представитель Telerik сказал на их форумах, что единственный способ сделать это — использовать метод jQuery. telerik.com/forums/ - person Gary McNeill; 31.07.2015

arrow_upward
0
arrow_downward

С тех пор я сделал это через Css вместо JS, используя следующий код

.btn.k-button{
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
    font-weight: 400; 
    border: 1px solid transparent;
}
.btn.k-button:hover{
    background-color:#2e6da4;
}
person Gary McNeill    schedule 06.08.2015