I've got a problem here with a div not being placed that way I'd like it to.
This is the ASP code I'm using:
<asp:ListView ID="categoriesListView" runat="server">
<LayoutTemplate>
<div class="main" runat="server">
<div ID="itemPlaceholder" class="sub" runat="server">
</div>
</div>
</LayoutTemplate>
<EmptyDataTemplate>
<div class="main" runat="server">
<div class="sub" ID="itemPlaceholder" runat="server">
No data was returned.
</div>
</div>
</EmptyDataTemplate>
<ItemTemplate>
<asp:Image AlternateText='<%# Eval("CategoryName") %>' ID="Image1" runat="server" ImageUrl='<%# Eval("CategoryImgUrl", "~/Images/{0}") %>' />
<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />
</ItemTemplate>
</asp:ListView>
I was expecting results like this:
<div class="main">
<div class="sub">
...
</div>
<div class="sub">
...
</div>
<div class="sub">
...
</div>
...
</div>
The result was one big div "main" containing everything, with no "sub" divs.
If I added the itemPlaceholder one level deeper, the same thing would happen, now with 1 "sub" div and everything pushed in there. How do I solve this?
Change it to look like this:
<LayoutTemplate>
<div class="main" runat="server">
<div ID="itemPlaceholder" runat="server">
</div>
</div>
</LayoutTemplate>
<EmptyDataTemplate>
<div class="main" runat="server">
<div class="sub" ID="itemPlaceholder" runat="server">
No data was returned.
</div>
</div>
</EmptyDataTemplate>
<ItemTemplate>
<div class="sub" >
<asp:Image AlternateText='<%# Eval("CategoryName") %>' ID="Image1" runat="server" ImageUrl='<%# Eval("CategoryImgUrl", "~/Images/{0}") %>' />
<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />
</div>
</ItemTemplate>
Related
I'm trying to fit a GridView (or a ListView, I've tried both) into the panel-body of a div panel. However, whenever the GridView appears, it closes out the panel-body early and causes formatting issues.
I've tried GridView, ListView, rearranging the elements of my panel, and I've trimmed a lot of stuff back to get it down to just the GridView.
<asp:ListView ID="lvOuter" runat="server" ItemPlaceholderID="placeHolder" DataKeyNames="PkUser" OnItemCommand="lvOuter_ItemCommand" OnSorting="lvOuter_Sorting" OnSelectedIndexChanging="lvOuter_SelectedIndexChanging" OnPagePropertiesChanging="lvOuter_PagePropertiesChanging">
<LayoutTemplate>
<table style="border-collapse: collapse; width: 100%">
<tbody>
<tr id="placeHolder" runat="server" style="width: 100%"></tr>
</tbody>
<tfoot>
<tr style="align-content: center;">
<td class="listViewFooterText" style="color: white; text-align: center">
<uc:listviewpager runat="server" id="ucOuterListViewPager" listviewcontrolid="lvOuter" />
</td>
</tr>
</tfoot>
</table>
</LayoutTemplate>
<ItemTemplate>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<span class="glyphicon glyphicon-user x1" style="text-align: left;" />
<b>
<asp:Label ID="lbEmployeeTitle" runat="server" Style="font-family: Arial; font-size: 14px;" Text='<%# Eval("EmployeeName") %>'></asp:Label></b>
<asp:Label ID="lbUnapprovedTitle" runat="server" CssClass="badge badge-blue" Text='<%# Eval("TotUnapproved") %>'></asp:Label>
</h3>
</div>
<div class="panel-body">
<asp:GridView ID="gvInner" runat="server" DataSource='<%# Eval("IndividualTracking") %>' AutoGenerateColumns="false" DataKeyNames="PkTrainingRequest" OnRowCommand="gvInner_RowCommand">
<Columns>
<asp:TemplateField ItemStyle-Width="40%" HeaderText="Title">
<ItemTemplate>
<asp:LinkButton ID="kbTitle" runat="server" CssClass="gridViewRowText" CommandName="Populate" ToolTip="Go to Training Request" Text='<%# Eval("Title") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="20%" HeaderText="Length">
<ItemTemplate>
<asp:LinkButton ID="kbLength" runat="server" CssClass="gridViewRowText" CommandName="Populate" ToolTip="Go to Training Request" Text='<%#Eval("Length") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="30%" HeaderText="Date">
<ItemTemplate>
<asp:LinkButton ID="kbDate" runat="server" CssClass="gridViewRowText" CommandName="Populate" ToolTip="Go to Training Request" Text='<%#Eval("Date") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="10%" HeaderText="Approve">
<ItemTemplate>
<asp:Button ID="btnQuickApprove" runat="server" Text="Quick Approve" CssClass="btn btn-success" CommandName="Approve" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2">
<asp:Button ID="btnDrillDown" Text='<%#Eval("Subordinates") %>' CommandName="DrillDown" CssClass="btn btn-primary" runat="server" Visible='<%#Eval("VisibleSubordinates") %>' />
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<asp:Button ID="btnViewTraining" Text="View All Training" CommandName="ViewTraining" CssClass="btn btn-primary" runat="server" />
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
</ItemTemplate>
</asp:ListView>
Expected result: panels, each with a header and footer, and a gridview (when it populates) in the body.
Actual result: the panels work fine until the gridview populates. When that happens, the panel-body ends before the gridview, and the panel-footer attaches to the top of the next panel.
You made a tr the placeHolder. So it generates this, which is incorrect html
<table style="border-collapse: collapse; width: 100%">
<tbody>
<div class="panel panel-default">
xxx
</div>
So if you want to use a correct table, make the LayoutTemplate like this
<asp:ListView ID="lvOuter" runat="server" ItemPlaceholderID="placeHolder">
<LayoutTemplate>
<table style="border-collapse: collapse; width: 100%">
<tbody>
<tr>
<td>
<span id="placeHolder" runat="server"></span>
</td>
</tr>
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<div class="panel panel-default">
</div>
</ItemTemplate>
</asp:ListView>
Which generates
<table>
<tbody>
<tr>
<td>
<div class="panel panel-default">
</div>
<div class="panel panel-default">
</div>
</td>
</tr>
</tbody>
</table>
This still places everything in a single table cell. If you want a cell per ItemTemplate you need to put <tr><td> in it.
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 have a repeater set up in Visual Studio to try and grab the latest 3 blog titles from the database and show the associated image along with the title, intro and a link.
However the parent div of each blog needs to have a different ID.
Currently I have the following code but it's not working because I've since found out you can't have an itemtemplate followed by an alternating item template followed by another item template.
I there any workaround to this?
<asp:Repeater runat="server" ID="repeaterNews1" DataSourceID="SQLDataNews1">
<ItemTemplate>
<div id="blog1">
<div class="col-xs-12">
<asp:Image runat="server" ID="Image1" ImageUrl='<%# Eval("NewsStoryImage") %>'/>
<div class="blogContent">
<div class="container">
<h2>Our Blog</h2>
<p><asp:Label runat="server" ID="Label1" Text='<%# Eval("PageTitle") %>'></asp:Label></p>
<p><asp:Label runat="server" ID="Label2" Text='<%# Eval("Content1") %>'></asp:Label></p>
Read More
</div>
</div>
</div>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div id="blog2">
<div class="col-xs-12">
<asp:Image runat="server" ID="Image2" ImageUrl='<%# Eval("NewsStoryImage") %>'/>
<div class="blogContent">
<div class="container">
<h2>Our Blog</h2>
<p><asp:Label runat="server" ID="Label1" Text='<%# Eval("PageTitle") %>'></asp:Label></p>
<p><asp:Label runat="server" ID="Label2" Text='<%# Eval("Content1") %>'></asp:Label></p>
Read More
</div>
</div>
</div>
</div>
</AlternatingItemTemplate>
<ItemTemplate>
<div id="blog3">
<div class="col-xs-12">
<asp:Image runat="server" ID="Image3" ImageUrl='<%# Eval("NewsStoryImage") %>'/>
<div class="blogContent">
<div class="container">
<h2>Our Blog</h2>
<p><asp:Label runat="server" ID="Label1" Text='<%# Eval("PageTitle") %>'></asp:Label></p>
<p><asp:Label runat="server" ID="Label2" Text='<%# Eval("Content1") %>'></asp:Label></p>
Read More
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
No, you cannot create a third template.
What you can do is make sure the ID's are still unique by using Container.DataItemIndex
<ItemTemplate>
<div id="blog<%# Container.DataItemIndex %>"></div>
</ItemTemplate>
Want to show 3 Items from database in one row. With this code repeater shows only 1 Item from database.
<asp:Repeater ID="rptItems" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<div class="row">
<div class="col-md-4">
<h2><%# Eval("Title") %></h2>
<img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' width="200" height="200" />
<p>ISBN</p>
<p><%# Eval("ISBN") %></p>
<p>Description</p>
<p><%# Eval("Description") %></p>
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
This is css issue. I see that you use the bootstrap style, so move the <div class="row"> out side of the loop.
<asp:Repeater ID="rptItems" runat="server">
<HeaderTemplate>
<ul>
<div class="row">
</HeaderTemplate>
<ItemTemplate>
<div class="col-md-4">
<h2><%# Eval("Title") %></h2>
<img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' width="200" height="200" />
<p>ISBN</p>
<p><%# Eval("ISBN") %></p>
<p>Description</p>
<p><%# Eval("Description") %></p>
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</ul>
</FooterTemplate>
</asp:Repeater>