I know the way to group the item . but how to group the layouttemplate each 8 databound items ?
here is the code
<ul class="slides">
<asp:ListView runat="server" ID="MyListView" OnItemDataBound="MyListView_ItemDataBound" GroupItemCount="2" >
<LayoutTemplate>
<li>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
</li>
</LayoutTemplate>
<GroupTemplate>
<div class="gourptpl">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder"/>
</div>
</GroupTemplate>
<GroupSeparatorTemplate>
<div class="sper"></div>
</GroupSeparatorTemplate>
<ItemTemplate>
<%-- The item template is used to render each of the rows of the DataTable that has been binded to the ListView control. --%>
<div class="ft-item">
<span class="ft-image">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">
<asp:Label runat="server" ID="ButtonText" />
<asp:Image ID="Image1" runat="server" />
</asp:LinkButton>
</span>
</div>
</ItemTemplate>
</asp:ListView>
</ul>
All i want is to repeat the GroupTemplate each 2 items and the LayoutTemplate each 8 items .
Thanks .
I helped myself . nest another listivew in the itemtemplate of the listview above . Actually i wanna customize the listview class but dun know how .
Related
I uses asp.net listview control to display the details. Each item has the group details. For demo purposes group is hard coded.
I want to display the listview as shown below
Right now, I have this
Code:
<asp:ListView ID="HyperLinkListView" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="itemContainer" GroupPlaceholderID="groupContainer">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<ul class="dfwp-list">
<asp:PlaceHolder ID="groupContainer" runat="server" />
</ul>
</div>
</div>
</div>
</section>
</LayoutTemplate>
<GroupTemplate>
<span>Group</span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
<ItemTemplate>
<li>
<div class="item">
<div class="link-item">
<asp:HyperLink Target="_blank" ID="hyperlink" NavigateUrl='<%# this.LinkToPlay((((SPListItem)Container.DataItem)["VideoFileName"]).ToString()) %>' Text='<%# Eval("Title") %>' runat="server" />
</a>
</div>
</div>
</li>
</ItemTemplate>
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
</asp:ListView>
How do I achieve this?
For a flexible solution, you can use nested ListView
You will need to update your HTML and CSS to get the desired appearance.
ASPX Code
<asp:ListView ID="GroupsListView" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="groupContainer" OnItemDataBound="GroupsListView_ItemDataBound">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<asp:PlaceHolder ID="groupContainer" runat="server" />
</div>
</div>
</div>
</section>
</LayoutTemplate>
<ItemTemplate>
<ul class="dfwp-list">
<li><%# Eval("Title") %></li>
<div>
<asp:ListView runat="server" ID="ItemsListView" ItemPlaceholderID="itemContainer">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<ul class="dfwp-list">
<asp:PlaceHolder ID="itemContainer" runat="server" />
</ul>
</div>
</div>
</div>
</section>
</LayoutTemplate>
<ItemTemplate>
<li>
<div class="item">
<div class="link-item">
<asp:HyperLink Target="_blank" ID="hyperlink" NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Title") %>' runat="server" />
</a>
</div>
</div>
</li>
</ItemTemplate>
</asp:ListView>
</div>
</ul>
</ItemTemplate>
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
</asp:ListView>
In the code behind you need to bind the child ListView in parent ItemDataBound event.
protected void GroupsListView_ItemDataBound(object sender, ListViewItemEventArgs e)
{
ListView itemsListView = (ListView)e.Item.FindControl("ItemsListView");
if (e.Item.ItemType == ListViewItemType.DataItem)
{
itemsListView.DataSource = ((Group)e.Item.DataItem).Items;
itemsListView.DataBind();
}
}
It is not quite clear what kind of grouping you want. However the ListView is limited in what it can do.
First of all you can only get a grouping by a fixed number of items. You can define that number with the GroupItemCount property. Your code would then look like this
<asp:ListView ID="HyperLinkListView" GroupItemCount="2" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="itemContainer" GroupPlaceholderID="groupContainer">
And generate in html like this
GROUP
My car video
My sample video
GROUP
Another sample video
Item 4
Assuming you want GROUP A and GROUP B etc, you would normally use a binding expression, which looks like this
<GroupTemplate>
<span>Group <%# Container.DataItemIndex %></span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
However the GroupItemTemplate is not part of the DataBind process, so getting and index based system will not work like that.
So a client side solution is needed if you want to add A, B etc. So first add a placeholder for the alhpa character and give the <span> a class so jQuery can find it. I've used {index} and groupIndex
<GroupTemplate>
<span class="groupIndex">Group {index}</span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
Now with a simple jQuery method, all the placeholders are replaced with their correct alpha character.
<script type="text/javascript">
$(document).ready(function () {
$('.quick-links .groupIndex').each(function (index, element) {
var char = String.fromCharCode(65 + index);
$(this).html($(this).html().replace('{index}', char));
});
});
</script>
Note that the .quick-links comes from your <section class="quick-links"> part in the LayoutTemplate.
I'm working on shopping cart application where I have listed all the products in a ListView. Then on button click of each product the image slider changes. Now I want to make it on mouseover instead of click. Below is the code I have tried to achieve.
ASP
<div class="col-md-12 ">
<div class="col-md-4 single_left pull-left">
<div class="flexslider">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater runat="server" ID="Repeater">
<HeaderTemplate>
<ul class="slides">
</HeaderTemplate>
<ItemTemplate>
<li data-thumb='<%# "assets/products/"+DataBinder.Eval(Container.DataItem, "Image1") %>'>
<asp:Image ID="image5" runat="server"
ImageUrl='<%# "assets/products/"+DataBinder.Eval(Container.DataItem, "Image1") %>' />
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script defer src="assets/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />
<!-- FlexSlider -->
<div class="caption">
<strong>
<asp:Label ID="lblPrice" runat="server" Text="*"></asp:Label></strong>
<strong>
<asp:Label ID="ItemCode" runat="server" Text="*"></asp:Label></strong>
<p>
<small><strong>
<asp:Label ID="lblDesc" runat="server" Text="*"></asp:Label>
</strong></small>
<br />
<asp:Label ID="lblID" Style="display: none;" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
<small>
<asp:Label ID="lblMsg" runat="server" Text="*" ForeColor="#990000"></asp:Label>
</small>
<br />
</p>
<asp:TextBox ID="txtqty" type="number" class="form-control" Text="0" runat="server"></asp:TextBox>
</div>
<asp:LinkButton ID="btnSubmit" type="submit" CssClass="add-cart item_add" runat="server" OnClick="btnSubmit_Click"><i class="fa fa-save"></i> Add to Cart</asp:LinkButton>
<script>
// Can also be used with $(document).ready()
$(window).load(function () {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails"
});
});
</script>
</div>
<div class="col-md-8 single-top-in simpleCart_shelfItem">
<asp:ListView ID="ImagesList" runat="server"
DataKeyNames="ID"
GroupItemCount="15"
OnPagePropertiesChanging="ImagesList_PagePropertiesChanging" OnSelectedIndexChanged="OnSelectedIndexChanged">
<EmptyDataTemplate>
No Images found.
</EmptyDataTemplate>
<LayoutTemplate>
<table>
<tr runat="server" id="groupPlaceholder" />
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<td runat="server" id="itemPlaceholder" />
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<asp:LinkButton ID="LBtn" runat="server"
CommandName="Change"
OnCommand="btnDetails_Command"
CommandArgument='<%# Eval("Notes") %>'>
<img src='<%#"assets/products/"+Eval("ImageUrl").ToString() %>' class="image" style="Width:50px;Height:50px" alt="Change" onmouseover="this.OnCommand" />
</asp:LinkButton>
</td>
</ItemTemplate>
</asp:ListView>
</div>
<div class="clearfix"></div>
<!---->
</div>
I must say that your approach of mouseovering which triggers click - seems not as the right solution. ( Just saying)
Anyway - Change your code to :
<asp:LinkButton ... CssClass="myButton"
...
</asp:LinkButton>
Then , via jQuery (which you already use) :
$(function (){
$(".myButton").on('mouseover',function (){this.click()});
});
I am having a nested repeater on the master page. And a hiddenfield in its item template.
i want the value of hiddenfield on content page.Like this
<ul class="categories">
<li>
<div id='cssmenu'>
<h4>Categories</h4>
<asp:Repeater ID="repcategory" runat="server" OnItemDataBound="repcategory_ItemDataBound">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<asp:HiddenField ID="hf1" Value='<%# Eval("CategoryID") %>' runat="server" />
<li class="active has-sub">
<a href='#'><span>
<%#Eval("CategoryName") %></span></a>
<asp:Repeater ID="repsubcategory" OnItemDataBound="repsubcategory_ItemDataBound" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<asp:HiddenField ID="hf2" Value='<%# Eval("SubCategoryID") %>' runat="server" />
<li class="has-sub">
<a href='#'><span>
<%#Eval("SubCategoryName") %></span></a>
<asp:Repeater ID="repsubcategory2" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<asp:HiddenField ID="hf3" Value='<%# Eval("SubCategory2ID") %>' runat="server" />
<li>
<a href="ClientProductSubCategory2.aspx"><span>
<%#Eval("SubCategory2Name") %></span></a>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</li>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>
</li>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>
</div>
I want the value of subcategory2id on the content page and codded like this.
HiddenField hiddensubcategory2id = (HiddenField)Master.FindControl("hf3");
DataSet ds = new ClientProductView().GetAllProductSubCategory2(hiddensubcategory2id.Value);
repContent.DataSource = ds;
repContent.DataBind();
But this is returning a null value. Please help me to solve this problem
Try finding the control within the repeater object itself, like this:
var hiddensubcategory2id = repsubcategory2.FindControl("hf3") as HiddenField;
Note: You should always check to see if the result of a FindControl() is null or not, like this:
if(hiddensubcategory2id != null)
{
// Do something with the control you found
}
I want to change this list so that it is dynamically populated:
<ul>
<li id="Tab1" class="selected" runat="server">
<asp:LinkButton ID="LinkButton1" OnClick="LinkButton1_Click"runat="server">
Tab1 Text
</asp:LinkButton>
</li>
<li id="Tab2" runat="server">
<asp:LinkButton ID="LinkButton2" OnClick="LinkButton2_Click" runat="server">
Tab2 Text
</asp:LinkButton>
</li>
<li id="Tab3" runat="server">
<asp:LinkButton ID="LinkButton3" OnClick="LinkButton3_Click" runat="server">
Tab3 Text
</asp:LinkButton>
</li>
</ul>
I tried using this code:
<asp:ListView ID="ListView_Tabs" OnItemCommand="ListView_ChangeTab" runat="server">
<LayoutTemplate>
<div class="tabs">
<ul>
<li id="itemPlaceholder" runat="server" />
</ul>
</div>
</LayoutTemplate>
<ItemTemplate>
<li>
<asp:LinkButton Text='<%# Eval("displayName") %>' CommandName='<%# Eval("parameterName") %>' runat="server"/>
</li>
</ItemTemplate>
</asp:ListView>
and populate it in code behind:
ListView_Tabs.DataSource = comeClass.GetTabs();
ListView_Tabs.DataBind();
But I don't see any clear way to set class='selected' to the last link I clicked ( or rather the list item that contains the link )
So my question is
What is the cleanest way to make a dynamic list of buttons in asp.net, or even just in .net?
It doesn't have to be anything like my approach. I'm not even sure using ListView is the best approach to solve this.
You can leverage the SelectedItemTemplate and SelectedIndex attributes of your ListView to accomplish this.
Change the CommandName property to "Select" in your ListItemTemplate. That way when the the postback occurs, the ListView will have the row index of the LinkButton you selected. You can then set your custom command to the CommandArgument paramter for any custom processing when the ItemSelected event is raised by clicking the LinkButton.
Then in your SelectedItemTemplate, you can apply the class right there. Your ListView would look something like this:
<asp:ListView ID="ListView_Tabs" OnItemCommand="ListView_ChangeTab" runat="server">
<LayoutTemplate>
<div class="tabs">
<ul>
<li id="itemPlaceholder" runat="server" />
</ul>
</div>
</LayoutTemplate>
<ItemTemplate>
<li>
<asp:LinkButton Text='<%# Eval("displayName") %>' CommandName="Select" CommandArgument='<%# Eval("parameterName") %>' runat="server"/>
</li>
</ItemTemplate>
<SelectedItemTemplate>
<li>
<asp:LinkButton Text='<%# Eval("displayName") %>' CommandName="Select" CommandArgument='<%# Eval("parameterName") %>' CssClass="selected" runat="server"/>
</li>
</SelectedItemTemplate>
</asp:ListView>
You can use the ItemDataBound event for that and set the selected class there.
You would identify the selected item with the CommandParameter.
Compare the e.DataItem to a property of the item you set as the CommandParameter.
So you would have something like this in the ItemDataBoud:
YourClass item = e.Item.DataItem as YourClass;
if(item == null) return;
if(item.YourKeyProp == e.CommandArgument)
{
Literal classlit = e.Item.FindControl("classLiteral") as Literal;
if(classlit == null) return:
classlit.Text = "Selected";
}
Use a Repeater instead:
<ul>
<asp:Repeater runat="server">
<ItemTemplate>
<li>
<asp:LinkButton runat="server" CommandName='' CommandArgument='' Text='' />
</li>
</ItemTemplate>
</asp:Repeater></ul>
I am trying to access the current 'active' top level node from a sitemap repeater from outside of the ASP.NET repeater used to render it, this is for CSS styling purposes as I want to place the child nodes on the subsequent row with different styling horizontally. At present I have the following code which I can't get to display correctly using CSS.
<asp:SiteMapDataSource ID="topNavLevel" runat="server" ShowStartingNode="false" />
<asp:Repeater runat="server" ID="rptParent" DataSourceID="topNavLevel">
<HeaderTemplate><ul id="lawMenu" class="topMenu"></HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink runat="server" ID="parentLink" NavigateUrl='<%# Eval("Url") %>'><span class="t"><%# Eval("Title") %></span><span class="l"></span><span class="r"></span></asp:HyperLink>
<asp:Repeater ID="rptChild" runat="server" DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink ID="childLink" runat="server" NavigateUrl='<%# Eval("Url") %>'><span class="t"><%# Eval("Title") %></span><span class="l"></span><span class="r"></span></asp:HyperLink>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</li>
</ItemTemplate>
<FooterTemplate>
</ul></FooterTemplate>
</asp:Repeater>
I would like to display the child nodes on the next light blue element which I can do perfectly well from a seperate div if this was not rendered using a child repeater. In the image below Blog and Services are top level nodes and their subseqent nodes (2 for each) should be displayed on the light-blue row below. Is this possible?
To get the parent repeaters DataItem as if you weren't inside your child repeater:
<%# DataBinder.Eval(((System.Web.UI.WebControls.RepeaterItem)Container.Parent.Parent).DataItem, "Property") %>
I have solved this now. For anyone else coming across this post here's the solution:
<asp:SiteMapDataSource ID="topNavLevel" runat="server" ShowStartingNode="false" />
<asp:Repeater runat="server" ID="rptParent" DataSourceID="topNavLevel">
<HeaderTemplate>
<ul id="lawmenu" class="law-menu">
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink runat="server" ID="parentLink" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</div>
<div class="law-nav_nav2">
<asp:SiteMapDataSource ID="secondNavLevel" runat="server" ShowStartingNode="false" StartingNodeOffset="1" />
<asp:Repeater ID="rptChild" runat="server" DataSourceID="secondNavLevel">
<HeaderTemplate>
<ul class="law-menu_nav2"style="z-index:100">
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink ID="childLink" runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</div>
The HeaderTemplate takes care of the list container styling then the repeater items are listed out one at a time with an offset of 1 for the current node. This looks easy based on what I have seen around the net, I'm just fairly new to some elements of ASP.NET :) Thanks.