I have a treeview that I am creating dynamically from xml (via a web service) and I have it populating and formatting mostly the way I want. However, the one thing that I'm still having some difficulty with is being able to manipulate some of the items within each element of the treeview. Sepcifically, each of the image that I'm using to represent the various node levels. From the source it looks like it's just an image tag in an a tag, which in turn is within at td. However none of these have classes associated with them. Is there a standard way of manipulating spacing or formatting within each node of a treeview? Searching hasn't been very successful but maybe I'm not looking for the right thing...
Since you've noticed the hideous markup that some of the ASP.NET server controls produce, check out the CSS Friendly Control Adapters. Rather than writing out nested tables, the control adapters will render markup that is much easier to work with.
Here is a sample output from a TreeView control. The li elements have classes which you can use when styling their child elements.
Related
I have a requirement like for the drop down as shown. Could any one help me in achieving this.
Briefing:
On click of the button a pane should be opened which contains rows and columns containing text, on click of it appropriate action need to take place. The source can be dynamic too....
There are many techniques for acheiving this design. You could do it purely with html and css by having an image that looks like a dropdown popup an absolutely positioned div underneath. Or you could use the asp.net ajax control toolkit control called "PopupControl" that essentially abstracts all the html/css away allowing you to just specify a target panel. There are also various jquery plugins, here is one from abeatifulsite.
How can I implement a font-resize feature that also adjusts the text size of all ASP elements?
I'm part of a team that is working to implement an interactive course catalogue as a class project. The typical user for the site will be > 50, and one common request from surveys an interviews was to have a user-adjustable test size increase/decrease of not only the on-screen text, but the buttons, lists and other elements.
Another requirement for this class: everything has to be implemented in ASP.NET & C# 4.0.
According to the documentation, the object FontUnit controls the size and type style of ASP elements. We're going to be using a number of elements nested inside HTML divs, and would like some way for a single button click to implement a page-wide text size increase/decrease.
I tried
btnTextSize.Font.Size= FontUnit.Larger;
to test on a couple elements, but there was no change in size.
Try this:
http://www.white-hat-web-design.co.uk/blog/controlling-font-size-with-javascript/
It's javascript, but it may work for your needs.
I have a generic function to build rows of controls (each row comprising of sliders, radio buttons, reset buttons, text display) etc, and some functionality to change underlying data based on these
As I didn't want to write specific code for each row, I had code written by which I can detect the row on which there has been a mouseevent, and though the row access each individual control
The hierarchy used is titleWindow (part of popup)->skinnable container->HGroup->control
When I trace for a radiobutton, I get the path as follows Electric_Modify.TitleWindowSkin2620._TitleWindowSkin_Group1.contents.contentGroup.0.RadioButton2645
The '0' before the radioButton stands for the first Hgroup id->named as 0
I tried accessing the radio button as follows- 5th element in the HGroup
((this.contentGroup.getChildAt(row)as Group).getChildAt(4) as RadioButton).enabled=false;
and get a message "Cannot access a property or method of a null object reference" on this line. How should I navigate the hierarchy to reach the element?
You should be using getElementAt(...) and not getChildAt(...).
The get element functions represent a "higher level" element hierarchy which is needed to make skinning easier.
((this.getElementAt(row) as IVisualElementContainer).getElementAt(4) as RadioButton).enabled = false;
It should look something like that, but the exact hierarchy depends on what's in your app.
#drkstr
Thanks for your input... I thought of an alternate approach that worked for me...I mapped out the parent of the HGroup via
parent1=hgrp.parent; and then referenced these buttons as follows
((parent1.getChildAt(row)as Group).getChildAt(4) as RadioButton)
This works like a dream...I presume your suggestion would let me jump across the intermediate layers
#J_A_X/ #Constantiner: Thanks for the suggestion. I have no idea why we didn't think through and go down the DataGroup path. Prima facie seems simpler... we got to creating the UI controls in MXML laying out controls serially,and when it came to making it generic, we literally replicated the MXML approach in AS. Started off easy, till it caused problems like above. We will fix this to a better approach, when we upgrade versions. It works for now
I've been trying to create a special kind of fieldset. Which does all kind of fantastic things, but mainly collapse and maintain state. Also the two parts of the fieldset (in the legend, and in the rest) must be available to code behind (declaratively).
The code in the consuming page or control should look something like this:
<myTagPrefix:Fieldset>
<myTagPrefix:Legend>[controls here should be available in codebehind]</myTagPrefix:Legend>
<myTagPrefix:Content>[controls here should be available in codebehind]</myTagPrefix:Content>
</myTagPrefix:Fieldset>
Or
<myTagPrefix:Fieldset>
<Legend>[controls here should be available in codebehind]</Legend>
<Content>[controls here should be available in codebehind]</Content>
</myTagPrefix:Fieldset>
Which would produce more-or-less the following HTML (excluding the magic collapsing and state-maintaining code):
<fieldset>
<legend>[result of rendered legend controls]</legend>
[result of rendered legend controls]
</fieldset>
I've looked into a templated control, exposing template container via properties marked as 'TemplateContainer', which works nice, except for the fact that the code behind cannot access the controls in the template anymore.
I also looked into inheriting a container control like panel, and override the render methods for the begin- and end-tag, which is also nice, except for that it can contain only one control collection, while this fieldset control should have two (the controls in the legend and the controls in the rest fieldset). This could be overcome by exposing the text of the legend as a property of the fieldset, but to keep things complicated, text is not the only thing to be displayed in the legend. (for instance: images and buttons can be displayed too).
This question can be seen more abstractly of course, I'm basically asking for a container control with multiple child control collections.
When I tried to figure out what to compare this with, the functionality comes close to a MultiView; a MultiView can only contain controls of Type 'View', and the controls of a View are available in code-behind. The fact that a MultiView does not restrict the number and uniqueness of its childcontrols, and my control should (a maximum of one legend, and one content element) is something I could live with ... for now ;)
Does anyone have an idea how the MultiView was built? Is there a trick I'm overlooking? Any help or suggestion would be appreciated.
I have a DropDownList control that is populated via server side.
I use a For Each [datarow] loop and create a New ListItem
In the DataRow is a column with the ID 'Title'; this field may contain either <B> or <I> tags. (ex. "[Title] in <i>[Parent Title]</i>")
The problem I am facing is when I [DropDownList].Controls.Add([ListItem]) it renders the text literally... so it displays the <B> or <I> tags literally and doesn't bold/italicize the font.
I have tried looking all over for an answer, can someone please point me in the right direction?
A DropDownList control is rendered as a select element in the hhtml code, and the ListItem controls are rendered as option elements. An option element does not support html formatting in the text. Some browsers may support some styling of the entire option text, but no browser supports styling of part of the text.
If you need html formatting in the dropdown list, you either have to make your own replacement dropdown list control using DHTML, or find someone who has done it already.
You can try adding style attributes to each listitem, but I'm not sure how universally this is supported across different browsers.
ListItem li = new ListItem(dr["Name"], dr["Course"]);
if (bold) li.Attributes.Add("style", "font-weight:bold");
listcontrol.Items.Add(li);
Re-reading your question I noticed you want to mix normal and bold text within a single item in the list. I'm almost certain this isn't supported using the standard dropdown list. I think you'll need to have a look at using a CSS-based control that simulates a dropdown list.
If you need to have the bold and italicized formatting, I'd recommend using an .net Literal control to serve as a placeholder for your drop down list. Then upon postback or databinding, you can iterate through your result set, generate the HTML code manually (since it is not that complex) and then insert the generated HTML into the Literal control.
Indeed this is not possible.
You have a couple of alternatives although they have some minor disadvantages, because they do not exactly behave like a dropdownlist. In most solutions you can only pick an option with the mouse instead of typing a couple of characters. Of course it is possible to program this behaviour but that takes some time and effort.
Alternatives I have found are:
jquery solution from marghoob suleman
jquery solution from sanchez salvador