I have a telerik:RadCombobox in which user can type something to filter the recoreds.
If user type some word and tabout from taht control or clicked anywhere else on the form, basically onblur , its selectedindexedchanged event is fired that I don't want.
Please advise.
I have following html code on my page:
<telerik:RadComboBox ID="RCBGlobalSearch" runat="server" Height="190px" Width="330px"
EnableLoadOnDemand="true" ShowMoreResultsBox="true" EnableVirtualScrolling="true"
OnClientDropDownClosed="OnClientDropDownClosed" MarkFirstMatch="false" Filter="None"
HighlightTemplatedItems="true" Style="z-index: 9000" OnSelectedIndexChanged="RCBGlobalSearch_SelectedIndexChanged"
AutoPostBack="true" ToolTip="Enter or Select Issuer or User for Search">
<ExpandAnimation Type="none" />
<CollapseAnimation Type="none" />
<WebServiceSettings Path="~\GlobalSearchWebService.asmx" Method="GetGlobalSearchResult" />
</telerik:RadComboBox>
http://www.telerik.com/help/aspnet-ajax/combobox-onclienttextchange.html
- set_cancel lets you prevent the combobox from doing a postback (if AutoPostBack property is True), but doesn't let you prevent the text from changing.
<script language="javascript" type="text/javascript">
function OnClientTextChange(sender, eventArgs) {
eventArgs.set_cancel(true);
}
</script>
<telerik:RadComboBox onclienttextchange="OnClientTextChange"....
Related
I am trying to add RadCombobox to a telerik:GridTemplateColumn as a FilterTemplate control. I have multiple columns and all have RadCombobox with same filter values.
<telerik:GridTemplateColumn AutoPostBackOnFilter="true" HeaderStyle-Width="90px"
UniqueName="Date1" HeaderText="Date1" DataField="Day1">
<FilterTemplate>
<telerik:RadComboBox ID="RadComboBoxDate1" Height="90px" AppendDataBoundItems="true"
Width="105px" runat="server" OnClientSelectedIndexChanged="Date1IndexChanged">
</telerik:RadComboBox>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function Date1IndexChanged(sender, args) {
var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");
var selectedValue = sender.get_value();
if (selectedValue) {
if (parseInt(selectedValue) < 0) {
tableView.filter("Date1", selectedValue, "NoFilter");
}
else { tableView.filter("Date1", selectedValue, "EqualTo");
}
}
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
<ItemTemplate>
<asp:Label runat="server" ID="lblday1"></asp:Label>
<asp:HiddenField ID="hdDay1" runat="server" Value='<%# DataBinder.Eval(Container.DataItem,"Day1") %>' Visible="false" />
</ItemTemplate>
</telerik:GridTemplateColumn>
I have 7 such columns and I want to use a single RadCodeBlock to handle the filter. Is there any better way to do this?
Solution given on Telerik website worked for me
http://www.telerik.com/forums/how-to-get-column-name-from-filter-template-control-s-js-event
I have implemented a module where i am using telerik red bar chart.And i want to generate another bar graph on click on bar of existing chart i.e there are two charts one is shown on page load and second is detailed one which is shown after click on any bar of first chart.Have mentioned my code below:-
<asp:Panel ID="Panel1" runat="server">
<telerik:radhtmlchart id="RadHtmlChart2" runat="server" width="600" height="400"
onclientseriesclicked="OnClientSeriesClicked">
<%-- <ClientEvents OnSeriesClick="OnSeriesClick" />--%>
<PlotArea>
<Series>
<telerik:ColumnSeries Name="Series 1">
<SeriesItems>
<telerik:CategorySeriesItem Y="30" />
<telerik:CategorySeriesItem Y="10" />
<telerik:CategorySeriesItem Y="20" />
</SeriesItems>
</telerik:ColumnSeries>
</Series>
<XAxis>
<LabelsAppearance RotationAngle="33">
</LabelsAppearance>
<Items>
<telerik:AxisItem LabelText="Item 1" />
<telerik:AxisItem LabelText="Item 2" />
<telerik:AxisItem LabelText="Item 3" />
</Items>
</XAxis>
</PlotArea>
</telerik:radhtmlchart>
<asp:Panel ID="Panel2" runat="server">
//My Second chart Shown Here
</asp:Panel>
</asp:Panel>
Above code i have used for generating my first chart
Second Chart which i am trying to fill in my asp Panel2.
protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
RadHtmlChart chart = new RadHtmlChart();
chart.ID = "chart2";
ColumnSeries cs = new ColumnSeries();
CategorySeriesItem csi = new CategorySeriesItem();
cs.DataFieldY = "TOTALCALLS";
cs.SeriesItems.Add(csi);
chart.PlotArea.Series.Add(cs);
Panel2.Controls.Add(chart);
}
My Ajax Call
<telerik:radcodeblock id="RadCodeBlock1" runat="server">
<script>
function getAjaxManager() {
return $find("<%=RadAjaxManager1.ClientID%>");
}
</script>
</telerik:radcodeblock>
I just want to fill second bar graph i.e i want to use client seriesevent for calling my server side method in red chart
Invoke an AJAX request through the RadAjaxManager client-side API: http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/client-side-programming/overview. Something like:
getAjaxManager().ajaxRequest("someOptionalArgument");
You can find similar code in the drilldown chart demo: http://demos.telerik.com/aspnet-ajax/htmlchart/examples/drilldownchart/defaultcs.aspx. It changes the datasource of the current chart but the client-side logic is the same.
On the server, just make sure to recreate the second chart with each subsequent postback, as any other server control.
I have a web form in asp.net contains a RadAsyncfileupload and a RadBinaryImage inside an Asp Update Panel like following
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server">
</telerik:RadAsyncUpload>
<telerik:RadBinaryImage ID ="RadBinaryImage1" runat ="server" Width= "100px" Height="100px"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
in code behind
protected void RadAsyncUpload1_FileUploaded(object sender, Telerik.Web.UI.FileUploadedEventArgs e)
{
if (RadAsyncUpload1.UploadedFiles.Count == 1)
{
byte[] image;
long fileLength = RadAsyncUpload1.UploadedFiles[0].InputStream.Length;
image = new byte[fileLength];
RadAsyncUpload1.UploadedFiles[0].InputStream.Read(image, 0, image.Length);
RadBinaryImage1.DataValue = image;
}
}
but in runtime program controller does not fire RadAsyncUpload1_FileUploaded event
I have searched the Telerik forum and found that I should do something to script manager but I need some help on how to do it the reason is that in order to fire this event whole page should post back anyway some scripts can help me or any other ways!
mention that I need byte array of the image to save it in DB.
Thanks in advance
Saeed Soleimanifar
http://demos.telerik.com/aspnet-ajax/asyncupload/examples/persistuploadedfiles/defaultvb.aspx?#qsf-demo-source
I just added the same functionality by using this , if you find any problem let me know...
OR
Here is the part that does the magic
Page Source :
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function updatePictureAndInfo() {
__doPostBack('btnImgUpload', 'RadButton1Args');
}
</script>
</telerik:RadScriptBlock>
<telerik:RadBinaryImage runat="server" ID="imgBinaryPhoto" ImageUrl="~/Images/default-profile-pic.png"
Width="100px" Height="100px" ResizeMode="Fit" AlternateText="No picture available"
CssClass="preview"></telerik:RadBinaryImage>
<br />
<telerik:RadAsyncUpload ID="upldPhoto" runat="server" AllowedFileExtensions=".jpg,.png,.gif,jpeg,.tiff"
MaxFileInputsCount="1" MultipleFileSelection="Disabled">
</telerik:RadAsyncUpload>
<asp:Button ID="btnImgUpload" runat="server" Text="Upload" CssClass="button" OnClientClick="updatePictureAndInfo(); return false;" />
Code Behind:
Protected Sub FileUploaded() Handles upldPhoto.FileUploaded
Dim bitmapImage As Bitmap = ResizeImage(upldPhoto.UploadedFiles(0).InputStream)
Dim stream As System.IO.MemoryStream = New System.IO.MemoryStream()
bitmapImage.Save(stream, System.Drawing.Imaging.ImageFormat.Bmp)
imgBinaryPhoto.DataValue = stream.ToArray()
End Sub
I have an update panel which contains a GridView, inside which is a ButtonField. Whenever I press the button I see Firefox doing two POST's (via Firebug). One gets aborted right away, but does reach the server. This causes problems on my server side code as the command (a copy) gets executed twice.
IE6 and IE8 do not exhibit this behavior.
Anyone know what's causing this or what I can do about it?
I've managed to reproduce the problem to its bare minimum on this page:
<form id="form1" runat="server">
<asp:XmlDataSource ID="XmlDataSource1" runat="server">
<Data>
<bla>
<wibble wobble="1" />
</bla></Data>
</asp:XmlDataSource>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="Counter" Text="0"></asp:Label>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="XmlDataSource1" onrowcommand="GridView1_RowCommand">
<Columns>
<asp:BoundField DataField="wobble" HeaderText="wobble"
SortExpression="wobble" />
<asp:ButtonField HeaderText="wobble" CommandName="IncrementWobble"
SortExpression="wobble" ButtonType="Image" ImageUrl="icons/page_copy.png" Text="increment" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</form>
While making this small version, I noticed that the problem only occurs with ButtonType="Image" and not with ButtonType="Button".
For completeness, the event handler:
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "IncrementWobble")
{
int count = Int32.Parse(Counter.Text) + 1;
Counter.Text = count.ToString();
}
}
From here, I found a workaround:
Replacing the ButtonField with a TemplateField containing an ImageButton works around the problem. Good enough for me, but still seems like a bug in either ASP .NET or FireFox.
The specific of the project is in using Enterpise Library for Server side validation and jQuery for client-side validation. So I have the next simple form for example:
<asp:Content ID="_mainContent" ContentPlaceHolderID="MainContent" runat="server">
<script src="../../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#aspnetForm").validate({
rules: {
"<%= _txtProjectName.UniqueID %>": {
required: true
}
}
});
});
</script>
<asp:TextBox ID="_txtProjectName" runat="server" CssClass="textBoxWithValidator_long" />
<entlib:PropertyProxyValidator id="_validatorProjectName" runat="server" ControlToValidate="_txtProjectName"
PropertyName="ProjectName" SourceTypeName="LabManagement.Project.Project" />
<asp:Button CssClass="cell_InlineElement" ID="_btnSave" runat="server" Text="Save" onclick="_btnSave_Click"
Width="50px" />
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
</asp:Content>
The problem is in the next: client-side validation worked correctly before I needed to implement some AJAX.NET feature. So I have to add to the page ScriptManager (the last two lines in the code). But after that the next situation appeared:
In InternetExplorer((7) - only in IE !!! - in Firefox everything works correctly) after clicking save button, if left the textbox ProjectName empty the client-side jquery validation appears but (!) the page submits to the server anyway.
Some notes:
If delete PropertyProxyValidator from the page - the client-side validation works correctly in IE but I need it for specific of the project.
It seems that the problem is in the function WebForm_OnSubmit() that is inserted to the form after PropertyProxyValidator adding. ( ... <form name="aspnetForm" method="post" action="Project.aspx?TransType=NewProject" onsubmit="javascript:return WebForm_OnSubmit();" ...>)
Could anyone help, please.
Just in case someone else comes across this issue, upgrade jQuery to 1.4.2. This will fix this bug.