We Keep Coding

Dynamically created treeview format

EDIT
It was fixed by adding width: 100% to the css.
I have a dynamically created treeview that pulls locations as parent nodes and lists deals at those locations in the child nodes.The treeview is dynamically created, so it's not like I can put a div around it and format the div. I've tried that. The formatting in the div doesn't show up at all. I want the treeview to display like this:
_ Location A
____ Deal A
____ Deal B
____ Deal C
_ Location B
____ Deal A
____ Deal B
____ Deal C
But right now it displays centered and it looks ugly. I've tried using a div, I've tried using classes. The nodes refuse to left align and stay firmly in the center. I know the class is working because I can change the margins and the border and the background color, but nothing touches the actual text.
aspx:
<asp:MultiView ID="LoginView" runat="server">
<asp:View ID="VendorContent" runat="server">
<h2>My Locations</h2>
<hr style="margin-left: 10%; margin-right: 10%">
<br />
<div class="location" runat="server">
<div id="treeview" runat="server">
<asp:TreeView ID="LocationTreeView" runat="server" Value="Left" CssClass="treeview">
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
<asp:Button runat="server" ID="saveChanges" OnClick="saveChanges_Click" Text="Save Changes" CssClass="save_treeview"/>
<a id="newDealLink" href="deals.aspx">Make a new deal</a>
</div>
</asp:View>
</asp:MultiView>
aspx.cs:
This is called in the page load if the view is a vendor:
private void loadVendorTree(UserInfo userinfo)
{
LocationTreeView.ShowCheckBoxes = TreeNodeTypes.All;
foreach (Location location in locations)
{
List<int> deal_IDs = new List<int>();
TreeNode node = new TreeNode(location.Address, location.Location_id.ToString());
node.ShowCheckBox = false;
foreach (Deal deal in deals)
{
TreeNode dealNode = new TreeNode(deal.Info, deal.Deal_id.ToString());
if(location.Deals.Contains(deal)){
dealNode.Checked = true;
}
else
{
dealNode.Checked = false;
}
deal_IDs.Add(deal.Deal_id);
dealNode.SelectAction = TreeNodeSelectAction.Select;
node.ChildNodes.Add(dealNode);
}
LocationTreeView.Nodes.Add(node);
}
}
css:
.treeview {
text-align: left;
margin: .5em 0;
padding-left: 0;
padding-right: 6em;
color: black;
border: 2px solid pink;
}
.save_treeview {
margin-left: .5em;
margin-bottom: .5em;
width: 10em;
}
.location {
text-align: left;
max-width: 45em;
margin: 0 auto;
background: rgba(255,255,255,0.5);
border: 2px solid #dcdaf1;
}
If anyone can help me or direct me to something that can I would really appreciate it.

maybe try nested unordered lists like this:
<ul>
<li>Location A</li>
<li>
<ul>
<li>Deal A</li>
<li>Deal B</li>
<li>Deal C</li>
</ul>
</li>
<li>Location B</li>
<li>
<ul>
<li>Deal A</li>
<li>Deal B</li>
<li>Deal C</li>
</ul>
</li>
</ul>
Then just style the unordered lists and list items with css and you are good.

asp:Image does not show the image

I have this code. This code is a part of my menu items:
<li class="" id="fifth-li">
<ul style="visibility: hidden; display: none;" id="fifth-ul">
<li><asp:HyperLink ID="hpl_undergraduate" runat="server"></asp:HyperLink></li>
<li><asp:HyperLink ID="hpl_graduate" runat="server"></asp:HyperLink></li>
</ul>
<asp:HyperLink ID="hpl_lessons" runat="server">
<asp:Image ID="img_lessons" runat="server" />
<strong></strong>
<em id="em_lessons" runat="server"></em>
</asp:HyperLink>
</li>
And this is a part of my .cs code file:
em_lessons.InnerHtml = lang["MENU_LESSONS"];
hpl_lessons.Text = lang["MENU_LESSONS"];
hpl_undergraduate.Text = lang["MENU_UNDERGRADUATE"];
hpl_graduate.Text = lang["MENU_GRADUATE"];
hpl_lessons.NavigateUrl = "lessons.html";
hpl_undergraduate.NavigateUrl = "lessons-801.html";
hpl_graduate.NavigateUrl = "lesson-802.html";
img_lessons.ImageUrl = "images/lessons.png"; //Here the image url is defined.
This code is for my web page's menu. There are a few more items like this. I add an image to the img_lessons object on the codebehind. But after running the page I get this code:
<li class="" id="fifth-li">
<ul style="visibility: hidden; display: none;" id="fifth-ul">
<li>
<a id="MainContent_hpl_undergraduate" href="lesson-801.html">
Undergraduate
</a>
</li>
<li>
<a id="MainContent_hpl_graduate" href="lesson-802.html">
Graduate
</a>
</li>
</ul>
<a id="MainContent_hpl_lessons" href="lessons.html">
Lessons
</a>
</li>
I was thinking that if I pull out img_lessons between <asp:HyperLink></asp:HyperLink>, the image would have been shown. But no way. I have changed the codes a bit to be cleaner.
The point is not about the image path, is about some programmatic incompetence/inconvenience. Because I do not see a <img id="MainContent_img_lessons" ... /> code on the browser's code view.
As you can see my image does not look. What do you think?
Regards.

