Work with telerik controls with client side functionality

Telerik Controls work flow and functionality

Work with telerik controls with client side functionality 

1) Calendar 

Creating the calendar with today option using rad control 

<telerik:RadDatePicker ID="radDtPkFromDate" runat="server" TabIndex="1" ToolTip="Select/Enter Posting start date"

 ZIndex="25000" Calendar-ShowRowHeaders="false">

       <Calendar runat="server">

          <SpecialDays>

              <telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="#BCBCBC" />

          </SpecialDays>

          <FooterTemplate>

               <div style="width: 100%; text-align: center; background-color: Gray;">

<input id="btndtpkVocherDate" type="button" value="Today"     onclick="GoToToday()" />

                </div>

          </FooterTemplate>

       </Calendar>

</telerik:RadDatePicker>

<script type="text/javascript">

       function GoToToday() {

            var datepicker = $find("<%=radDtPkFromDate.ClientID%>");

            var dt = new Date();

            datepicker.set_selectedDate(dt);

            datepicker.hidePopup();

        }

</script>

2) Check box access along with rad control enable/disable functionality 

<asp:CheckBox ID="chkNoEndDate" runat="server" ToolTip="No End Date" OnClick="enableTextBox(this.checked);"/>

function enableTextBox(isChecked)

{

    var raddatePicker = $find("<%= radDtPkrEndDate.ClientID %>");

    if (isChecked)

       raddatePicker.set_enabled(false);

        else

       raddatePicker.set_enabled(true);

}

3) Access the Rad Control Text box

<telerik:RadTextBox ID="radTxtFolderPath" TextMode="SingleLine" MaxLength="255" runat="server" ToolTip="Enter Path" EmptyMessage="Folder Path">

Var data=document.getElementById("<%=radTxtFolderPath.ClientID%>").value;

4) To cancel the current operation of the event

function validateData(sender, args)

{

       Var data=document.getElementById("<%=radTxtFolderPath.ClientID%>").value;

       If(data=="Hi")

              args.set_cancel(true);

}

5) Access the rad control drop down value in client side 

<telerik:RadDropDownList ID="radDdlFO" Enabled="false" runat="server" ToolTip="Field Office Code" DropDownHeight="200">

    <Items>

        <telerik:DropDownListItem Text="US" Value="0" />

               <telerik:DropDownListItem Text="IND" Value="1" />

    </Items>

</telerik:RadDropDownList>

Validation

if ($find("<%=radDdlFO.ClientID%>").get_selectedItem().get_value() == "0")

   {

      alert("Please Select Field Office Code.");

      args.set_cancel(true);

   }

6) Access the rad combo box control value in client side 

<telerik:RadComboBox ID="radDdlScheduleDay" CheckBoxes="true" ZIndex="200000" runat="server" ToolTip="Select Schedule Day" DropDownHeight="200" EnableCheckAllItemsCheckBox="true" EmptyMessage="Day of Week">

<Items>

   <telerik:RadComboBoxItem Text="Sunday" Value="1" />

   <telerik:RadComboBoxItem Text="Monday" Value="2" />

   <telerik:RadComboBoxItem Text="Tuesday" Value="3" />

   <telerik:RadComboBoxItem Text="Wednesday" Value="4" />

   <telerik:RadComboBoxItem Text="Thursday" Value="5" />

   <telerik:RadComboBoxItem Text="Friday" Value="6" />

   <telerik:RadComboBoxItem Text="Saturday" Value="7" />

</Items>

</telerik:RadComboBox>

Validation

if ($find("<%=radDdlScheduleDay.ClientID%>").get_checkedItems().length < 1)

  {

      alert("Please Select Schedule Days.");

      args.set_cancel(true);

  }

7) Check the Email validation 

var uEmail=’sample@gmail.com’;

var re = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;

if(!re.test(uEmail))

  {

      alert("Please Enter Valid Email.");

      args.set_cancel(true);

  }

8) Transaction the changes in client side using rad controls 

<telerik:RadDropDownList ID="radDdlScheduleType" ZIndex="200000" runat="server"  ToolTip="Select Schedule Type" DropDownHeight="200" OnClientSelectedIndexChanged="validateSchudleType">

<Items>

 <telerik:DropDownListItem Text="Schedule Type" Value="0" />

 <telerik:DropDownListItem Text="Daily" Value="1" />

 <telerik:DropDownListItem Text="Weekly" Value="2" />

 <telerik:DropDownListItem Text="Monthly" Value="3" />

</Items>

</telerik:RadDropDownList>

Call this method in one button click

function validateSchudleType(sender, args)

{

       var combo = $find("<%=radDdlScheduleType.ClientID%>");

       comboDay.trackChanges();

        for (var i = 0; i < comboDay.get_items().get_count() ; i++)

 {

           comboDay.get_items().getItem(i).set_checked(false);

        }

        comboDay.commitChanges();

 }

Calling the client side method in button click 

<telerik:RadButton ID="btnSave" runat="server" Text="Save" ToolTip="Click Here To Submit" OnClientClicking=" validateData" ></telerik:RadButton>