JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.mobile.all.min.css">
<div id="example">
<div class="demo-section k-header">
<div>
<h4>Basic Button</h4>
<p>
<input type="checkbox" text="test" id="autogeneraterfid2"/>
<button id="primaryTextButton" class="k-primary">Primary Button</button>
<button id="textButton">Button</button>
</p>
</div>
<div>
<h4>Disabled buttons</h4>
<p>
<a id="primaryDisabledButton" class="k-primary">Disabled Primary Button</a>
<a id="disabledButton">Disabled Button</a>
</p>
</div>
<div>
<h4>Buttons with icons</h4>
<p>
<a id="iconTextButton">Filter</a>
<a id="kendoIconTextButton">Clear Filter</a>
<em id="iconButton"><span class="k-sprite">Refresh</span></em>
</p>
</div>
</div>
<script>
CSS
.demo-section {
width: 400px;
}
.demo-section p {
margin: 0 0 30px;
line-height: 40px;
}
.k-primary {
width: 150px;
}
JavaScript
$(document).ready(function () {
$("#primaryTextButton").kendoButton();
$("#textButton").kendoButton();
$("#primaryDisabledButton").kendoButton({
enable: false
});
$("#disabledButton").kendoButton({
enable: false
});
$("#iconTextButton").kendoButton({
spriteCssClass: "k-icon k-i-funnel"
});
$("#kendoIconTextButton").kendoButton({
icon: "funnel-clear"
});
$("#iconButton").kendoButton({
spriteCssClass: "k-icon k-i-refresh"
});
$("#primaryTextButton").Text = "hello";
});
$("#autogeneraterfid2").change(function () {
// debugger
if ($("#autogeneraterfid2").is(':checked')) {
var kButton = $("#primaryTextButton").data("kendoButton");
kButton.element[0].innerHTML = "Save and Program RFID"
}
else {
var kButton = $("#primaryTextButton").data("kendoButton");
kButton.element[0].innerHTML = "Save & Print"
}
})