0

I have a kendo pop-up window which is automatically applying the k-button class to buttons within that window.

<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>

Here is the original 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>

What I want is when the grid is loaded, it does NOT add the k-button class to the button.

4

2 回答 2

1

I am not able to reproduce this issue but I have tried to provide solution for the same.

<!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>

Let me know if any concern.

于 2015-07-31T11:13:26.423 回答
0

I have since done this through Css instead of JS using the following code

.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;
}
于 2015-08-06T11:10:32.703 回答