Add button on titlebar of radwindow

[Hiba]

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

[Princy]

Hi Hiba,

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.

[Hiba]

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

[Princy]

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.

[Hiba]

thank you

[Hiba]

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

[Shinu]

Hi Hiba,

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.

[Hiba]

Hello Shinu,


Thank you for your solution But it didn't work with me :(

Any other suggestions please.

[Shinu]

Hi Hiba,

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.

[Hiba]

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

[Shinu]

Hi Hiba,

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.

[Hiba]

Hi Shinu,


Thank you very much.