Please, I am new in telerik. I am excited to learn this framework.
I would like to know how to add a custom save button to RadWindow (on the Titlebar)
I have a userControl which contain a radgrid. To add new item on the radGrid, I use onColumnClick event to open a radwindow. On the radwindow, I want to add button save on the titlebar.
Is it possible?
Please, I need your help
Thank you in advance
I would like to know how to add a custom save button to RadWindow (on the Titlebar)
I have a userControl which contain a radgrid. To add new item on the radGrid, I use onColumnClick event to open a radwindow. On the radwindow, I want to add button save on the titlebar.
Is it possible?
Please, I need your help
Thank you in advance
11 Answers, 1 is accepted
0

Princy
Top achievements
Rank 2
answered on 28 Feb 2014, 06:48 AM
Hi Hiba,
Please try the following JavaScript to add a Button to the titlebar of RadWindow.
JavaScript:
Thanks,
Princy.
Please try the following JavaScript to add a Button to the titlebar of RadWindow.
JavaScript:
<script type=
"text/javascript"
>
function
OnClientShow(radWindow) {
var
TitleBar = radWindow.GetTitlebar();
var
parent = TitleBar.parentNode;
var
oUL = parent.getElementsByTagName(
'UL'
)[0];
if
(!(oUL.firstChild.id ==
"customsavebuttonID"
)) {
oUL.style.width =
"192px"
;
var
oLI = document.createElement(
"LI"
);
oLI.id =
"customsavebuttonID"
var
A = document.createElement(
"A"
);
oLI.appendChild(A);
A.className =
"customsavebutton"
;
A.href =
"javascript:void(0)"
;
A.title =
"save"
;
oUL.insertBefore(oLI, oUL.firstChild);
radWindow._updateTitleWidth();
}
}
</script>
Thanks,
Princy.
0

Hiba
Top achievements
Rank 1
answered on 28 Feb 2014, 08:24 AM
Hello Princy,
Thank you for your response.
I tried your solution and I followed this link http://www.telerik.com/support/kb/aspnet-ajax/details/adding-a-custom-button-to-radwindow-titlebar
But, the save button didn't appear clearly. Please any idea?
Thank you again
Thank you for your response.
I tried your solution and I followed this link http://www.telerik.com/support/kb/aspnet-ajax/details/adding-a-custom-button-to-radwindow-titlebar
But, the save button didn't appear clearly. Please any idea?
Thank you again
0

Princy
Top achievements
Rank 2
answered on 03 Mar 2014, 03:44 AM
Hi Hiba,
Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample project which works fine at my end.
Thanks,
Princy.
Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample project which works fine at my end.
Thanks,
Princy.
0

Hiba
Top achievements
Rank 1
answered on 31 Mar 2014, 12:43 PM
thank you
0

