QW2021/Button/ButtonFeatures.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.Master" Title="Button" AutoEventWireup="true" CodeBehind="ButtonFeatures.aspx.cs" Inherits="QW2021C.ButtonFeatures" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>Selected Button Types:</h2>
<br/>
<li> Default Button</li>
<li> Toggle Button</li>
<li> Split Button</li>
<li> Repeate Button</li>
<li> Check Box</li>
<li> Radio Button</li>
<li> API</li>
<li> RTL</li>
<li> Theme - Gradient-Lime</li>
<br/>
<div id = "ControlRegion">
                 <div>
        <h3>Button:</h3>
        <div>
           <ej:button id="Start" runat="server" text="Start" size="Large" ClientSideOnClick="startClick" showroundedcorner="true" EnableRTL="true" Type="Button">
           </ej:button>
        </div>
         <div class="align">
        <div>
            <b>Event Trace</b></div>
        <div class="eventTrace1">
        </div>
    </div>
    </div>
    <div>
    <script type="text/javascript">
    function startClick(e) {
        $(".eventTrace1").html("Start Button Clicked..</br>" + $(".eventTrace1").html());
    }
</script>
              <div>
    <h3>ToggleButton:</h3>
        <div>
         <ej:ToggleButton ID="Play" runat="server" Size="Large" ShowRoundedCorner="true" ContentType="TextAndImage" DefaultText="Play" ActiveText="Pause" DefaultPrefixIcon="e-icon e-mediaplay e-uiLight" ActivePrefixIcon="e-icon e-mediapause e-uiLight"></ej:ToggleButton>
         </div>
         <div class="align">
        <div>
            <b>Event Trace</b></div>
        <div class="eventTrace2">
        </div>
    </div>
    </div>
    <script type="text/javascript">
    function toggleClick(e) {
        $(".eventTrace2").html("Toggle Button Clicked..</br>" + $(".eventTrace2").html());
    }
</script>
<div>
    <h3>SplitButton:</h3>
        <div>
         <ej:splitbutton id="Save" runat="server" size="Large" showroundedcorner="true" text="save" EnableRTL="true" ClientSideOnClick="splitClick">
                    <Items>
                       <ej:SplitItem Text="Open...">
                       </ej:SplitItem>
                       <ej:SplitItem Text="Save">
                       </ej:SplitItem>
                       <ej:SplitItem Text="Delete">
                       </ej:SplitItem>
                    </Items>
         </ej:splitbutton>
            </div>
             <div class="align">
        <div>
            <b>Event Trace</b></div>
        <div class="eventTrace3">
        </div>
    </div>
        </div>
    <div>
    <script type="text/javascript">
   function splitClick(e) {
        $(".eventTrace3").html("Split Button Clicked..</br>" + $(".eventTrace3").html());
    }
</script>
<h3>RepeatButton:</h3>
        <div>
     <ej:Button ID="RepeatButton" runat="server" Type="Button" Text="click" Size="Large" ShowRoundedCorner="true" RepeatButton="true" TimeInterval="200" ClientSideOnClick="btnClick" EnableRTL="true"> </ej:Button>
       </div>
          <div class="align">
        <div>
            <b>Event Trace</b></div>
        <div class="eventTrace4">
        </div>
    </div>
    </div>
<script type="text/javascript">
    function btnClick(e) {
        $(".eventTrace4").html("This is Repeat Button..</br>" + $(".eventTrace4").html());
    }
</script>
<div>
        <h3>CheckBox:</h3>
        <div>
            <ej:CheckBox ID="CheckBox" runat="server" CssClass="NodeText" EnableRTL="true"></ej:CheckBox>
            <label for="CheckBox">Sample</label>
        </div>
    </div>
<div>
        <h3>RadioButton</h3>
        <div class="chkrad">
            <ej:RadioButton Name="category" ID="Radio1" runat="server" CssClass="RadioNode" Checked="true" Enabled="true" EnableRTL="true" Text="1+ years"></ej:RadioButton>
            <ej:RadioButton Name="category" ID="Radio2" runat="server" CssClass="RadioNode" Enabled="true" EnableRTL="true" Text="3+ years"></ej:RadioButton>
            <ej:RadioButton Name="category" ID="Radio3" runat="server" CssClass="RadioNode" Enabled="true" EnableRTL="true" Text="5+ years"></ej:RadioButton>
        </div>
    </div>
              <h3>API</h3>
    <div id="sampleProperties" class="jumbotron">
        <div class="prop-grid">
            <div class="row">
                <div class="col-md-3">
                    Disable\Enable
                </div>
                <div class="col-md-3">
                    <ej:ToggleButton ID="ToggleButtonChange" runat="server" ClientSideOnChange="onCheckUncheckAll" DefaultText="Disable" ActiveText="Enable"></ej:ToggleButton>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var buttonObject, toggleButtonObject, splitButtonObject, repeatbtnobject, checkboxObject, radiobtn1Object, radiobtn2Object, radiobtn3Object;
        $(function () {
            //  declaration 
            buttonObject = $("#<%=Start.ClientID%>").data("ejButton");
            toggleButtonObject = $("#<%=Play.ClientID%>").data("ejToggleButton");
            splitButtonObject = $("#<%=Save.ClientID%>").data("ejSplitButton");
            repeatbtnobject = $("#<%=RepeatButton.ClientID%>").data("ejButton");
            checkboxObject = $("#<%=CheckBox.ClientID%>").data("ejCheckBox");
            radiobtn1Object = $("#<%=Radio1.ClientID%>").data("ejRadioButton");
            radiobtn2Object = $("#<%=Radio2.ClientID%>").data("ejRadioButton")
            radiobtn3Object = $("#<%=Radio3.ClientID%>").data("ejRadioButton")
        });
        function onCheckUncheckAll(args) {
            if (args.isChecked) {
                buttonObject.disable();
                toggleButtonObject.disable();
                splitButtonObject.disable();
                repeatbtnobject.disable();
                checkboxObject.disable();
                radiobtn1Object.disable();
                radiobtn2Object.disable();
                radiobtn3Object.disable();
            }
            else if (buttonObject) {
                buttonObject.enable();
                toggleButtonObject.enable();
                splitButtonObject.enable();
                repeatbtnobject.enable();
                checkboxObject.enable();
                radiobtn1Object.enable();
                radiobtn2Object.enable();
                radiobtn3Object.enable();
            }
        }
    </script>
</div>
</asp:Content>