Is there any way to pass parameter to telerik similar to window.showModalDialog
The way we call the window.showModalDialog:
window.showModalDialog(pageName, MyArgs, 'status:no;dialogHide=true;help:no')
MyArgs is the parameter we are passing to the popup
Try likes this ,
<script type="text/javascript">
function openRadWin(MyArgs) {
radopen("yourPageName.aspx?Parameter=" + MyArgs , "RadWindow1");
}
</script>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true"
VisibleStatusbar="false">
<Windows>
<telerik:RadWindow ID="RadWindow1" runat="server" ShowContentDuringLoad="false" Width="400px"
Height="400px" Title="Telerik RadWindow" Behaviors="Default">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
And , at the Page_Load of yourPageName.aspx , get your passed parameter value using Request.QueryString["Parameter"] .
This help article from Telerik shows a way to do it: http://www.telerik.com/help/aspnet-ajax/window-programming-using-radwindow-as-dialog.html. It uses a JavaScript object to put the needed data in a custom field in the control's object, which is then accessed by the content page. Of course, you could, alternatively, use a session/cache object on the server.
This demo is also similar: http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandwindow/defaultcs.aspx?product=window. Note how parameters are added from the code-behind to the JS function the links execute.
On passing more parameters to radopen() - see this help article: http://www.telerik.com/help/aspnet-ajax/window-programming-opening.html. Then you can use the control's client-side API: http://www.telerik.com/help/aspnet-ajax/window-programming-radwindow-methods.html.
You can make it modal with the set_modal() method, or through its Modal server property: http://demos.telerik.com/aspnet-ajax/window/examples/modalpopup/defaultcs.aspx.
Related
I use asp:AutoCompleteExtender control in my page.
Here is control:
<asp:AutoCompleteExtender ID="txtStreet_AutoCompleteExtender" runat="server" DelimiterCharacters=""
Enabled="True" MinimumPrefixLength="2" ServiceMethod="GetCompletionList" ServicePath=""
TargetControlID="txtStreet">
</asp:AutoCompleteExtender>
I also have javascript function named sizeCalc(autoCompleteHeight) the function has parameter named autoCompleteHeight that get height of the autoComplete popup.
My question is how can fire sizeCalc function when autoComplete popup appears and pass the height of the autoComplete popup window?
here it's getting fired for a MinimumPrefixLength so we're gonna check based on that.
This is using jQuery assuming it's a normal textbox or you'll need to give your server control a clientID attribute.
$('#txtStreet').keyup(function() {
if(this.value.length > 2)
{
//your code
}
});
I am developing an application in which I have a asp.net form with a lot of textboxes.I need to use the same JavaScript function for all the textboxes to validate whether it contains any non alphabetic character in it. How can I use the same method for all the textboxes? I am stuck at how could I pass the id of the textbox to the JavaScript function.
<script type="text/javascript" language="JavaScript">
function CheckAlphabet(textboxId)
{
if (!document.getElementById('<%=textboxId.ClientId %>').value.match("/^[a-zA-Z]+/"))
return false;
}
</script>
asp.net code part is like this....
<asp:TextBox CssClass="select" ID="TxtEmpFirstname" onkeydown="CheckAlphabet(TxtEmpFirstname)"
runat="server" MaxLength="100"></asp:TextBox>
The Javascript code gave an error. Please help with passing the id of the asp.net textbox. I need to use the same Javascript function for many textboxes to validate for non alphabet characters in the textbox. Please help.
Right approach would be carefully look at code and see what runs on server and what runs in the browser (i.e. print the code and mark in 2 colors)...
You onkeydown="CheckAlphabet(TxtEmpFirstname)" is mix of server side and client side intentions: you should construct client ID with server side code instead of TxtEmpFirstname and remove it from the function itself.
onkeydown="CheckAlphabet('<%=textboxId.ClientId %>')"
Try this:
function CheckAlphabet(textboxId)
{
if (!textboxId.value.match("/^[a-zA-Z]+/"))
return false;
}
<asp:TextBox CssClass="select" ID="TxtEmpFirstname" onkeydown="javascript:CheckAlphabet(this)" runat="server" MaxLength="100"></asp:TextBox>
You're on the right track. Try something like this:
<script type="text/javascript" language="JavaScript">
function CheckAlphabet(textboxId){
if (!document.getElementById(textboxId).value.match("/^[a-zA-Z]+/")) return false;
}
</script>
<asp:TextBox CssClass="select" ID="TxtEmpFirstname" onkeydown='CheckAlphabet("<%=TxtEmpFirstname.ClientId %>")' runat="server" MaxLength="100"></asp:TextBox>
Notice that the client-side script only references the contents of the variable that is passed to it. When the TextBox is rendered to the page, the inline tag (<%=...%>) will be converted into the client-side ID of the input field.
Also take note of the quote usage. When you put an inline server-side command in the property of a server-side tag, you have to wrap the property with single quotes and then use double quotes to represent literal strings in what will be the final output.
use this:
function CheckAlphabet(textboxId)
{
if (!document.getElementById(textboxId).value.match("/^[a-zA-Z]+/"))
return false;
}
<asp:TextBox CssClass="select" ID="TxtEmpFirstname" onkeydown="CheckAlphabet(this.value)" runat="server" MaxLength="100"></asp:TextBox>
javascript code will be complained after server side codes compiled
i m working on simple asp.net and in that i am using validators.
my situation is like that i have used reaquired field validator its working fine.
and after that if i ented data and fired insert query then data is inserted and sucessful message is displyed on the lable. but agin if i clik on submit button with empty fields then validator works but the lable of successful message does not disapper. how to hide that lable.
You need to use javascript to hide the success message, here is a sample
<script type="text/javascript">
function hide() {
document.getElementById('<%=lblSuccess.ClientID %>').style.display = 'none';
return false;
}
</script>
<asp:Label ID="lblSuccess" runat="server" Text="Success"></asp:Label>
..your form code
<asp:Button ID="btnOk" runat="server" Text="OK" OnClientClick="hide()" ValidationGroup="ValidateForm" />
Why javascript, the form doesn't get posted because validators don't let the form to be posted if the conditions aren't met, so you are left to hide the message dynamically with javascript
<script type="text/javascript">
function Hide() {
document.getElementById("Lable1").style.display = 'none';
return false;
}
</script>
<asp:Button ID="Button1" OnClientClick="Hide()" runat="server" onclick="Button1_Click" Text="Button"/>
and use
if (Page.IsValid){}
on clik event.
Show us some code of what you're up to and we can tell you more precisely where you are going wrong. In a nutshell though the visibility of that message is going to be persisted through a postback so you have to explicitly tell it to not be visible if validation has failed.
Set the label to visable=false and on save set the text value if required and change visible =true ?
On form load, do something like this:
TheValidMessageLabel.Visible = Page.IsValid;
You are probably just setting the visible state to true when it's valid and never setting it to false again.
Set your success label visibility in page load to false.
And only if operation is successfully set that label visibility to true.
cheers
Simply I am trying to pass the client Id of one textBox 'txtPersonId' for the client-click event so that I can traverse to that textBox control and pass its jQuery wrapper to the loadePerson() function.
This is how I decalre it in the aspx mark-up:
<asp:Button ID="btnSearch" runat="server" Text="ARA" OnClientClick="loadPerson(jQuery('#<%=txtPersonId.ClientID %>'))"/>
But when I render it, the
<%=txtPersonId.ClientID %>
place holder stays as it is and it is not replaced with the rendered control's client Id.
Any idea why this happens and how should I overcome that?
When I've had issues like this I've resorted to wrapping the entire expression in the brackets and building the result as a string. I assume that it's because the parser doesn't recognize the render block syntax embedded inside the string property.
<asp:Button ID="btnSearch" runat="server" Text="ARA"
OnClientClick='<%= "loadPerson(jQuery(\"#" + txtPersonId.ClientID + "\"))" %>' />
I've long since moved on to keeping my javascript completely separate from my mark up, so I may be a little fuzzy on the exact details. If you wanted to separate your javascript from your mark up you could either add the handler with an explicit or relative DOM reference in a script block. Using the "ends with" selector matching on the id removes the need to find the explicit id, though you could also do that -- the example below shows both styles.
<script type="text/javascript">
$(function() {
$('#' + '<%= btnSearch.ClientID %>').click( function() {
loadPerson( $('input[id$=txtPersonId]') );
});
});
</script>
I don't know what it does your LoadPerson,but if you want write a function for your click event in Jquery you can make something like:
'#'+ '<%=txtPersonId.ClientID %>' to address your txtbox ID you can do the samething for your button $('#' + '<%=btnSearch.ClientID%>').click(function(){//click event process});
i have a series of rows that are generated using an asp:repeater:
<asp:repeater ID="itemsRepeater"
OnItemDataBound="itemsRepeater_ItemDataBound"
runat="Server">
<itemtemplate>
<tr>
<td>
<asp:HyperLink ID="linkView" runat="server"
Text="<%# GetItemText((Item)Container.DataItem) %>"
NavigateUrl="<%# GetViewItemUrl((Item)Container.DataItem) %>" />
</td>
<td>
<asp:HyperLink ID="linkDelete" runat="server"
Text="Delete"
NavigateUrl="<%# GetDeleteUrl((ActionItem)Container.DataItem) %>" />
</td>
</tr>
</itemtemplate>
</asp:repeater>
The repeater creates an HTML table, with each row containing a link to an item and (what is essentially) a "Delete" link. The above simplified example code generates HTML similar to:
<TR>
<TD>
<A href="ViewItem.aspx?ItemGuid={19a149db-5675-4eee-835d-3d78372ca6f9}">
AllisonAngle_SoccerGirl001.jpg
</A>
</TD>
<TD>
Delete
</TD>
</TR>
Now that all works, but i want to convert the "Delete" to client side. i want to be able click the link and it will, on the client javascript:
prompt an alert "Are you sure..."
have javascript issue server-hit to actually delete the item they want
remove the item from the client DOM tree
So there are four problems to be solved:
How to hook up javascript to the client-side click of the Delete link.
How to know what item the user clicked Delete
Prevent a post-back
Delete the row that the user clicked
That is my question.
From here on you will find my rambling attempts to solve it. Don't take anything below as relating in any way to any possible accepted solution. Just because i posted code below, doesn't mean any of it is useful. And it doesn't mean i'm anywhere within spitting distance of the best solution. And because i can't make anything below work - it must have gone down the wrong road.
My Attempts
Wiring Up Javascript
The first task is to convert the delete link HTML from something such as:
<A href="DeleteItem.aspx?ItemGuid={19a149db-5675-4eee-835d-3d78372ca6f9}">
Delete
</A>
into something more javascripty:
<A href="#"
onclick="DeleteItem('DeleteItem.aspx?ItemGuid={19a149db-5675-4eee-835d-3d78372ca6f9}')">
Delete
</A>
and the add the script:
<script type="text/javascript">
//<![CDATA[
function DeleteItem(deleteUrl)
{
//Ask the user if they really want to
if (!confirm("Are you sure you want to delete INSERT NAME HERE?"))
{
return false;
}
//Call returns false if the server returned anything other than OK
if (!DoAjaxHit(deleteUrl)
{
return false;
}
//Remove the table row from the browser
var tableRow = document.getElementById("TODO-WHAT ID");
if (row != null)
{
//TODO: how to delete the tableRow from the DOM tree?
//document.Delete(tableRow) ?
}
//return false to prevent a postback
return false;
}
//]]>
</script>
What combination of ASP code can be used to create the above? i hear that asp:LinkButton has an OnClientClick event, where you can wire up a javascript function:
<asp:LinkButton ID="linkDelete" runat="server"
Text="Delete"
OnClientClick="DeleteItem(<%# GetDeleteUrl((ActionItem)Container.DataItem) %>);"/>
Problem is that the rendered HTML is literally containing:
<a onclick="DeleteItem(<%# GetDeleteUrl((ActionItem)Container.DataItem)) %>);" ...>
Delete
</a>
If i change the client click event handler to:
OnClientClick="DeleteItem('todo - figure this out');"/>
it works - as well as "todo - figure this out" can work.
Preventing Postbacks
The dummied down above javascript call actually happens (i can see my alert), but there's the next problem: Returning false from the javascript function doesn't prevent a postback. In fact, i can see that the href on the generated html code isn't "#", but rather
javascript:__doPostBack('ctl0....
i tried changing the ASPX code to include the OnClick handler myself:
OnClick="#"
OnClientClick="DeleteItem('todo - figure this out');"
But the compiler thinks the pound side is a pragma, and whines:
Preprocessor directives must appear as
the first non-whitespace character on
a line
Table Row Identity
The table rows don't have an ID, they're generated by the asp:repeater.
How can the javascript function know what triggered the click event? The javascript needs to be able to find the element, and remove it from the tree.
Note: i would of course prefer fade+collapse animation.
Normally you get an element by using
var tr = document.getElementById("the table row's id");
But the table rows don't have an easily knowable ID. Since there are multiple rows, the server generates the ID as it builds the table. i realize some solution is going to have to involve changing:
<TR>
into
<TR runat="server">
so that there will be server generated identity for each table row, but how do i reference the generated name from javsscript?
Normally i would have thought that the scripting problem would be solved by using multiple paramters:
function DeleteItem(tableRowElement, deleteUrl)
{
//Do a web-hit of deleteUrl to delete the item
//remove tableRowElement DOM object from the document tree
}
But the problem is just pushed elsewhere: How do you populate tableRowElement and deleteUrl for the call to the javascript function?
Such a simple problem: convert a click from a postback to client-side.
The volume of problems involved is getting quite idiotic. Which seems to indicate that either
the idea solution is something completely different
there is no solution
References
Stackoverflow: How do I fade a row out before postback?
Stackoverflow: Javascript before asp:ButtonField click
asp.net: Accessing repeater elements from javascript.
Stackoverflow: How to access repeater generated elements?
jQuery can dig out the tags for you:
$("[id$=linkDelete]").click(function() {
DeleteItem(this.href);
});
That code says "find all the DOM elements whose ID ends with 'linkDelete' and wire up the following click event handler".
I would recommend against implementing the Delete function through links in this way. Delete links are a security risk.
Rather, it's better to require a post to that url instead. If you want to be doing ajax, I would strongly recommend using a javascript framework so you don't have to deal with the differences in how different browsers implement XmlHttpRequests.
For instance, in jQuery you could do it like this:
$.post('Delete.aspx',{itemGuid:'{19a149db-5675-4eee-835d-3d78372ca6f9}'},
function(data, textStatus) {
if (textStatus == 'success') {
$(this).parents('tr:eq(0)').fadeOut();
}
});
which would do both the ajax call and the fadeout effect you want.
You could then access the item guid in Delete.aspx from Request.Form["itemGuid"], and this wouldn't be vulnerable to link attacks.
Preventing Postbacks
The server is generating a postback wireup because you're using a server control. Use a plain <a> tag without a runat='server' directive.
Table Row Identity
I usually do this by databinding an ID column of some kind and putting this in the repeater template:
<tr id='<%#Eval("ID")%>'>
P.S. I hate to sound like a fanboy, but jQuery will make all of these things an order of magnitude easier. You should really consider it if you can. Otherwise, you're going to be in a world of hurt trying to implement these features in a consistent way across browsers.
P.P.S. If the Delete.aspx and similar urls are only going to be called from javascript, I would recommend using ashx http handlers instead. You can do all of the same server logic without the needless overhead of a full-blown page.
mine usually comes out looking like
<asp:LinkButton runat="server" OnClientClick='<%# Eval("ID", "DeleteItem(this, \"{0}\"); return false;") %>' Text="Delete" />
that will make html that looks like
<a id="blah_blah_ctl01" onclick='DeleteItem(this, "{19a149db-5675-4eee-835d-3d78372ca6f9}"); return false;'>Delete</a>
I include the "this" reference so that you can have access to the dom and delete the link...or it's parent or whatever. From there it's pretty straight forward to use jQuery to actually do the posting and DOM manipulation. The "return false;" disables the postback.
The other answerers found various bits related to different aspects of the question. i managed to cobble together a complete solution. i've copy/pasted the relavent snippits here.
The first important change is the use of an asp:LinkButton which allows as OnClientClick event, which gives you direct access to the javascript OnClick event:
<asp:repeater ID="itemsRepeater"
OnItemDataBound="itemsRepeater_ItemDataBound"
runat="Server">
<itemtemplate>
<tr>
<td>
<asp:HyperLink ID="linkView" runat="server"
Text="<%# GetItemText((Item)Container.DataItem) %>"
NavigateUrl="<%# GetViewItemUrl((Item)Container.DataItem) %>" />
</td>
<td>
<asp:LinkButton ID="linkImpregnate" runat="server"
Text="Impregnate"
OnClientClick="<%# GetImpregnateUrl((Item)Container.DataItem) %>" />
</td>
</tr>
</itemtemplate>
</asp:repeater>
The code-behind manually builds presentation code (yay for separation of controller and view!) that contains a javascript call.
protected string GetNodeAcknowledgementClientClick(Item item)
{
if (!(item is HotGirl))
return ""; //this shouldn't be called for non-acknowledgements, but i won't fail
HotGirl girl = (HotGirl)item;
String szOnClientClick =
"return ImpregnateGirl(this, "+
Toolkit.QuotedStr(girl.GirlGUID.ToString()) + ", "+
Toolkit.QuotedStr(GetItemName(item))+");";
return szOnClientClick;
}
And finally in the aspx, i find a random spot to mash in some javascript:
<script type="text/javascript" src="Javascript/jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
function DeleteItem(sender, girlGuid, girlName)
{
if (!confirm("Are you sure you want to impregnate "+girlName+"?"))
{
return false;
}
$.post(
'ImpregnateGirl.aspx?GirlGUID='+nodeGuid,
function(data, textStatus) {
if (textStatus == 'success')
{
$(sender).parents('tr:eq(0)').hide();
}
else
{
return false;
}
}
);
//return false to suppress the postback
return false;
}
//]]>
</script>
i would have made the jQuery do a post, as a security measure as guy suggested, but jQuery would give an error, rather than posting. Rather than care i chose to not care.