Hiba
Top achievements
Rank 1
answered on 31 Mar 2014, 12:44 PM
Hi,
Please, I need your help.
I have a grid. when I clicked on the header (with onColumn event), a radWindow open.
There is a button Clear on the titleBar of radwindow. It allows to reset all controls on this radwindow (On the client side).
function clearItems(sender, args) {
var elements = document.getElementsByTagName("input");
for (var i = 0; i < elements.length; i++) {
if (elements[i].type == "text") {
elements[i].value = "";
}
else if (elements[i].type == "hidden") {
elements[i].value = "";
elements[i].checked = false;
elements[i].selectedToggleStateIndex = -1;
}
I have a problem with the radio button, I couldn't clear them.
Thank you in advance
Please, I need your help.
I have a grid. when I clicked on the header (with onColumn event), a radWindow open.
There is a button Clear on the titleBar of radwindow. It allows to reset all controls on this radwindow (On the client side).
function clearItems(sender, args) {
var elements = document.getElementsByTagName("input");
for (var i = 0; i < elements.length; i++) {
if (elements[i].type == "text") {
elements[i].value = "";
}
else if (elements[i].type == "hidden") {
elements[i].value = "";
elements[i].checked = false;
elements[i].selectedToggleStateIndex = -1;
}
I have a problem with the radio button, I couldn't clear them.
Thank you in advance
0

Shinu
Top achievements
Rank 2
answered on 01 Apr 2014, 04:29 AM
Hi Hiba,
Please try the following JavaScript Code snippet to achieve your scenario.
JavaScript:
Thanks,
Shinu.
Please try the following JavaScript Code snippet to achieve your scenario.
JavaScript:
var
elements = document.getElementsByTagName(
"input"
);
for
(
var
i = 0; i < elements.length; i++) {
if
(elements[i].type ==
"radio"
) {
if
(elements[i].checked ==
true
)
elements[i].checked =
false
;
}
}
Thanks,
Shinu.
0

Hiba
Top achievements
Rank 1
answered on 01 Apr 2014, 10:43 AM
Hello Shinu,
Thank you for your solution But it didn't work with me :(
Any other suggestions please.
Thank you for your solution But it didn't work with me :(
Any other suggestions please.
0

Shinu
Top achievements
Rank 2
answered on 02 Apr 2014, 06:42 AM
Hi Hiba,
Please try the following JavaScript which works fine at my end.
JavaScript:
Please provide your full code if it doesn't help.
Thanks,
Shinu.
Please try the following JavaScript which works fine at my end.
JavaScript:
var
win = $find(
"<%=RadWindow1.ClientID %>"
);
var
radio = win.get_contentElement().getElementsByTagName(
"input"
);
for
(
var
i=0;i<radio.length;i++){
if
(radio[i].type ==
"radio"
) {
if
(radio[i].checked ==
true
)
radio[i].checked =
false
;
}
}
Please provide your full code if it doesn't help.
Thanks,
Shinu.
0

Hiba
Top achievements
Rank 1
answered on 02 Apr 2014, 08:59 AM
Thank you for your reply.
Unfortunately, it didn't work. This is my code:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UCPastEvents.ascx.cs"
Inherits="PraecordiisWebViewer.WebUserControls.TabStripUCHistory.UCPastEvents" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxyPastEvents" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGridPreviousInfarction">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGridPreviousInfarction"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>
<telerik:RadAjaxPanel ID="RadAjaxPanelPastEvents" runat="server" CssClass="userControl">
<div style="padding-bottom: 10px; padding-top: 5px">
<asp:Label ID="LabelPreviousInfarction" runat="server" Text="Pregresso infarto"></asp:Label>
<telerik:RadButton ID="RadButtonPreviousInfarctionYes" runat="server" ButtonType="ToggleButton"
ToggleType="Radio" Text="Sì" AutoPostBack="false" GroupName="PreviousInfarctionButton">
</telerik:RadButton>
<telerik:RadButton ID="RadButtonPreviousInfarctionNo" runat="server" ButtonType="ToggleButton"
ToggleType="Radio" Text="No" AutoPostBack="false" GroupName="PreviousInfarctionButton">
</telerik:RadButton>
<telerik:RadButton ID="RadButtonPreviousInfarctionNV" runat="server" ButtonType="ToggleButton"
ToggleType="Radio" Text="N.D." AutoPostBack="false" GroupName="PreviousInfarctionButton">
</telerik:RadButton>
</div>
<div>
<telerik:RadGrid ID="RadGridPreviousInfarction" runat="server" Width="96%" Height="120px"
AllowPaging="True" AllowSorting="True" CellSpacing="0" AllowAutomaticDeletes="true"
DataSourceID="SqlDataSourcePastEvents" Skin="Silk" OnNeedDataSource="RadGridPreviousInfarction_NeedDataSource"
OnDeleteCommand="RadGridPreviousInfarction_DeleteCommand">
<PagerStyle Mode="NumericPages" />
<MasterTableView AutoGenerateColumns="false" Width="100%" PageSize="2" HorizontalAlign="Center"
EditMode="Batch">
<BatchEditingSettings EditType="Row" />
<Columns>
<telerik:GridBoundColumn HeaderText="DATA" DataField="EmployeeID" SortExpression="DATA"
FooterStyle-Font-Size="Medium">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="TIPO IMA" DataField="LastName" SortExpression="TIPO IMA">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="TRATTAMENTO" DataField="FirstName" SortExpression="TRATTAMENTO">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="SEDE" DataField="Title" SortExpression="SEDE">
</telerik:GridBoundColumn>
<telerik:GridEditCommandColumn ButtonType="ImageButton" ItemStyle-HorizontalAlign="Center"
ItemStyle-Width="">
</telerik:GridEditCommandColumn>
<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" ImageUrl="/Pictures/delete2.png">
<HeaderStyle Width="05%"></HeaderStyle>
</telerik:GridButtonColumn>
</Columns>
</MasterTableView>
<ClientSettings>
<ClientEvents OnColumnClick="showInfarctForm" ></ClientEvents>
<Selecting AllowRowSelect="true"></Selecting>
</ClientSettings>
</telerik:RadGrid>
</div>
<asp:SqlDataSource ID="SqlDataSourcePastEvents" runat="server" ConnectionString="<%$ ConnectionStrings:Context %>"
ProviderName="<%$ ConnectionStrings:Context.ProviderName %>" SelectCommand="SELECT EmployeeID, FirstName, LastName, Title FROM Employees">
</asp:SqlDataSource>
</telerik:RadAjaxPanel>
<telerik:RadScriptBlock ID="RadScriptBlockPastEvents" runat="server">
<script type="text/javascript">
function OnClientShowPastEvents(sender) {
var window = sender;
var TitleBar = window.GetTitlebar();
var parent = TitleBar.parentNode;
var oUL = parent.getElementsByTagName('UL')[0];
// Check if the element is already added
if (!(oUL.firstChild.id == "customclearbuttonID")) {
// If not - create and add the custom button
var btnAdd = document.createElement("LI");
btnAdd.id = "customaddbuttonID";
var A = document.createElement("A");
A.style.width = "22px";
btnAdd.appendChild(A);
A.className = "customaddbutton";
A.title = "Save";
A.onmousedown = addNewItem;
oUL.insertBefore(btnAdd, oUL.firstChild);
//this is required so that RadWindow can display its titlebar properly after being modified
window._updateTitleWidth();
}
if (!(oUL.firstChild.id == "customclearbuttonID")) {
//If not - create and add the custom button
var btnClear = document.createElement("LI");
btnClear.id = "customclearbuttonID"
var A = document.createElement("A");
btnClear.appendChild(A);
A.title = "Clear";
A.onmousedown = clearItems;
A.autoPostBack = "false";
oUL.insertBefore(btnClear, oUL.firstChild);
//this is required so that RadWindow can display its titlebar properly after being modified
window._updateTitleWidth();
}
}
function addNewItem(e) {
alert("Button to add");
}
function clearItems(sender, args) {
var win = $find("<%=InfarctModalPopup.ClientID %>");
var radio = win.get_contentElement().getElementsByTagName("input");
for (var i = 0; i < radio.length; i++) {
if (radio[i].type == "hidden") {
if (radio[i].checked == true) {
radio[i].checked = false;
alert("radiooo");
}
}
else if (radio[i].type == "text") {
radio[i].value = "";
alert("texttt");
}
}
}
</script>
</telerik:RadScriptBlock>
<telerik:RadWindowManager ID="RadWindowManagerPastEvents" runat="server">
<Windows>
<telerik:RadWindow ID="InfarctModalPopup" runat="server" Width="300px" Height="250px"
Skin="Default" Modal="true" Left="150px" Title="Pregresso infarto" OnClientShow="OnClientShowPastEvents"
Behaviors="Close,Move" OnClientClose="OnClientClosePastEvents">
<ContentTemplate>
<table id="tableInfarct" style="width: 96%">
<tr>
<td>
<asp:Label ID="LabelDataInfarct" runat="server" Text="Data"></asp:Label>
</td>
<td>
<telerik:RadDatePicker ID="RadDatePickerInfarct" runat="server" DateInput-EmptyMessage="date">
</telerik:RadDatePicker>
</td>
</tr>
<tr>
<td>
<asp:Label ID="LabelTypeIMA" runat="server" Text="Tipo IMA"></asp:Label>
</td>
<td>
<span id="span1">
<telerik:RadButton ID="RadButtonTypeIMAQ" runat="server" ButtonType="ToggleButton"
Checked="false" ToggleType="Radio" Text="Q" Value="Q" AutoPostBack="false" GroupName="IMAButton">
</telerik:RadButton>
<telerik:RadButton ID="RadButtonTypeIMANoQ" runat="server" ButtonType="ToggleButton"
ToggleType="Radio" Text="Non Q" Value="Non Q" AutoPostBack="false" GroupName="IMAButton">
</telerik:RadButton>
</span>
</td>
</tr>
<tr>
<td>
<asp:Label ID="LabelTreatment" runat="server" Text="Trattamento"></asp:Label>
</td>
<td>
<telerik:RadComboBox ID="RadComboBoxTreatment" runat="server" Width="150px" EmptyMessage="Selection..."
Skin="Silk">
<Items>
<telerik:RadComboBoxItem runat="server" Text="item1" />
<telerik:RadComboBoxItem runat="server" Text="item2" />
</Items>
</telerik:RadComboBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="LabelInfarctSede" runat="server" Text="Sede"></asp:Label>
</td>
<td>
<telerik:RadComboBox ID="RadComboBoxInfarctSede" runat="server" Width="150px" EmptyMessage="Selection..."
Skin="Silk">
<Items>
<telerik:RadComboBoxItem runat="server" Text="Item 1" />
<telerik:RadComboBoxItem runat="server" Text="Item 2" />
</Items>
</telerik:RadComboBox>
</td>
</tr>
</table>
</ContentTemplate>
</telerik:RadWindow>
Thank you for your help
Unfortunately, it didn't work. This is my code:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UCPastEvents.ascx.cs"
Inherits="PraecordiisWebViewer.WebUserControls.TabStripUCHistory.UCPastEvents" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxyPastEvents" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGridPreviousInfarction">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGridPreviousInfarction"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>
<telerik:RadAjaxPanel ID="RadAjaxPanelPastEvents" runat="server" CssClass="userControl">
<div style="padding-bottom: 10px; padding-top: 5px">
<asp:Label ID="LabelPreviousInfarction" runat="server" Text="Pregresso infarto"></asp:Label>
<telerik:RadButton ID="RadButtonPreviousInfarctionYes" runat="server" ButtonType="ToggleButton"
ToggleType="Radio" Text="Sì" AutoPostBack="false" GroupName="PreviousInfarctionButton">
</telerik:RadButton>
<telerik:RadButton ID="RadButtonPreviousInfarctionNo" runat="server" ButtonType="ToggleButton"
ToggleType="Radio" Text="No" AutoPostBack="false" GroupName="PreviousInfarctionButton">
</telerik:RadButton>
<telerik:RadButton ID="RadButtonPreviousInfarctionNV" runat="server" ButtonType="ToggleButton"
ToggleType="Radio" Text="N.D." AutoPostBack="false" GroupName="PreviousInfarctionButton">
</telerik:RadButton>
</div>
<div>
<telerik:RadGrid ID="RadGridPreviousInfarction" runat="server" Width="96%" Height="120px"
AllowPaging="True" AllowSorting="True" CellSpacing="0" AllowAutomaticDeletes="true"
DataSourceID="SqlDataSourcePastEvents" Skin="Silk" OnNeedDataSource="RadGridPreviousInfarction_NeedDataSource"
OnDeleteCommand="RadGridPreviousInfarction_DeleteCommand">
<PagerStyle Mode="NumericPages" />
<MasterTableView AutoGenerateColumns="false" Width="100%" PageSize="2" HorizontalAlign="Center"
EditMode="Batch">
<BatchEditingSettings EditType="Row" />
<Columns>
<telerik:GridBoundColumn HeaderText="DATA" DataField="EmployeeID" SortExpression="DATA"
FooterStyle-Font-Size="Medium">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="TIPO IMA" DataField="LastName" SortExpression="TIPO IMA">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="TRATTAMENTO" DataField="FirstName" SortExpression="TRATTAMENTO">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="SEDE" DataField="Title" SortExpression="SEDE">
</telerik:GridBoundColumn>
<telerik:GridEditCommandColumn ButtonType="ImageButton" ItemStyle-HorizontalAlign="Center"
ItemStyle-Width="">
</telerik:GridEditCommandColumn>
<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" ImageUrl="/Pictures/delete2.png">
<HeaderStyle Width="05%"></HeaderStyle>
</telerik:GridButtonColumn>
</Columns>
</MasterTableView>
<ClientSettings>
<ClientEvents OnColumnClick="showInfarctForm" ></ClientEvents>
<Selecting AllowRowSelect="true"></Selecting>
</ClientSettings>
</telerik:RadGrid>
</div>
<asp:SqlDataSource ID="SqlDataSourcePastEvents" runat="server" ConnectionString="<%$ ConnectionStrings:Context %>"
ProviderName="<%$ ConnectionStrings:Context.ProviderName %>" SelectCommand="SELECT EmployeeID, FirstName, LastName, Title FROM Employees">
</asp:SqlDataSource>
</telerik:RadAjaxPanel>
<telerik:RadScriptBlock ID="RadScriptBlockPastEvents" runat="server">
<script type="text/javascript">
function OnClientShowPastEvents(sender) {
var window = sender;
var TitleBar = window.GetTitlebar();
var parent = TitleBar.parentNode;
var oUL = parent.getElementsByTagName('UL')[0];
// Check if the element is already added
if (!(oUL.firstChild.id == "customclearbuttonID")) {
// If not - create and add the custom button
var btnAdd = document.createElement("LI");
btnAdd.id = "customaddbuttonID";
var A = document.createElement("A");
A.style.width = "22px";
btnAdd.appendChild(A);
A.className = "customaddbutton";
A.title = "Save";
A.onmousedown = addNewItem;
oUL.insertBefore(btnAdd, oUL.firstChild);
//this is required so that RadWindow can display its titlebar properly after being modified
window._updateTitleWidth();
}
if (!(oUL.firstChild.id == "customclearbuttonID")) {
//If not - create and add the custom button
var btnClear = document.createElement("LI");
btnClear.id = "customclearbuttonID"
var A = document.createElement("A");
btnClear.appendChild(A);
A.title = "Clear";
A.onmousedown = clearItems;
A.autoPostBack = "false";
oUL.insertBefore(btnClear, oUL.firstChild);
//this is required so that RadWindow can display its titlebar properly after being modified
window._updateTitleWidth();
}
}
function addNewItem(e) {
alert("Button to add");
}
function clearItems(sender, args) {
var win = $find("<%=InfarctModalPopup.ClientID %>");
var radio = win.get_contentElement().getElementsByTagName("input");
for (var i = 0; i < radio.length; i++) {
if (radio[i].type == "hidden") {
if (radio[i].checked == true) {
radio[i].checked = false;
alert("radiooo");
}
}
else if (radio[i].type == "text") {
radio[i].value = "";
alert("texttt");
}
}
}
</script>
</telerik:RadScriptBlock>
<telerik:RadWindowManager ID="RadWindowManagerPastEvents" runat="server">
<Windows>
<telerik:RadWindow ID="InfarctModalPopup" runat="server" Width="300px" Height="250px"
Skin="Default" Modal="true" Left="150px" Title="Pregresso infarto" OnClientShow="OnClientShowPastEvents"
Behaviors="Close,Move" OnClientClose="OnClientClosePastEvents">
<ContentTemplate>
<table id="tableInfarct" style="width: 96%">
<tr>
<td>
<asp:Label ID="LabelDataInfarct" runat="server" Text="Data"></asp:Label>
</td>
<td>
<telerik:RadDatePicker ID="RadDatePickerInfarct" runat="server" DateInput-EmptyMessage="date">
</telerik:RadDatePicker>
</td>
</tr>
<tr>
<td>
<asp:Label ID="LabelTypeIMA" runat="server" Text="Tipo IMA"></asp:Label>
</td>
<td>
<span id="span1">
<telerik:RadButton ID="RadButtonTypeIMAQ" runat="server" ButtonType="ToggleButton"
Checked="false" ToggleType="Radio" Text="Q" Value="Q" AutoPostBack="false" GroupName="IMAButton">
</telerik:RadButton>
<telerik:RadButton ID="RadButtonTypeIMANoQ" runat="server" ButtonType="ToggleButton"
ToggleType="Radio" Text="Non Q" Value="Non Q" AutoPostBack="false" GroupName="IMAButton">
</telerik:RadButton>
</span>
</td>
</tr>
<tr>
<td>
<asp:Label ID="LabelTreatment" runat="server" Text="Trattamento"></asp:Label>
</td>
<td>
<telerik:RadComboBox ID="RadComboBoxTreatment" runat="server" Width="150px" EmptyMessage="Selection..."
Skin="Silk">
<Items>
<telerik:RadComboBoxItem runat="server" Text="item1" />
<telerik:RadComboBoxItem runat="server" Text="item2" />
</Items>
</telerik:RadComboBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="LabelInfarctSede" runat="server" Text="Sede"></asp:Label>
</td>
<td>
<telerik:RadComboBox ID="RadComboBoxInfarctSede" runat="server" Width="150px" EmptyMessage="Selection..."
Skin="Silk">
<Items>
<telerik:RadComboBoxItem runat="server" Text="Item 1" />
<telerik:RadComboBoxItem runat="server" Text="Item 2" />
</Items>
</telerik:RadComboBox>
</td>
</tr>
</table>
</ContentTemplate>
</telerik:RadWindow>
Thank you for your help
0
Accepted

Shinu
Top achievements
Rank 2
answered on 03 Apr 2014, 06:06 AM
Hi Hiba,
Please try the following JavaScript which works fine at my end.
JavaScript:
Thanks,
Shinu.
Please try the following JavaScript which works fine at my end.
JavaScript:
var
radio1 = $get(
"<%=RadButtonTypeIMAQ.ClientID %>"
);
if
(radio1.control.get_checked() ==
true
) {
radio1.control.set_checked(
false
);
}
var
radio2 = $get(
"<%=RadButtonTypeIMANoQ.ClientID %>"
);
if
(radio2.control.get_checked() ==
true
) {
radio2.control.set_checked(
false
);
}
Thanks,
Shinu.
0

Hiba
Top achievements
Rank 1
answered on 03 Apr 2014, 08:56 AM
Hi Shinu,
Thank you very much.
Thank you very much.