Develop Reference

How to display default text for asp.net textboxes [duplicate]

This question already has answers here:
How do I put hint in a asp:textbox
(5 answers)
Closed 9 years ago.
How do I set default text for asp textbox during page load and clear them when focused on..
I know to do it in html textbox using javascript and jquery..But how to do it in asp.net.. Any help please..
I wrote
<asp:TextBox ID="Rloginemail" runat="server" Width="100%" Height="25px"
BackColor="#ECE8D0" BorderStyle="None" ForeColor="#482B1B"
Text="E-MAIL" >E-MAIL</asp:TextBox>
In the above code you can see text=email.. if I use this default text is shown but not cleared on focus..

HTML 5
You can use placeholder html5 attribute
<input type="text" placeholder="search" />
jQuery Placeholder Plugin
If your browser doesnt support then use this jquery placeholder
$('input, textarea').placeholder()

You have mentioned that you can do it for html textbox using javascript or jQuery, but don't know how to do it with Asp.Net textbox. right? Is it just because id of your asp.net textbox changes dynamically and you are not able to access it?. If yes, then you can access the id using following code:
document.getElementById("<%=textbox.ClientID%>")
You can use above code in the script written in the aspx code to get asp.net textbox and then you can use javascript/jQuery as you know how to do it.

In asp.net you can do it by using ajax control toolkit. we have a TextboxExtender there which can do it besides other things as below
<ajaxToolkit:TextBoxWatermarkExtender ID="TBE" runat="server"
TargetControlID="youTextBoxID"
WatermarkText="YOUR DEFAULT TEXT"
WatermarkCssClass="yourPreferred css" />

We use Ajax Control Toolkit's Textbox Watermark extender for this:
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/TextBoxWatermark/TextBoxWatermark.aspx

$(document).ready(function () {
$(":input[data-watermark]").each(function () {
$(this).val($(this).attr("data-watermark"));
$(this).css("color", "#a8a8a8");
$(this).bind("focus", function () {
if ($(this).val() == $(this).attr("data-watermark")) $(this).val('');
$(this).css("color", "#000000");
});
$(this).bind("blur", function () {
if ($(this).val() == '') {
$(this).val($(this).attr("data-watermark"));
$(this).css("color", "#a8a8a8");
}
else {
$(this).css("color", "#000000");
}
});
});
});
style
<style>
.placeholder {
color: #a8a8a8;
}
::-webkit-input-placeholder {
color: #a8a8a8;
}
:-moz-placeholder {
color: #a8a8a8;
}
.home_textbox{width:155px; height:25px; border:1px solid #c9c5c1; border-radius:5px; position:relative; font-size:13px; color:#b5b0aa; font-family:"Myriad Pro"; padding:0 5px;}
textbox
<input type="text" name="TxtLogin" id="TxtLogin"
class="home_textbox" runat="server" tabindex="1" style="color:Black;" data-watermark="Username" />

Use OnFocus event and set Text property to empty string
Example:
<asp:TextBox ID="Rloginemail" runat="server" Width="100%" Height="25px" BackColor="#ECE8D0" BorderStyle="None" ForeColor="#482B1B" Text="E-MAIL" onfocus="if (this.value == 'E-MAIL') this.value = ''; ">E-MAIL</asp:TextBox>
Or, as mentioned in this answer - you can also use asp.net textbox property called placeholder:
<asp:TextBox ID="Rloginemail" runat="server" Width="100%" Height="25px"
BackColor="#ECE8D0" BorderStyle="None" ForeColor="#482B1B"
placeholder="E-MAIL" ></asp:TextBox>

Binding mouseover event to asp.net repeater

I have an asp.net repeater that displays a title and and image.
The title is very long , so I want to display the title again on mouse over.
I tried to implement a mouse over but I have the following problem.
My display looks like this :
Repeater Element 1 Repeater Element 2
Title 1 Title 2
Image 1 Image 2
Now on doing a mouse over on Element1 , my mouse over displays Title1.
On doing a mouseover on Element2 , my mouse over displays Title1 again ,and I would like it to
display Title2 ? Can anyone point me on how i can achieve this.
My code is below :
<asp:Repeater ID="rptMonitorSummary" runat="server" OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server" onmouseover="return showsamplepopup();" onmouseout="return hidesamplepopup();">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">
<%# Eval("Name").ToString().Length > 9 ? (Eval("Name") as string).Substring(0, 9) : Eval("Name")%>
</h5>
<div id="popup" style="position: absolute; width: 80px; height: auto; background-color: Lime;
border-bottom: solid 3px gray; display: none; border-right: solid 3px gray; display: none;">
<%#Eval("Name")%>
</div>
<div class="center">
<asp:Image Width="50px" ID="btnPerformanceImage" runat="server" Height="28px"></asp:Image>
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
The javascript functions are as follows :
function hidesamplepopup() {
document.getElementById('popup').style.display = 'none';
return false;
}
function showsamplepopup(e) {
e = (e) ? e : window.event;
var element = (e.target) ? e.target : e.srcElement;
var left = element.offsetLeft;
var top = element.offsetTop;
while (element = element.offsetParent) {
left += element.offsetLeft;
top += element.offsetTop;
}
document.getElementById('popup').style.display = 'block';
document.getElementById('popup').style.left = left;
document.getElementById('popup').style.top = top;
return false;
}

I do not know what is your requirement. It could have been a lot easier if you use jQuery tooltip.
This is just an alternative approach.
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$(document).tooltip();
});
</script>
<asp:Repeater ID="rptMonitorSummary" runat="server"
OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header" title="<%# Eval("Name").ToString() %>">
<%# Eval("Name").ToString().Length > 9 ?
(Eval("Name").ToString()).Substring(0, 9) : Eval("Name")%>
</h5>
<div class="center">
<asp:Image Width="50px" ID="btnPerformanceImage"
runat="server" Height="28px"></asp:Image>
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>

