Getting ClientID of control in RadGrid edit form - javascript

I have Telerik RadGrid with a custom edit form. In my edit form there is a RadDatePicker to which I have added a custom footer template containing a 'Today' button.
In the OnClick event of the button I call a Javascript function which takes the control ID to set the selected date.
However, because the control is inside the edit form there is no variable created for it and the compiler throws an error when I try getting the client ID.
The RadDatePicker is declared with:
<telerik:RadDatePicker ID="ControlName" runat="server" SelectedDate='<%# Bind("Field") %>'>
<Calendar ID="Calendar1" runat="server">
<FooterTemplate>
<div style="width: 100%; text-align: center; background-color: Gray;">
<input id="Button1" type="button" value="Today" class="button"
onclick="GoToToday('<%= ControlName.ClientID %>')" />
</div>
</FooterTemplate>
</Calendar>
</telerik:RadDatePicker>
The error I get is CS0103: The name 'ControlName' does not exist in the current context on the line referencing the ClientID.
Is there another way in which to get the ID to pass to the Javascript function?

I resorted to wrapping the Telerik RadGrid with a RadAjaxPanel and then in the server side code for the bind event I used the Ajax panel to set some Javascript variables:
RadAjaxPanel1.ResponseScripts.Add(string.Format("window['ControlNameId'] = '{0}';", ControlName.ClientID));
I then added a client side event handler to the DatePicker: ClientEvents-OnPopupOpening="AddButtonClickEvent"
The page then includes the following Javascript to bind the click event handler using jQuery:
function AddButtonClickEvent(sender, eventArgs) {
var cal = window['ControlNameId'];
$('#Button1').bind('click', function() {
GoToToday(cal);
});
}
And it all works as expected.

Try:
OnClick=<%# "GoToToday('" + ControlName.ClientID + "')" %>
You could also set the event handler in the page_load event.

