I would like to use a GroupTemplate to separate a list of items into groups. However, I need each Group to be numbered sequentially so I can link to them and implement some JS paging. I'm binding to an IEnumerable
Here's some pseudo code. I would like the output to look like this:
<a href="#group1">Go to Group 1<a>
<a href="#group2">Go to Group 2<a>
<a href="#group3">Go to Group 3<a>
<ul id="group1">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul id="group2">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul id="group3">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
Is this easy to do in a ListView, using GroupTemplate and ItemTemplate?
<asp:ListView ID="lv" runat="server" GroupPlaceholderID="groupPlaceholder">
<LayoutTemplate>
<asp:PlaceHolder ID="groupPlaceholder" runat="server"></asp:PlaceHolder>
</LayoutTemplate>
<GroupTemplate>
<ul id="<!-- group-n goes here -->">
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</ul>
</GroupTemplate>
<ItemTemplate>
<li>Item</li>
</ItemTemplate>
</asp:ListView>
I can get the number of groups to do the links at the top from the Datasource and basic math, but how do I get id="groupN" number into the template?
I don't think you can DataBind the id, so I'd probably either use a hidden field, have JQuery count them up, or use the CssClass. You can use Container.DataItemIndex to get your number.
Edit: By just changing the ul to be runat="server", ASP.NET will generate a unique id for you in it's infamous INamingContainer format. That will include an index as well, though it'll be something like lv_ctrl0_group, and is an implementation detail.
You could hook a handler to the ul's Init event and append a number to it, making it something like lv_ctrl0_group1. I don't think you can get rid of the prepended INamingContainer stuff very easily, and this would probably break any IPostDataHandler controls.
<script runat="server">
void Group_Init(object sender, EventArgs e) {
((Control)sender).ID += groupId++.ToString();
}
int groupId = 0;
</script>
<asp:ListView id="lv" runat="server" GroupItemCount="3">
<LayoutTemplate>
<asp:PlaceHolder ID="groupPlaceHolder" runat="server" />
</LayoutTemplate>
<GroupTemplate>
<ul id="group" runat="server" oninit="Group_Init">
<asp:PlaceHolder ID="itemPlaceHolder" runat="server"/>
</ul>
</GroupTemplate>
<ItemTemplate>
<li>Item</li>
</ItemTemplate>
</asp:ListView>
In your aspx file:
<GroupTemplate>
<ul id='<%# "group"+GroupNumber %>'>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</ul>
</GroupTemplate>
In your code behind (assuming C#):
int _GroupNumber=0;
protected string GroupNumber
{
get { return (++_GroupNumber).ToString(); }
}
The solution from Keltex above would work with a small change; use <%= instead <%#,
<%# wouldnt work because GroupTemplate doesnt support databinding
Related
I am using a repeater control which have my data retrieved from database. I need to show them in the following format in the HTML.
<ul>
<li>
<div>content 1</div>
<div>content 2</div>
<div>content 3</div>
<div>content 4</div>
</li>
<li>
<div>content 5</div>
<div>content 6</div>
<div>content 7</div>
<div>content 8</div>
</li>
</ul>
I need to put a li tag for each 4 items that are bound from the repeater.
if any of you guys know how to achieve this, please let me know. Thanks.
Try Below Code- Data-Binding Expressions - Eval()
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<div><%# Eval("content1") %></div> // content1 is DB Column Name
<div><%# Eval("content2") %></div> // content2 is DB Column Name
<div><%# Eval("content3") %></div> // as so on for all content... till 8
<div><%# Eval("content4") %></div>
</li>
<li>
<div><%# Eval("content5") %></div>
<div><%# Eval("content6") %></div>
<div><%# Eval("content7") %></div>
<div><%# Eval("content8") %></div>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
Is there any way to add/remove a class to an HTML li tag from C# codebehind? for example, here's my code.
<li>
<asp:Panel ID="pnlClipboardEbulletin" runat="server">
<asp:Label ID="lblClipboardEbulletin" runat="server" />
</asp:Panel>
</li>
<li class="noborder">
<asp:Panel ID="pnlClipboard" runat="server">
<img src="../Images/Clipboard.jpg" alt="Clipboard" />
<asp:HyperLink runat="server" ID="lnkClipboard" Text="Clipboard" NavigateUrl="~/displayMyList.aspx"></asp:HyperLink>
</asp:Panel>
</li>
in the codebehind, I have to toggle the visibility of pnlClipboard based on other data. If pnlClipboard = false, I want to set the class of the first li to class="noborder"
Give your li tag the runat="server" attribute and an id.
<li runat="server" id="myli">
Now in your code behind you can use it like any control
myli.Attributes["class"] = "myClass";
Add runat="server" and ID attribute to first and you will be able to access it from codebehind
markup:
<li runat="server" id="firstItem">
<asp:Panel ID="pnlClipboardEbulletin" runat="server">
codebehind:
firstItem.Attributes["class"] = "noborder";
sorry in advance I have searched the whole site but I can not find an answer to this question
I plan to use the listview with checkboxes in every item and one delete button so that I can do a removal to multiple row at once, is there any way that I can start this work?
this is my current code
<asp:ListView ID="ListInbox" runat="server" DataKeyNames="MessageID"
DataSourceID="LinqDataSourceInbox" >
<EmptyDataTemplate>
There is no message
</EmptyDataTemplate>
<ItemTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<asp:CheckBox ID="CheckBoxSelect" runat="server" />
</td>
<td runat="server">
<asp:Panel ID="PanelMsg" runat="server" Width="400px">
<a href='UserProfile.aspx?UserName=<%# Eval("FromUserName") %>'><img src="ProfilePic/<%#Eval("User.ProfilePic") %>" alt='' width="25" /></a>
<a href='UserProfile.aspx?UserName=<%# Eval("FromUserName") %>'><%# Eval("FromUserName") %></a>
write you message:
<a href='ViewMessages.aspx?MsgID=<%# Eval("MessageID") %>'><%# Eval("Subject") %></a>
<%# Eval("MessageTime") %>
</asp:Panel>
</td>
</tr>
</table>
<hr style="text-align:left; width:400px;" />
</ItemTemplate>
<LayoutTemplate>
<div style="min-height:450px;">
<div runat="server" id="itemPlaceholder">
</div>
</div>
</LayoutTemplate>
</asp:ListView>
The questions are
Where the CheckBox put? Selected/Item template?
Where the Delete Button put? Inside/Outside ListView?
Thx in advance..
We do smth similar with a GridView backed with a DataTable, I suppose I can give you a general idea and you can do smth similar.
Create a flag column/ field. e.g: User.SetToDelete
onCheckChanged set this flag to true.
Upon Click of the delete button, iterate the rows and look for items set to be deleted.
As for the suggestion for a simple GUI:
Hope it helps.
In my project the master page contains a repeater that's used as a menu with an Xml file as the data source for the repeater.
<asp:Repeater ID="Admin_menus" runat="server">
<HeaderTemplate><div id="navmenu"><ul></HeaderTemplate>
<FooterTemplate>|</ul></div></FooterTemplate>
<ItemTemplate>
|<li>
<a href="<%# DataBinder.Eval(Container.DataItem, "url")%>"
class="link6" id="<%# DataBinder.Eval(Container.DataItem, "id")%>">
<strong>
<%# DataBinder.Eval(Container.DataItem, "title")%>
</strong>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
urls in the xml file is as
<menuitems>
<item id="1" url="Employee.aspx" title="Employee" description="Employee" />
<item id="2" url="Location.aspx" title="Location" description="Location" />
</menuitems>
Here I want to change the CSS style of the current page in the menu.
One solution you can opt for is to handle the ItemCreated event of the <asp:Repeater> control. To do this you need to add an event handler:
In the .master markup:
<asp:Repeater ID="Admin_menus" runat="server" OnItemCreated="Admin_menus_ItemCreated">
<HeaderTemplate>
<div id="navmenu">
<ul>
</HeaderTemplate>
<FooterTemplate>
|</ul></div></FooterTemplate>
<ItemTemplate>
|<li runat="server" id="hyperlink"><a href="<%# DataBinder.Eval(Container.DataItem, "url")%>" class="link6" id="<%# DataBinder.Eval(Container.DataItem, "id")%>">
<strong>
<%# DataBinder.Eval(Container.DataItem, "title")%></strong> </a></li>
</ItemTemplate>
</asp:Repeater>
In the .master.cs codebehind:
protected void Admin_menus_ItemCreated(object sender, RepeaterItemEventArgs e)
{
// Ensure that the ItemCreated is not null, the first one (header?) gets
// returned null
if (e.Item.DataItem != null)
{
// Extract the "url" attribute from the Xml that's being used for
// databinding for this particular row, via casting it down to
// IXPathNavigable as the concrete type of e.Item.DataItem isn't available
// to us.
var currentUrl = ((IXPathNavigable)e.Item.DataItem).CreateNavigator().GetAttribute("url", "");
if (Request.Url.PathAndQuery.Contains(currentUrl))
{
// This just adds a background color of "red" to the selected
// menu item. What you actually do is entirely up to you
var hyperlink = (HtmlGenericControl) e.Item.FindControl("hyperlink");
hyperlink.Style.Add(HtmlTextWriterStyle.BackgroundColor, "red");
}
}
}
Note that I've added a runat="server" as well as an id="hyperlink" to the <li> tag in your ItemTemplate so that the code in the ItemCreated handler can find it easily to style it.
Perhaps one solution is to check the current page in your inline Eval code and add the "currentpage" class to the anchor
For simplicity I'm using Eval() instead of DataBinder.Eval()
<asp:Repeater ID="Admin_menus" runat="server">
<HeaderTemplate>
<div id="navmenu"><ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<a href='<%# Eval("url") %>' class='link6<%# Request.RawUrl.EndsWith(Eval("url").ToString()) ? " currentpage" : "" %>' id='<%# Eval("id")%>'><strong><%# Eval("title")%></strong></a>
</li>
</ItemTemplate>
<FooterTemplate>
</ul></div>
</FooterTemplate>
</asp:Repeater>
Instead of binding directly from your xml data to repeater, try to get the repeater databing event, and compare with the current page url and the each binding item to determine if the current item should be hi-lighted
here i need to replace content "says..." :
<asp:DataList ID="dlProductReviews" runat="server" RepeatDirection="Vertical" RepeatColumns="1">
<ItemTemplate>
<div>
<span class="content">says... </span>
</div>
</ItemTemplate>
</asp:DataList>
You can use the data binding tags here:
<asp:DataList ID="dlProductReviews" runat="server" RepeatDirection="Vertical" RepeatColumns="1">
<ItemTemplate>
<div>
<span class="content"><%# GetContent() %></span>
</div>
</ItemTemplate>
</asp:DataList>
Then in your code behind create a protected method called GetContent()(or you could use a property) in the code behind that returns a string, in your case a string from the resources. You could also place the code directly in the <%#...%> tags.