Notice that getElementById will return the first element with that ID. And you're using the same ID for your Div's.
You should either use a different ID for each item of the repeater (generating different ID's for each of them), or change your logic to fetch them by some other property. I highly recommend using jQuery as well.

I would change the way which you are binding the events to elements, as your sample code doesn't use jQuery I'll assume you don't want it :)
First things first, you'll want to add a class to the asp:panel so that there will be some way of identifying and selecting all the instances. Also you'll want to use classes for your popups not IDs as IDs should be unique on a page.
then you can do something like:
var elements = document.querySelectorAll('.thatClassYouAdded'),
i = 0, l = elements.length;
for(;i<l;i++)
{
elements[i].addEventListener('mouseover', function(e) {
var popup = this.querySelector('.popup');
//do some stuff to popup
});
}
It's also important to note that querySelector is not supported in legacy browsers (see https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector for more info and support table) and older IEs (pre 9) use attachEvent instead of addEventListener which you may need to write additional code to support

Read label value in code behind

Am using the below code to assign the label text using javascript. It's working well. But i can't able to read the label text in code behind. Please help me to fix this issue.
Javascript:
==========
var lbl_total = document.getElementById('<%= lbl_total.ClientID %>');
lbl_total.innerHTML = '500';
c# code behid :
===============
string total = lbl_total.Text; //It always return "";

client side changes for label will not get reflected in server side as its data is not posted to server. So the solution is to take an input hidden control and set its value with label's updated value. Below is the sample code:
<script type="text/javascript">
$(document).ready(function() {
var total = 0;
$('#Button1').click(function() {
total += 150;
$("span[id$=lbl_TotalCount]").html(total);
$("input:hidden[id$=MyHidden]").val(total);
});
});
</script>
html
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="button" />
<asp:Button ID="btn_saveForm" runat="server" Text="save" CssClass="btnForm" OnClick="btn_saveForm_Click" />
<asp:Label ID="lbl_TotalCount" Style="color: #00e4ff; font-family: Arial; font-weight: bold;
text-decoration: underline" runat="server" Text="0">
</asp:Label>
<asp:HiddenField ID="MyHidden" runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
full Article : Get label value in code behind whose text is changed via JavaScript/jQuery

Pass Expression Value to JavaScript function

I have this following code, here CssClass is of the String type.
<asp:Panel ID="Panel1" runat="server" title="<%# Title %>" class="<%# CssClass %>">
<asp:Panel ID="Panel2" runat="server" Style="padding-top: 20px; color: Red">
Invalid Credential
</asp:Panel>
<asp:Panel ID="Panel3" runat="server" Style="text-align: center; padding-top: 50px;">
<telerik:RadButton ID="LoginFaild" runat="server" Text="Ok" Font-Size="14px" Width="100px"
OnClientClicked='<%# "function(button, args){closeDialog(" + CssClass + ");}" %>' />
</asp:Panel>
Now I want to pass this String value to the JavaScript function closeDialog() which is:
var closeDialog = function (className) {
$("." + className).dialog("close");
}
When I am clicking on the button I am getting
loginError is not defined
in my Web Developer's Toolbar of Firefox.
How can I solve this problem?

Assuming that CssClass is set in c#, you do not need to specify the inline CssClass property in the close dialog constructor. Change your closeDialog function to:
var closeDialog = function () {
$("." + <%= CssClass %>).dialog("close");
}
Then your OnClientClicked event can be rewritten as:
OnClientClicked="function(button, args){ closeDialog(); };" or OnClientClicked="closeDialog();"
EDIT:
Script at the Top of the Page
var cssClass = '<%= CssClass %>';
Close Dialog Function
var closeDialog = function () {
$("." + cssClass).dialog("close");
}

programmatic creation of a multicolumn radcombobox

Anyone have a link to a code sample or can you provide a snippet to accomplish this task. I'm coming up blank on the Telerik site

I had to put something together a while ago and found snippets of code scattered throughout Telerik's site and blogs. So, I don't want to take "credit" for creating the below code... but here's what I'm using:
Add this to your css
.rcbHeader ul, .rcbFooter ul, .rcbItem ul, .rcbHovered ul, .rcbDisabled ul
{
width: 100%;
display: inline-block;
margin: 0;
padding: 0;
list-style-type: none;
}
.col1, .col2, .col3
{
float: left;
width: 100px;
margin: 0;
padding: 0 0px 0 0;
line-height: 14px;
}
If you want an "item counter" add this javascript function
function UpdateItemCountField(sender, args) {
//set the footer text
sender.get_dropDownElement().lastChild.innerHTML = "A total of " + sender.get_items().get_count() + " items";
}
Here's the code for the RadComboBox
<telerik:RadComboBox runat="server" ID="rcbInvoiceNumber" Height="190px" Width="350px"
MarkFirstMatch="true" EnableLoadOnDemand="true" HighlightTemplatedItems="true"
OnClientItemsRequested="UpdateItemCountField" OnItemDataBound="rcbInvoiceNumber_ItemDataBound"
OnItemsRequested="rcbInvoiceNumber_ItemsRequested" EmptyMessage="Enter Invoice Number"
ChangeTextOnKeyBoardNavigation="true" ValidationGroup="QuickPay">
<HeaderTemplate>
<ul>
<li class="col1">Invoice Number</li>
<li class="col2">PO Number</li>
<li class="col3">Invoice Total</li>
</ul>
</HeaderTemplate>
<ItemTemplate>
<ul>
<li class="col1">
<%# DataBinder.Eval(Container.DataItem, "InvoiceNumber") %></li>
<li class="col2">
<%# DataBinder.Eval(Container.DataItem, "PONumber")%></li>
<li class="col3">
<%# DataBinder.Eval(Container.DataItem, "TotalInvoice", "{0:C}")%></li>
</ul>
</ItemTemplate>
<FooterTemplate>
A total of
<asp:Literal runat="server" ID="RadComboItemsCount" />
items
</FooterTemplate>
</telerik:RadComboBox>
Finally, the code behind
protected void rcbInvoiceNumber_DataBound(object sender, EventArgs e)
{
//set the initial footer label
((Literal)rcbInvoiceNumber.Footer.FindControl("RadComboItemsCount")).Text = Convert.ToString(rcbInvoiceNumber.Items.Count);
}
protected void rcbInvoiceNumber_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
{
var invs = new VInvoicesCasesTotalCollection()
.Load();
rcbInvoiceNumber.DataSource = invs.ToDataTable();
rcbInvoiceNumber.DataBind();
}
protected void rcbInvoiceNumber_ItemDataBound(object sender, RadComboBoxItemEventArgs e)
{
//set the Text and Value property of every item
//here you can set any other properties like Enabled, ToolTip, Visible, etc.
e.Item.Text = ((DataRowView)e.Item.DataItem)["InvoiceNumber"].ToString();
e.Item.Value = ((DataRowView)e.Item.DataItem)["InvoiceID"].ToString();
}
It should be noted that I've added Telerik.Web.UI to my using statements.
Hopefully this at least helps steer you in the right direction.

I've seen the links on this page and went in search of the answer on their page, becasue I was sure I had seen it before.
The link to mentioned in the comment section of clk's post is indeed a demo, but if you want the basics and quite possibly the easiest documentation to look at it would be found here.
As you mention you are loading you data on the code behind, so what you could do is load the entities first, set the data source next, and then continue to follow the rest of my linked articles code in the page load.
Hope it helps even a little.