Can I bind a label control in the header of Devexpress?. The label control populates dynamically.
TU
Yes you can bind the label control to header of Devexpress by making use of Templates.
The format should be somewhat like the below:
<Template>
<Header>
//your definition of label goes here
</Header>
</Template>
Related
i have this form i need to build, but a user can have it laid out in different ways.
the layout of the form is kept in a xml file and will contain things like
<div class="holder">
<div>name</div>
<div>[Name]</div>
<div>Surname</div>
<div>[Surname]</div>
<div>Contact Numer</div>
<div>[ContactNumber]</div>
<div>Email</div>
<div>[Email]</div>
<div>[Submit]</div>
</div>
What i need to do is replace those [name]etc.. tags with asp.net controls and be able to read the content of those controls. i have hit a brick wall on this, can anybody help me please.
To create a new control at runtime, from code-behind:
Text Box
TextBox textBox = new TextBox
{
ID = "dynamicTextBox",
Text = "This is a new textbox"
};
[Container].Controls.Add(textBox);
You can do the sae for any other control.
I am using select2 on dropdownlist of asp.net. The code is as follows:
<script type="text/javascript" src="js/select2.min.js"></script>
<link type="text/css" rel="Stylesheet" href="css/select2.css" />
var v = /* get the select control */
v.select2();
The problem is, once select2() function is called, tab ordering stops working. Therefore, when on the dropdownlist tab key is pressed, focus do not move to the control having next highest tabindex but move seemingly randomly to some other control.
Commenting the line where the function is called solve this problem but I need the filtering. I have tried some of the other techniques of filtering discussed here but they are too complicated. Select2 is very simple and useful because all you have to do is include the JS and CSS files and call the function.
How can I solve this ordering problem? Alternatively, is there another filtering option as easy to use as select2 that would help me?
After a few hours of struggle, I have solved the problem. It turns out that the select2 AJAX control do destroy the tab order if the tab is pressed as soon as it gets focus, that is, when nothing is typed in it. It does not, however, destroy tab ordering if some text is typed.
The internal structure of select2's auto-generated HTML is like following:
<div class="select2-container">
<a class="select2-choice">
<span</span>
<abbr class="select2-search-choice-close" />
<div> <b></b> </div>
</a>
<div class="select2-drop select2-offscreen">
<div class="select2-search">
<input class="select2-input select2-focused" tabIndex=<somevalue> />
</div>
<ul class="select2-results></ul>
</div>
</div>
If some text is typed in the HTML select control, then tab ordering is working correctly, if no text is typed then tab order is destroyed. I have used document.activeElement in firebug to find focused control in both cases. In case of no text the anchor element has focus, and in case of text typed the HTML input element has focus.
As shown above, while select2.js correctly set tabIndex property of HTML input element, it does not of the anchor element.
Solution
Just add the following line at the position specified further below in select2.js:
this.container.find("a.select2-choice").attr("tabIndex", this.opts.element.attr("tabIndex"));
Add the line after:
this.opts.element.data("select2", this).hide().after(this.container);
this.container.data("select2", this);
this.dropdown = this.container.find(".select2-drop");
this.dropdown.css(evaluate(opts.dropdownCss));
this.dropdown.addClass(evaluate(opts.dropdownCssClass));
this.dropdown.data("select2", this);
this.results = results = this.container.find(resultsSelector);
this.search = search = this.container.find("input.select2-input");
and before:
search.attr("tabIndex", this.opts.element.attr("tabIndex"));
this.resultsPage = 0;
this.context = null;
// initialize the container
this.initContainer();
this.initContainerWidth();
installFilteredMouseMove(this.results);
this.dropdown.delegate(resultsSelector, "mousemove-filtered", this.bind(this.highlightUnderEvent));
installDebouncedScroll(80, this.results);
this.dropdown.delegate(resultsSelector, "scroll-debounced", this.bind(this.loadMoreIfNeeded));
So it becomes:
this.results = results = this.container.find(resultsSelector);
this.search = search = this.container.find("input.select2-input");
this.container.find("a.select2-choice").attr("tabIndex", this.opts.element.attr("tabIndex")); /* atif */
search.attr("tabIndex", this.opts.element.attr("tabIndex"));
this.resultsPage = 0;
this.context = null;
Make this change in select2.js. Obviously, you need to use the full js version, not the min version.
All you have to do is add one line, stated above. This would become line no#504 in VS2008 if done correctly.
I want to add tooltips to a form on my site. I am using the jQuery tools library. The tooltips show the content of the title attribute of an html input. Is there a way to make the asp.net textbox render out the title attribute in the html input it creates?
Since title is a global attribute, according to the W3C HTML language specifications, I would have expected a title property in the System.Web.UI.WebControls.WebControl.
However, Microsoft appears to have chosen a more 'appropriate' name for this property: Tooltip.
If you specify this property:
var label = new Label();
label.ToolTip = "tooltip";
label.Text = "text";
Controls.Add(label);
it will render:
<span title="tooltip">text</span>
which is just what you wanted.
Seeing that Tooltip is a property of the base WebControl, I assume that it will render as a title attribute for all WebControl classes.
You would do something like TextBox1.Attributes.Add("title", "Some title value");
Textbox.Attributes.Add("title","My text");
The .Attributes.Add("Attribute Name", "Attribute Value") lets you add most attributes to most controls, but always use the native property if available.
By far the easiest way is:
<asp:TextBox runat="server" title="My Title" />
Which renders
<input type="text" title="My Title" />
This also works with style etc, etc.
I want to programmatically show/hide a group of fields (label, textfield, checkbox) on Razor view (.cshtml), based on a model value. The model is access to the view.
Thanks
In your Razor View cshtml:
#if(Model.RevealSecretPlans)
{
<div>
Giant frikkin laser
</div>
}
This of course assumes RevealSecretPlans is a boolean
I have a 2 tabpanels in my tabcontainer and both the panel has their own header text.
I have put the tabcontainer inside a table.
Above the table (OR tabcontainer) I have a label and what I am trying to do is ... changing the label text as per tab selection ... code below:
if(tabcontainer.activetabindex == 0)
{
label1.text = tabpanel1.headertext;
}
else {label1.text = tabpanel2.headertext;}
But this is not working ... even if I select the panel2 my label displays the same text as panel1 header text ... it's not changing as I want.
Am I doing anything wrong? Please help.
Thanks,
Rahul
TabContainer changes active panel without postback, so your code doesn't fire.
You have to create javascript code and call it on tabchange in browser.