Maybe ClientEvents-OnLoad event of controls on form will help? It's not very beautiful, but seems to work.
First make script on page
<script type="text/javascript">
var textBoxFromFormClientObject;
function onTextBoxLoad(sender) {
textBoxFromFormClientObject = sender;
}
</script>
Then in aspx, for control on edit form that you need to get on client,
add event like this
<rad:RadTextBox ID="txSomeTextBoxe" runat="server"
ClientEvents-OnLoad="onTextBoxLoad"/>
So, when you press edit or insert button on grid, and form will be shown - global variable in javascript will be set. And you can use it to manipulate textbox. Only problem is that you need event like this for each control on form, if you want to manipulate all controls =(

Related

how to disable button after first click in javascript

I am new to C#. I have a save button inside InsertItemTemplate. I have used the following code to disable the button after first click in java script but its not even working for the first click please help me.
<asp:ImageButton ID="imgbtnSave" runat="server" CommandName="Add" CausesValidation="true" OnClientClick="this.disabled='true';return true;" />
You are modifying the "disabled" property of the DOM object on the browser, but the button will do a post back to the server when it's clicked, so any change to the DOM will be lost.
On the function where you handle the command "Add" in your server code you must retrieve the button from the InsertItemTemplate and set its "Enabled" property to false, that will disable the control from the server side.
If you want to avoid multiple clicks while the page has not been reloaded then you need a client function to avoid this, something like this:
<asp:ImageButton ID="imgbtnSave" runat="server" CommandName="Add" CausesValidation="true" OnClientClick="return checkEnabled(this);" />
<!-- somewhere in your page -->
<script>
function checkEnabled(item)
{
if(item.disabled != 'true')
{
item.disabled = 'true';
return true;
}
return false;
}
</script>

Control is not declared. It may be inaccessible due to its protection level

I'm really stuck and I've tried all the other examples but nothing works. I'm fairly new to ASP.NET but learning fast!
I want to use the jQuery datepicker and I am inserting this script
<script>
$(document).ready(function () {
$(function () {
$("#" + '<%=txtDOB.ClientID%>').datepicker();
});
});
</script>
and my control on the aspx page is
<asp:TextBox ID="txtDOB" CssClass="form-control" runat="server"></asp:TextBox>
As soon as I close the the server tag %> the red line appears under the txtDOB control and says:
txtDOB is not declared. It may be inaccessible due to its protection level.
I've made the class public in the code behind but doesn't make any difference. I've also moved the script to the bottom of the page. If I change the asp textbox to a HTML input it works fine.
It will work fine with an ASP.NET TextBox as you have used. Therefore it must be to do with where your control is located. For example, if it's inside a Repeater or Grid, you will not be able to use its ID directly like that, since the framework will generate unique ids for each row at runtime.
Create a simple webform with no other controls on the page, and you will find it works just as you have it.
Try using static ID mode instead:
<script>
$(document).ready(function () {
$("#txtDOB").datepicker();
});
</script>
It makes the client script easier (especially when you move it to an external .js file to take advantage of caching), and is an easy change to the ASP control:
<asp:TextBox ID="txtDOB" CssClass="form-control" runat="server" ClientIDMode="Static"/>
You could use a different type of jQuery selector to select for that ID as follows:
<script>
$(document).ready(function () {
$("input[id$=_txtDOB]").datepicker();
});
</script>
That selector will account for the text that is being appended to the beginning of your ID due to the use of your CreateUserWizard control. It is cleaner than the way you are currently doing it, and you can use your original HTML.
<asp:TextBox ID="txtDOB" CssClass="form-control" runat="server"></asp:TextBox>

How can I refer to an ImageButton in jquery?

I have an html page.
There is a div in the body of the html page where I added some buttons and images.
<div id="div_one">
<button id="button_one">
<asp:Image id="image_button_one" ImageUrl=".." runat="server">
</button>
</div>
Up this div there is a form where I put inside an:
<form..>
<asp:ImageButton id="id_one" runtat="server" ImageUrl=".." visible="false">.
</form>
The buttons have a jquery/javascript associated.
When I click on the button "button_one" for example, there are some css that modify the page and nothing else.
The point is that: when jquery is executed ($("#button_one").click(){..}) I want to visualize the ImageButton and eventually, if there is a click on that, change the page.
Is possible to refer to that ImageButton to visualize it and use it if necessary?How?
First of all make its ClientIDMode Static :
<form..>
<asp:ImageButton id="id_one" runtat="server" ClientIDMode="Static" ImageUrl=".." visible="false">.
</form>
JQUERY:
$("#id_one").click(function(){
// do something here
})
For Visualizing it:
$("#id_one").show();
UPDATED:
In Visible = "false" case control is not rendered on Client Side so it's not accessible via client side script, instead of setting visible to do set css property like this:
<asp:ImageButton id="id_one" style="display:none;" runtat="server" ImageUrl=".."
visible="true">

Javascript not being called after an updatepanel textbox is cleared by code behind

I a web page that creates a note in a text area, On first time page load everything works fine. Meaning it goes and does a post back and writes to a database. Now , without reloading the page, on a second try if i change a drop down value and try to write to database it will not write a duplicate entry based on my code which is fine and i will clear out the note created in the text area (which is in an update panel) but for the next consecutive time if i change the drop down value, a java script that actually creates a note in the text area will not get fired and simply the text area is blank. Any help is appreciated.
<asp:UpdatePanel>
<asp:TextBox ID="txtGenVVOE" name= "txtGenVVOE" TextMode="MultiLine"
runat="server" style="font-size: 11px" rows="4" cols="44" Width="324px"></asp:TextBox></td></tr>
<tr> <td valign="top" align="center" width="50%">
<asp:Button ID="btnCopy"
class="btn" runat="server" onmouseover="this.className='btn btnhov'"
onmouseout="this.className='btn'" style="background: silvergradient" Text="COPY"
OnClientClick="ClipBoard();return false;"
ToolTip="Copy Text to ClipBoard" /> /td></tr> <end update Panel>
I have a .js script to create the note called validate() which validates the fields before creating the note
function validate() {
create_note() // which creates a note based on all the fields on the form.
}
So, as i have mentioned, this function validate is on button_click OnClientClick event and does not get called when button is clicked without reloading the page. I need some help in understanding why the scripts gets called only once on load and not on subsequent time after an postback is done to an update panel. Thanks in advance.
You will want to re-register the script in the code behind using ClientScript.RegisterStartUpScript (http://msdn.microsoft.com/en-us/library/z9h4dk8y.aspx)
In the code that causes the postback you would want to do something like this:
Dim script as string = "<script type=""text/javascript"">validate();</script>"
ClientScript.RegisterStartupScript(me,me.gettype(),"NameYourScript",script,false)
If RegisterStartupScript doesn't hit try RegisterClientScriptBlock (http://msdn.microsoft.com/en-us/library/btf44dc9.aspx )
I can't remember which one gives me trouble when it comes to update panels.

best way to move items between ListBoxes in ASP.NET using javascript, then access results on server side

I am having a lot of trouble with a seemingly simple thing.
In an ASP.NET webform I have two ListBoxes, with Add and Remove buttons in between.
The user can select items in one ListBox and using the buttons, swap them around.
I do this on the clientside using javascript.
I then also have a SAVE button, which I want to process on the server side when the user is happy with their list.
Problems : First I was getting the following problem when I clicked SAVE :
*
Invalid postback or callback argument. Event validation is enabled using in configuration or <%# Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.
*
I read that one of the methods to get around this was to put my ListBoxes into an UpdatePanel, which I did, and I am getting further.
However, now the event handler for the button's Click event is not being run if the user has used the clientside javascript to alter the contents of the Listboxes. If the user has not altered the contents of the listboxes, the handler does execute.
What is happening?
Is my approach basically flawed and there might be a much better approach to this problem?
thanks for any help!
Here's the ASPX code :
<table>
<tr>
<td>
<asp:ListBox ID="fromListBox" runat="server" SelectionMode="Multiple" Rows="8" AutoPostBack="false"
DataSourceID="SqlDataSource1" DataTextField="FullName" DataValueField="UserId" CssClass="teamListBox">
</asp:ListBox>
</td>
<td>
<input id="btnAdd" type="button" value="Add >" /><br/>
<br/>
<input id="btnRemove" type="button" value="< Remove" /><br/>
<br/>
</td>
<td>
<asp:ListBox ID="toListBox" runat="server" SelectionMode="Multiple" Rows="8" AutoPostBack="false"
CssClass="teamListBox" DataSourceID="SqlDataSource2" DataTextField="FullName"
DataValueField="UserId" >
</asp:ListBox>
</td>
</tr>
</table>
Heres the javascript, using jquery....this works fine so is not really the problem :
$(document).ready(function () {
$("#btnAdd").click(function () {
$("#fromListBox option:selected").appendTo("#toListBox");
});
$("#btnRemove").click(function () {
$("#toListBox option:selected").appendTo("#fromListBox");
});
});
Just Go to your web config file in your application and Add enableEventValidation="false" in pages section.
The clean way would to be to use ClientScriptManager.RegisterForEventValidation Method.
Have also a look here.
You have to register the server control ID with all the possible values that can be posted by JavaScript by that control in Render Event of the page, for exampe:
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
ClientScript.RegisterForEventValidation("fromListBox", "English");
ClientScript.RegisterForEventValidation("fromListBox", "Tamil");
ClientScript.RegisterForEventValidation("fromListBox", "Hindi");
ClientScript.RegisterForEventValidation("toListBox", "English");
ClientScript.RegisterForEventValidation("toListBox", "Tamil");
ClientScript.RegisterForEventValidation("toListBox", "Hindi");
base.Render(writer);
}
I think I had the same problem a while ago. I solved it by assigning the values of my listbox to a hidden text field and submitting the page all using javascript.
On the server side, I read the value of that hiddent textfield and parsed it.
It was an ugly client/server code, but it worked for me.

Categories

Resources