Add button on titlebar of radwindow

12 posts, 1 answers
  1. Hiba
    Hiba avatar
    7 posts
    Member since:
    Jan 2014

    Posted 27 Feb 2014 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 28 Feb 2014 in reply to Hiba Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hiba
    Hiba avatar
    7 posts
    Member since:
    Jan 2014

    Posted 28 Feb 2014 in reply to Princy Link to this post

    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

  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 Mar 2014 in reply to Hiba Link to this post

    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.
  6. Hiba
    Hiba avatar
    7 posts
    Member since:
    Jan 2014

    Posted 31 Mar 2014 Link to this post

    thank you
  7. Hiba
    Hiba avatar
    7 posts
    Member since:
    Jan 2014

    Posted 31 Mar 2014 Link to this post

    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

  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 31 Mar 2014 in reply to Hiba Link to this post

    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.
  9. Hiba
    Hiba avatar
    7 posts
    Member since:
    Jan 2014

    Posted 01 Apr 2014 in reply to Shinu Link to this post

    Hello Shinu,


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

    Any other suggestions please.
  10. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 02 Apr 2014 in reply to Hiba Link to this post

    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.
  11. Hiba
    Hiba avatar
    7 posts
    Member since:
    Jan 2014

    Posted 02 Apr 2014 in reply to Shinu Link to this post

    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
  12. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Apr 2014 in reply to Hiba Link to this post

    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.
  13. Hiba
    Hiba avatar
    7 posts
    Member since:
    Jan 2014

    Posted 03 Apr 2014 Link to this post

    Hi Shinu,


    Thank you very much.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017