When you do this:
hpl_lessons.Text = lang["MENU_LESSONS"];
you are wiping out any and all markup from the inside of the hyperlink.
EDIT: Since it looks like you already have a <em> tag that you have made a server tag, this line:
em_lessons.InnerHtml = lang["MENU_LESSONS"];
should already be setting viewable text, so, really, you should only have to remove the line mentioned above.

You are clearing the hyperlink innerHTML when you are setting the .Text to lang["MENU_LESSONS"]
What you would need to do is change your markup as follows:
<asp:HyperLink ID="hpl_lessons" runat="server">
<asp:Image ID="img_lessons" runat="server" />
<strong><asp:Literal ID="lit_lessons"/></strong>
<em id="em_lessons" runat="server"></em>
</asp:HyperLink>
And then change your code so that it reads
lit_lessons.Text = lang["MENU_LESSONS"];

How can i insert a C# list into a Div?

I have a C# list:
List<string> Listtags = GetListTag.GetTagList().ToList();
And, I would like to put it into a Div:
<div id="tags">
<ul>
<li><This should be populated with my list></li>
//This list can have any number of items depending on how big my list tags is
</ul>
</div>
Could someone show me how to do this?

you can also use Repeater
<ul>
<asp:Repeater runat="server" id="R">
<ItemTemplate>
<li><%# Container.DataItem %></li>
</ItemTemplate>
</asp:Repeater>
</ul>
and in runtime
List<string> ListTags = GetListTag.GetTagList().ToList();
R.DataSource = ListTags;
R.DataBind();

Use asp:bulletedList and your list will be much easier.
<div id="tags">
<asp:BulletedList id="blTabs"
BulletStyle="Disc"
DisplayMode="LinkButton"
runat="server">
</asp:BulletedList>
</div>
Code Behind:
ListItem li = new ListItem();
li.Value = "html text"; //html goes here i.e. xtab1.html
li.Text = "New Text"; //text name goes i.e. here tab1
blTabs.Items.Add(li);

If you're using ASP.NET, you could use a BulletedList webserver control:
<asp:BulletedList ID="BulletedList1" runat="server"
BulletStyle="Circle"
DisplayMode="Text">
</asp:BulletedList>
and in codebehind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<string> Listtags = GetListTag.GetTagList().ToList();
Listtags.ForEach(t => BulletedList1.Items.Add(t));
}
}
Edit: "I want to add something like this::: Listtags.ForEach(t => BulletedList1.Items.Add(t),"$tag$ "); weight being a variable in my code"
So i assume that you want to add hyperlinks and apply a different css class on the items.
<asp:BulletedList ID="BulletedList1" runat="server"
CssClass="TagList"
DisplayMode="HyperLink">
</asp:BulletedList>
and for example the css:
<style>
.TagList a {text-decoration:none}
.TagList a:link {text-decoration:none}
.TagList a:visited {text-decoration: none; color: blue}
.TagList a:hover {text-decoration: underline; color: red}
</style>
and how you add the links dynamically(the value of the ListItem is the URL):
Listtags.ForEach(t =>
BulletedList1.Items.Add(new ListItem(t, browseUrl + "?tag=$urlencodetag$"))
);

If you are using MVC3 you can do something like the following:
<div id="tags">
<ul>
#foreach(var item in Model.Listtags)
{
<li>#item.YourPropertyName</li>
}
</ul>
</div>

In Asp.Net
<ul id = "myul" runat = "server">
</ul>
In Code Behind (In Page Load I suppose or button click)
Listtags.ForEach(x => new ListItem(){Text = x });

Dual listview binding help

