How can I show/hide the RadToolBar control using client-side javascript?
I've tried:
var toolBar = $find("<%=RadToolBar2.ClientID%>");
toolBar.set_visible(false);
and
var toolBar = $find("<%=RadToolBar2.ClientID%>");
toolBar.hide;
Doesn't work!
The HTML:
<telerik:RadToolBar ID="RadToolBar1" runat="server" Width="100%" OnClientButtonClicked="ToolBarClickHandler">
<Items>
<telerik:RadToolBarButton runat="server" ImageUrl="~/Images/Toolbar/Search.png" Text="Search" AllowSelfUnCheck="True" CheckOnClick="True">
</telerik:RadToolBarButton>
</Items>
</telerik:RadToolBar>
<telerik:RadToolBar ID="RadToolBar2" runat="server" Width="100%" Visible="False">
<Items>
... some buttons
</Items>
</telerik:RadToolBar>
Thank you!
Related
I have a GridButtonColumn in my RadGrid and I want to open a ModalPopupExtender on click event of the GridButtonColumn. Now the problem is what do I have to give in TargetControlID in my ModalPopupExtender?
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID=""
RepositionMode="RepositionOnWindowResize" PopupCo## Heading##ntrolID="TargetTemplatePanel"
BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
You can set the ModalPopupExtender's TargetControlID to pretty much any server-side control you want. Here's an example from a project of mine:
<div id="rscmain" runat="server">
<telerik:RadScriptManager ID="SM1" runat="server" EnablePageMethods="true" />
</div>
<asp:ModalPopupExtender ID="MPE1" runat="server" TargetControlID="rscmain" />
<ajaxToolkit:Accordion ID="Accordion1" CssClass="accordion" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" AutoSize="None" RequireOpenedPane="false" ContentCssClass="accordionContent" runat="server">
<Panes>
<ajaxToolkit:AccordionPane ID="Pane1" runat="server">
<Header><b>Panel 1</b></Header>
<Content>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<br>
Age: <asp:textbox id="Age1" runat="server" Width="35" Font-Bold="True"/><br>
Attorney: <asp:CheckBox ID="Attorney" runat="server" /><br>
<asp:button ID="Button1" text="Submit" OnClick="Button1_Click"
runat="server"/><br>
<asp:label id="Message1" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True"/>
</ContentTemplate>
</asp:UpdatePanel>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="Pane2" runat="server">
<Header><b>Panel 2</b></Header>
<Content>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<br>
<asp:textbox id="Age2" runat="server" Width="35" Font-Bold="True"/><br>
<asp:button ID="Button2" text="Submit" onclick="Button2_Click"
runat="server"/><br><br>
<asp:label id="Message2" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True" />
</ContentTemplate>
</asp:UpdatePanel>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
protected void Button1_Click(object sender, EventArgs e) {
if (Attorney.Checked) {
Pane2.Visible = true;
} else {
Pane2.Visible = false;
}
//Message1.Text = Age1.Text;
}
I have five Accordion Panels. Last Panel should be displayed only if a checkbox is checked in the first panel. Inside each Accordion Panel I have a UpdatePanel and within that I have ContentTemplate with controls and submit button particular to that accordion panel. The reason I added UpdatePanel is so that when i update a particular panel it does not affect other accordion panels.
The problem is I need to toggle last accordion panel display depending upon if a checkbox is checked in the first Panel and submit button is clicked. In Code behind, in the btnSubmit1 event...I have code that says if checkbox is checked....Pane2.Visible = true else Pane2.Visible=false. For some reasons it still shows the LastPanel.
I am not sure where am I going wrong...please advise!
Thanks!
Jini
I fixed the problem by adding an outer update panel...and removed the updatepanel for Panel 2. Haven't tested it thoroughly but so far looks good.
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:UpdatePanel ID="OuterPanel" UpdateMode="Always" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<ajaxToolkit:Accordion ID="Accordion1" CssClass="accordion" SelectedIndex="0" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" AutoSize="None" RequireOpenedPane="false" ContentCssClass="accordionContent" runat="server">
<Panes>
<ajaxToolkit:AccordionPane ID="Pane1" runat="server">
<Header><b>Panel 1</b></Header>
<Content>
<br>
Age: <asp:textbox id="Age1" runat="server" Width="35" Font-Bold="True" /><br />
Attorney: <asp:CheckBox ID="Attorney" runat="server" /><br>
<asp:button ID="Button1" text="Submit" OnClick="Button1_Click"
runat="server"/><br>
<asp:label id="Message1" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True"/>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="Pane2" runat="server">
<Header><b>Panel 2</b></Header>
<Content>
<br>
<asp:textbox id="Age2" runat="server" Width="35" Font-Bold="True"/>
<asp:button ID="Button2" text="Submit" onclick="Button2_Click"
runat="server"/><br><br>
<asp:label id="Message2" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True" />
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</ContentTemplate>
I'd like to see your code to be sure, but I'm expecting it's because you have an UpdatePanel in each of the AccordionPanels. Once an event happens in one UpdatePanel, ASP.NET will not run code handling that event that is attached to another UpdatePanel.
First, I'd take out all UpdatePanels to see if your code works as expected. Then, I'd add one UpdatePanel wrapped around the entire Accordion and see if your code still works.
If you really decided you need to have 5 UpdatePanels, look into the <Triggers> portion of the UpdatePanel. You'll be able to provide the CheckBox's ID to force the other associated UpdatePanel to PostBack.
I wrote the following code, based on telerik examples:
<telerik:RadComboBox ID="rcbPageSize"
runat="Server"
skin="Gray"
AllowCustomText="true"
Style="float:right; margin-left: 5px;"
Width="60px"
OnClientTextChange = "PageSizeChanged"
OnClientSelectedIndexChange = "PageSizeChanged">
<Items>
<telerik:RadComboBoxItem runat="Server" Text="10" Value="10" />
<telerik:RadComboBoxItem runat="Server" Text="20" Value="20" Selected="true" />
<telerik:RadComboBoxItem runat="Server" Text="50" Value="50" />
<telerik:RadComboBoxItem runat="Server" Text="150" Value="150" />
<telerik:RadComboBoxItem runat="Server" Text="250" Value="250" />
</Items>
</telerik:RadComboBox>
<telerik:RadCodeBlock ID="rcb" runat="server">
<script type="text/javascript">
function PageSizeChanged(sender, eventArgs) {
alert("You typed " + sender.get_text());
}
</script>
</telerik:RadCodeBlock>
When I change the selection, the function "PageSizeChanged" is called, but when I change the text by typing inside the combobox, the function is never called.
Anyone has a suggestion why?
Thanks,
Inbal.
I find it's definitely a 'feature' of this Telerik control. If you use your code, type something, press enter and then click outside the box the event will fire.
Just pressing enter or just clicking outside don't fire it on their own.
I'm using a slightly newer version of the Telerik controls as the skin Gray has been deprecated but I'm assuming it will be the same in your version.
OnClientTextChange WILL NOT fire until the user hits Enter or clicks outside the RadComboBox. Says so here: http://www.telerik.com/help/aspnet-ajax/combobox-onclienttextchange.html
You will have to set AutoPostBack="true", to fire server events.
<telerik:RadComboBox ID="rcbPageSize"
AutoPostBack="true"
runat="Server"
skin="Gray"
AllowCustomText="true"
Style="float:right; margin-left: 5px;"
Width="60px"
OnClientTextChange = "PageSizeChanged"
OnClientSelectedIndexChange = "PageSizeChanged">
I have two issues with rad window:
Is it possible to prevent rad window from being dragged outside of the screen boundaries?I tried using
KeepInScreenBounds property, but it didn't help.
Here is my code example, and screen shot is attached:
<telerik:RadWindowManager ID="rwm" runat="server" ShowContentDuringLoad="false" Behaviors="Close,Move" VisibleStatusbar="false" Skin="Gray" Modal="true" KeepInScreenBounds = "true">
<Windows>
<telerik:RadWindow ID="rwAuditCredentials" runat="server" NavigateUrl="~/Pages/Audits/AuditCredentials.aspx" Title="Audit Credentials" Height="230px" Width="360px" KeepInScreenBounds="true">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
How can I prevent from radwindow from being opened outside of the screen bounderies?
I got my radwindow opened when the title bar is outside the screen bounderies (as it looks in my print screen) and I couldn't drag it or close it.
Thanks!
I can't see the screenshot so I'm assuming you've had the same issue we have in that if the RadWindow is dragged to the bounds of a window then it automatically starts to scroll and you can leave it of the edge of your window.
We got round this same problem by using the Restriction Zone property.
The examples show it used in tables dedicated to a section of the page used purely for windows but if you're using it as a modal popup you can set it to the id of your main page div.
e.g.
<div id="zone1">
<p>Other page content as required</p>
</div>
<telerik:RadWindowManager ID="rwm" runat="server" ShowContentDuringLoad="false" Behaviors="Close,Move" VisibleStatusbar="false" Skin="Gray" Modal="true" KeepInScreenBounds = "true" RestrictionZoneID="zone1">
<Windows>
<telerik:RadWindow ID="rwAuditCredentials" runat="server" NavigateUrl="~/Pages/Audits/AuditCredentials.aspx" Title="Audit Credentials" Height="230px" Width="360px" KeepInScreenBounds="true">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
Thanks, David! (3 years belated). Your solution worked for me, with a mix of both modal and non-modal windows, shown in code ...
<body>
<form id="form2" runat="server">
<telerik:RadSplitter runat="server" ID="RadSplitter1" BorderStyle="None" PanesBorderSize="0">
<telerik:RadPane ID="RadPane1" runat="server">
<div id="ContentPane">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" >
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server" >
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server" >
</asp:ContentPlaceHolder>
</div>
</telerik:RadPane>
</telerik:RadSplitter>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true" Style="z-index: 12345" KeepInScreenBounds="true" RestrictionZoneID="ContentPane">
<Windows>
<telerik:RadWindow ID="RadWindow1" runat="server" Title="Login" Height="250px"
Width="300px" Left="200px" ReloadOnShow="true" ShowContentDuringLoad="false" VisibleStatusbar="false"
Modal="true" Behaviors="Move, Close">
</telerik:RadWindow>
<telerik:RadWindow ID="RadWindow2" runat="server" Title="Copy Asset" Height="250px"
Width="400px" Left="200px" ReloadOnShow="true" ShowContentDuringLoad="false" VisibleStatusbar="false"
Modal="true" Behaviors="Move, Close">
</telerik:RadWindow>
<telerik:RadWindow ID="RadWindow3" runat="server" Title="Create Asset" Height="650px" Top="50px"
Width="800px" Left="125px" ReloadOnShow="true" ShowContentDuringLoad="false" VisibleStatusbar="false"
Modal="true" Behaviors="Move, Resize, Close">
</telerik:RadWindow>
<telerik:RadWindow ID="RadWindow4" runat="server" Title="View/Edit Connections" Height="800px"
Width="800px" Left="50px" ReloadOnShow="true" ShowContentDuringLoad="false"
Modal="false" Behaviors="Move, Resize, Close, Maximize, Minimize">
</telerik:RadWindow>
<telerik:RadWindow ID="RadWindow5" runat="server" Title="Make Connections" Height="750px"
Width="1150px" Left="100px" Top="75px" ReloadOnShow="true" ShowContentDuringLoad="false"
Modal="false" Behaviors="Move, Resize, Close">
</telerik:RadWindow>
<telerik:RadWindow ID="RadWindow6" runat="server" Title="User Doc" Height="750px"
Width="1150px" Left="100px" Top="25px" ReloadOnShow="false" ShowContentDuringLoad="true"
Modal="true" Behaviors="Move, Resize, Close" NavigateUrl="~/Doc/CoreConnect.pdf">
</telerik:RadWindow>
<telerik:RadWindow ID="RadWindow7" runat="server" Title="About" Height="300px"
Width="500px" Left="100px" Top="100px" ReloadOnShow="false" ShowContentDuringLoad="true"
Modal="true" Behaviors="Move, Resize, Close" VisibleStatusbar="false" >
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
</form>
</body>
I'm using GridView and there is a dropdownlist in header cell for filtering.
<gm:GridView ID="routePlanGridView" runat="server" AutoGenerateColumns="False"
AllowPaging="true" PageSize="20" GridLines="Both" ShowFooter="true" CssClass="grid"
DataKeyNames="RoutePlanId" OnSorting="routePlanGridView_Sorting"
AllowSorting="true" OnPageIndexChanging="routePlanGridView_PageIndexChanging"
OnSelectedIndexChanging="routePlanGridView_SelectedIndexChanging"
OnRowDataBound="routePlanGridView_RowDataBound"
OnRowEditing="routePlanGridView_RowEditing"
OnRowUpdating="routePlanGridView_RowUpdating">
<HeaderStyle CssClass="gridHeaderFooter" />
<FooterStyle CssClass="gridHeaderFooter" />
<RowStyle CssClass="gridRow" />
<AlternatingRowStyle CssClass="gridRowAlternate" />
<Columns>
<asp:TemplateField SortExpression="SPName">
<HeaderTemplate>
SP Name<br />
<asp:DropDownList ID="spNameFilterDDL" runat="server" CssClass="gridControl" AutoPostBack="true" DataSourceID="SPNameSDS" DataTextField="SPName" OnDataBound="filterDDL_DataBound" OnSelectedIndexChanged="spNameFilterDDL_SelectedIndexChanged" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="spNameLabel" runat="server" Text='<%# Bind("SPName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<...15 more...>
</Columns>
</gm:GridView>
and there are relevant event handlers for sorting and paging.
Now the problem is if I put "SP Name" text in a link button, page crashes when link clicked, otherwise no link produced to sort.
If I remove Header Template fields (all of them) and put a text with HeaderText attribute of TemplateField it works as expected. Is there a way to put them together? I need that dropdown and also sorting.
Thanks.
sorry, forgot to insert the code correctly - here:
<asp:LinkButton runat="server" Text="SP Name" CommandName="Sort" CommandArgument="SPName" ></asp:LinkButton>
You need to use a link button for your header text. So in place of "SP Name", use . It should work if you are handling sorting.