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>