Develop Reference

apply specific css element

I am using a Telerik rad org chart. Basically I want to apply certain CSS style based on a condition.
I have figured out how to just override a css styles:
.rocToolbar_Metro .rocToolbarButton { background-color: #32b330 !important;}
But I can’t figure out how to do this conditionally via the code behind, so saying if condition == 1 then apply this:
.rocToolbar_Metro .rocToolbarButton { background-color: #32b330 !important;}
Else apply this:
.rocToolbar_Metro .rocToolbarButton { background-color: #25a0da !important;}
I am planning to do this within the NodeDataBound event. Any suggestions appreciated.
Thanks.

Add JS on your page which will be changing button color and next you can use ScriptManager to fire this javascript from nodedatabound event.
Add JS
function setColor1() {
$("#rocToolbarButton").css("background-color","#25a0da");
}
NodeDataBound event
protected void RadTreeView_OnNodeDataBound(object sender, RadTreeNodeEventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "setColor1", "setColor1();", true);
}

You can also add css property without needing to write new classes to override the actual one
$(document).ready(function(){
var condition = 1;
if(condition == 1){
$('.rocToolbarButton').css('background-color', '#32b330;');
}
else{
$('.rocToolbarButton').css('background-color', '#25a0da;');
}
});
This works as follows:
$('cssSelector').css('property','value');

How to make ImageButton not clickable

I have a number of ImageButtons within a repeater, depending on each record some of these images will be clickable and others, I have disabled the button to stop postback.
I have now changed the opacity of each image so that unless you are hovering on that imagebutton it will be 0.6. The trouble is, for those that I have disabled, obviously I cannot alter the opacity on/off hover.
Currently I am doing this:
if (vessel.IsRegistered)
{
imagebuttonRegistration.ImageUrl = ("../Images/Icons/registrationApproved.gif");
imagebuttonRegistration.CommandArgument = null;
DisableImageButton(imagebuttonRegistration);
imagebuttonRegistration.ToolTip = GetLocalResourceObject("imageButRegistrationRegisteredText").ToString();
}
public static void DisableImageButton(ImageButton imagebutton)
{
imagebutton.Attributes.Remove("href");
imagebutton.Attributes.Add("disabled","disabled");
}
But as disabling the button is now causing me problems, how might I just stop the button being clickable/no postback but allow the other attributes to be used.

Different way using Css:
In your css file add:
.notclickable{
cursor:text;
}
And in DisableImageButton method add:
imagebutton.Attributes["class"] ="notclickable";

try this:
imagebutton.Attributes.Add("onclick","return false");
imagebutton.Style.Add("cursor","context-menu");

you can use CSS
.imagebutton:disabled {
opacity:0.7;
}
check this out:
http://www.w3schools.com/cssref/sel_disabled.asp

How to bind ASP TextBox's Text to its ToolTip?

I would like to the ToolTip always be the same as the ASP TextBox's Text. Of course I can write
AnyTextBox.Text = "any text";
AnyTextBox.ToolTip = "any text";
but I do not want to duplicate hundreds of assignment statements.
I also could write change event handlers for the Text property, but I do not want to write dozens of event handlers just for this (if there is a more elegant solution)
Is there? Something like this:
<asp:TextBox ID="AnyTextBox" runat="server" ToolTip="binding magic goes here, but how?">
Thx in advance

You could write your own custom control which inherits from TextBox? I used the Text property to set the tooltip, but you can do it the other way around if you want.
Control:
public class TooltipTextBox : TextBox {
public new string Text {
get { return base.Text; }
set
{
base.Text = value;
this.ToolTip = value;
}
}
}
Markup:
<my:TooltipTextBox ID="AnyTextBox" runat="server" Text="binding magic goes here">

As far as i know there is no such automatism. For what it's worth, maybe you can use PreRender:
protected void Page_PreRender(Object sender, EventArgs e)
{
var allTextControlsWithTooltips = new List<WebControl>();
var stack = new Stack<Control>(this.Controls.Cast<Control>());
while (stack.Count > 0)
{
Control currentControl = stack.Pop();
if (currentControl is WebControl && currentControl is ITextControl)
allTextControlsWithTooltips.Add((WebControl)currentControl);
foreach (Control control in currentControl.Controls)
stack.Push(control);
}
foreach (var txt in allTextControlsWithTooltips)
txt.ToolTip = ((ITextControl)txt).Text;
}
You could also use a UserControl which handles this event, then you just need to put it on all of the pages that should behave in this way. Or you could let all pages inherit from one base page.

I think using a JavaScript event handler will be your easiest solution. You don't need to write hundreds of event handlers though. Just write one and then use that same event handler for all your text boxes!
<asp:TextBox ID="AnyTextBox" runat="server" onchange="setTooltip(this)" />
And then the script would be
function setTooltip(textbox) {
textbox.title = textbox.value;
}
That's it! Set that onchange event for all your Textboxes who you want to have this tooltip behavior.

You can do this in the TextChanged event of the textbox :
<asp:TextBox ID="AnyTextBox" runat="server" TextChanged="AnyTextBoxTextChanged">
protected void AnyTextBoxTextChanged(object sender, EventArgs e)
{
this.AnyTextBox.Tooltip = this.AnyTextBox.Text;
}

That depends if you are looking for "live update" of tooltip = i.e. do you want to change the tooltip when the user changes the text on website? Then use "onchange" event of the input and JS function that would change its "title" attribute on each event call.
Or you want to ease of your server-side work and do not want to specify tooltip and text for each item, then go with custom control way (and I recommend RGraham code).
Or match both methods and use custom control that would also provide JS "refresh" code :-)

Try using jquery
$(function () {
var maybe = true;
var text = $('.myTextBox').val();
if (maybe) {
$('.myTextBox').attr('title', text);
}
});

How to set focus at the end of textbox while typing?

I have a textbox with a live search function. It is working all good except one problem. If I type any characters on it, it just loses its focus. If I set textbox.Focus(), the cursor goes at the beginning of the textbox.
I have tried most of solutions on the internet. Please check my codes below.
asp:TextBox ID="searchCompany" runat="server" Text="" CssClass="searchCompany" AutoPostBack="true" Width="190px" OnTextChanged="searchCompany_TextChanged"></asp:TextBox>
In page_Load
protected void Page_Load(object sender, EventArgs e)
{
//ScriptManager1.RegisterAsyncPostBackControl(Menu1);
menuDisplay();
searchCompany.Attributes.Add("onkeyup", "setTimeout('__doPostBack(\\'" + searchCompany.UniqueID + "\\',\\'\\')', 0);");
//searchCompany.Attributes.Add("onfocus", "javascript:setSelectionRange('" + "','')");
//searchCompany.Focus();
}
and I have tried javascript as below
<script type="text/javascript">
function setSelectionRange() {
var inputField = document.getElementById('searchCompany');
if (inputField != null && inputField.value.length > 0) {
if (inputField.createTextRange) {
var FieldRange = inputField.createTextRange();
FieldRange.moveStart('character',inputField.value.length);
FieldRange.collapse();
FieldRange.select();
}
}
}
</script>
I have tried to put codes on a method "searchCompany_TextChanged" which is calling if user type any characters on a textbox everytime however it is not working as well.
I saw other solutions with using Textbox.Select() but System.Windows.Control is not working in asp.net i guess.
Any idea??

There's a very simple trick that's worked for me. Basically, set the text value of the of input to itself to its own text value, and that will move the cursor to the end of the text. Then just focus it. This code uses jQuery to demonstrate that, but you should be able to do that in straight JS as well.
HTML
<input type="text" id="focusText"></input>
<button id="focusButton">Set Focus</button>
JavaScript
$("#focusButton").click(function() {
var text = $("#focusText").val();
$("#focusText").val(text).focus();
})
Here's a non jQuery example of the JavaScript, HTML should be the same:
document.getElementById("focusButton").onclick = function() {
var inputElement = document.getElementById("focusText");
var text = inputElement.value;
inputElement.value = text;
inputElement.focus();
}
Here's a fiddle demonstrating the non-jQuery version of the code: http://jsfiddle.net/C3gCa/

Dynamically changing css style in c#?

I have some link buttons in which I am dynamically adding a style to it. I am doing the following in a method:
LinkButton lb = new LinkButton();
lb.Style["font-weight"] = "bold";
When the another link is clicked, it should unbold the link button that is bold and bold the currently clicked one, so in the method that is doing this, I have tried:
lb.Style["font-weight"] = "none";
The above does not work though, the previously selected link stays bold.
I just realized the possible problem. I am creating multiple links and what it looks like is that since all the links are named lb, it never removes the bold. I am trying to think of a way for it to remember the previously selected link and to only unbold that one.

Can I suggest an alternative approach?
Set a CSS Style:
.selected { font-style: bold; }
When a link is clicked set that link's CSS class to "selected" and the others to "";
EDIT: To accommodate for existing Css Class
const string MY_CLASS = "links";
lb1.CssClass = MY_CLASS + " selected"; // selected
lb.CssClass = MY_CLASS; // not selected
You can quickly get into trouble when defining inline styles, in that they're difficult to overwrite.
EDIT 2:
Something like this code should work. You may have to loop through all the LinkButtons in the list, but I don't think so. I'd just turn off ViewState on the LinkButtons.
// container for links. so you can reference them
// outside of the creation method if you wish. I'd probably call this method in the
// Page_Init Event.
List<LinkButton> listOfLinks = new List<LinkButton>();
const string MY_LB_CLASS = "linkButton"; // generic lb class
private void createSomeLinks() {
for (int i = 0; i < 10; i++) {
// create 10 links.
LinkButton lb = new LinkButton()
{
ID = "lb" + i,
CssClass = MY_LB_CLASS
};
lb.Click += new EventHandler(lb_Click); // Add the click event
}
// You can bind the List of LinkButtons here, or do something with them.
}
void lb_Click(Object sender, EventArgs e) {
LinkButton lb = sender as LinkButton; // cast the sender as LinkButton
if (lb != null) {
// Make the link you clicked selected.
lb.CssClass = MY_LB_CLASS + " selected";
}
}

Try lb.Style.Remove("font-weight"). I didn't test it, but you can try it out.
Alternatively, have you tried settings the Font.Bold property?
lb.Font.Bold = true;

Try ListBox1.Attributes.Add("style","font-weight:bold");
and ListBox1.Attributes.Add("style","font-weight:normal");
or even better is
// css
.active {font-weight:bold}
.notactive {font-weight:normal}
//c#
ListBox1.CssClass = "active";
ListBox1.CssClass = "notactive ";

you could try lb.Style.Remove("font-weight");

set the font bold in the click event of the link button and set the enable view state property to false in the click event itself which will reset the link to the normal foam in the other click