I have a listview of buttons(I wanted to have hyperlinks actually but have no idea how to execute without the onclick event) where I can click and show the sub categories products of a master category on another listview(already binded with products of master category table). This is my code below, apparently it does not work as expected and throws the error below:
"Both DataSource and DataSourceID are defined on 'ListView_Products'. Remove one definition."
Can someone please advice how to deal with this? Thanks.
Here is a "picture" of what I am trying to do:
**ListView 1(Sub Category)** **ListView 2(Master Category)**
Cotton "ALL THE DRESSES"
Silk
So when I click cotton in ListView1, only dresses made of Cotton will be displayed on ListView2.
<asp:ListView ID="ListView_ProductsMenu" runat="server"
DataKeyNames="CategoryID" DataSourceID="EDS_Category_Menu" >
<EmptyDataTemplate>No Menu Items.</EmptyDataTemplate>
<ItemSeparatorTemplate></ItemSeparatorTemplate>
<ItemTemplate>
<li style="color: #B6B6B6; text-align: left; font-family: candara; font-size: small;" class="SideMenu">
<asp:Button ID="Button1" runat="server" Text='<%# Eval("Category_Sub_Name")%>' OnClick='<%# FormattedCategory((int)Eval("CategoryID"),(int)Eval("Category_Sub_ID")) %>' />
</li>
</ItemTemplate>
<LayoutTemplate>
<ul ID="itemPlaceholderContainer" runat="server" style="font-family: Verdana, Arial, Helvetica, sans-serif;">
<li runat="server" id="itemPlaceholder" />
</ul>
<div style="text-align: left;background-color: #FFCC66;font-family: Verdana, Arial, Helvetica, sans-serif;color: #333333;"></div>
</LayoutTemplate>
</asp:ListView>
Code behind:
protected string FormattedCategory(int cID, int subCatID)
{
using (CommerceEntities db = new CommerceEntities())
{
ListView_Products.DataSource = null;
ListView_Products.DataSource = (from c in db.Categories_Sub
where c.CategoryID == cID
& c.Category_Sub_ID == subCatID
select c);
ListView_Products.DataBind();
//foreach (var item in subCat)
//{
// ListView_ProductsMenu.DataBind();
// }
}
return null;
}

Try to remove that attribute from <asp:ListView ... DataSourceID="EDS_Category_Menu"

Nevermind, it's ListView_Products.DataSourceID = null; actually. Thanks.

How to access a Div inside a repeater using javascript

Simply, I have an anchor inside a repeater that triggers on click a javascript function, which sets the innerHTML of a Div to some content.
trying this outside a repeater did work!
but if I tried to implement the same code in the repeater's item template, it won't work!
NOTE: I think I need to access the repeater first then access the Anchor inside it! but I don't know how to do it
For further illustration:
JavaScript Function:
function show(ele, content) {
var srcElement = document.getElementById(ele);
if (srcElement != null) {
srcElement.innerHTML = content;
}
}
The repeater's code:
<asp:Repeater ID="Repeater1" runat="server" >
<ItemTemplate>
Name : <%# Eval("name")%>
<DIV ID= "PersonalInfo1" runat="server"></DIV>
<A id="A1" href="#" runat="server" onclick="show('PersonalInfo1','Address : ')">More...</A>
</ItemTemplate>
</asp:Repeater>
PS: THE POSTED CODE ISN'T WORKING IN THE REPEATER!

That is because id's are unique. Select elements using getElementsByName or by their class name with for example jQuery.

OK... let's start over.
Have such repeater code:
<asp:Repeater ID="Repeater1" runat="server" >
<ItemTemplate>
<div>
Name : <%# Eval("name")%>
<div id="Address" runat="server" style="display: none;"><%# Eval("address")%></div>
<div id="Interests" runat="server" style="display: none;"><%# Eval("interests")%></div>
<a id="A1" href="#" runat="server" onclick="return show(this, 'Address');">Show address</a>
<a id="A2" href="#" runat="server" onclick="return show(this, 'Interests');">Show interests</a>
</div>
</ItemTemplate>
</asp:Repeater>
Then such JavaScript code:
function show(oLink, targetDivID) {
var arrDIVs = oLink.parentNode.getElementsByTagName("div");
for (var i = 0; i < arrDIVs.length; i++) {
var oCurDiv = arrDIVs[i];
if (oCurDiv.id.indexOf(targetDivID) >= 0) {
var blnHidden = (oCurDiv.style.display == "none");
oCurDiv.style.display = (blnHidden) ? "block" : "none";
//oLink.innerHTML = (blnHidden) ? "Less..." : "More...";
}
}
return false;
}
This will search for "brother" DIV element of the clicked link, and show or hide it.
The code is as simple as possible using pure JavaScript, you should be able to understand what each line is doing - feel free to ask if you don't. :)
Note, you have to put the personal info in the PersonalInfo div in advance instead of passing it to the function - the function will get pointer to the clicked link.

Yes you need to iterate all the relevant links. Solution that involve minimal change of code is adding class to the links then check for this class:
<A id="A1" href="#" runat="server" class="RepeaterLink" ...>
And then in JavaScript:
var arrLinks = document.getElementsByTagName("a");
for (var i = 0; i < arrLinks.length; i++) {
var oLink = arrLinks[i];
if (oLink.className == "RepeaterLink") {
//found link inside repeater..
oLink.click();
}
}
This will "auto click" all the links, you can check ID or something else to imitate click of specific link in the repeater as well.