I am working on my first Mobile Site using bootstrap. I am trying to create a Listview that is responsive, I made some research and I need to select Layout= Flow but my issue is that this layout flows from top to bottom (one column). I need to be able to display it from left to right up to 4 items, but I can't make it work.
code
<asp:ListView ID="ProductsListView" DataSourceID="SqlDataSource1" runat="server" DataKeyNames="ID">
<LayoutTemplate >
<div ID="itemPlaceholderContainer" runat="server" style="">
<span runat="server" id="itemPlaceholder" />
</div>
<div style="">
</div>
</LayoutTemplate>
<ItemTemplate>
<span style="">ID:
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
</span>
</ItemTemplate>
</asp:ListView>
It looks like you are having the same problem as this user.
horizontal list view in asp.net
The LayoutTemplate contains a block level element (the div). This means that the ItemTemplate will be wrapped in the div which will take up the full available width.
You should be able to just remove div from the LayoutTemplate, make it a span, or make it a table like in the Selected Answer of the post I linked from #mshsayem
If you just want to show the images in a single row, you can just put
them in the columns of a single row. Try rewriting the listview markup
as follows (move table,tr markups into LayoutTemplate):
<asp:ListView runat="server" ID="PageHorizon">
<LayoutTemplate>
<table>
<tr>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<td>
<img src='<%#Eval("ImagePath")%>' alt="Single Image"
width="64px" height="64px" />
</td>
</ItemTemplate>
</asp:ListView>
The script below displays the Listview item with layout = flow horizontally and it is responsive. I hope someone find it useful.
<div style=" text-align: center;">
<!-- start listview-->
<asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" DataSourceID="SqlDataSource1">
<LayoutTemplate >
<div ID="itemPlaceholderContainer" runat="server" >
<span runat="server" id="itemPlaceholder" />
</div>
</LayoutTemplate>
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
<ItemTemplate>
<table style="display: inline-block;" >
<tr >
<td colspan="3">
<asp:Image ID="Image1" runat="server" Height="200px"
ImageUrl='<%# Eval("Picture") %>' Width="150px" />
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<span style="background-color: #FFFBD6;color: #333333;">
<asp:Label ID="OrderOfferNameLabel" runat="server"
Text='<%# Eval("WHATEVER") %>'></asp:Label>
</span>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<span style="background-color: #FFFBD6;color: #333333;">
<asp:Label ID="ProductNameLabel" runat="server"
Text='<%# Eval("WHATEVER") %>'></asp:Label>
</span>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Button ID="Button1" runat="server" Height="44px"
style="height: 26px; width: 56px" Text="Button" Width="380px" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:ListView>
</div>
Related
I have a Listview and one of the columns is called id_Number.
Is it possible to redirect to another page, if user clicks on one of the rows?
For example if id_Number is 4, than page should be redirected to ~/Page.aspx?id=4.
Code:
<asp:ListView ID="ListView1" runat="server"
DataKeyNames="id_Number" >
<EmptyDataTemplate>
<table id="Table1" runat="server" style="">
<tr>
<td>
No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<ItemTemplate>
<tr style="font-family: Arial; color: #FFFFFF" onMouseOver="this.bgColor='#219DD0';" onMouseOut="this.bgColor='#252526';">
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("id_Number") %>' />
</td>
<td>
<asp:Label ID="TextLabel" runat="server" Text='<%# Eval("Text") %>' />
</td>
<td>
<asp:Label ID="DateLabel" runat="server" Text='<%# Eval("Date") %>' />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table id="Table2" runat="server">
<tr id="Tr1" runat="server">
<td id="Td1" runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="0" style="">
<tr id="Tr2" runat="server" style="">
<th id="Th1" runat="server">
Name</th>
<th id="Th2" runat="server">
Text</th>
<th id="Th3" runat="server">
Date</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
You can add an HTML link or a JavaScript into the ItemTemplate of your ListView pretty easily:
The "columns" are just HTML columns; in the ItemTemplate, you have access to all of your data, including id_number, so you can use it anywhere in the HTML, not just inside a column.
Since you wan the whole row to be clickable, I'd use a JavaScript function on the onClick event of the HTML table row <TR> element. You already have 2 events (onMouseOver, onMouseOut), with JavaScript in them, so this would just be one more...
A JavaScript redirect utilizes window.location.href which will redirect in the same window, assuming that's what you want (as opposed to a new window, etc.):
<ItemTemplate>
<tr style="font-family: Arial; color: #FFFFFF"
onMouseOver="this.bgColor='#219DD0';"
onMouseOut="this.bgColor='#252526';"
onClick="window.location.href = 'some/path/Page.aspx?id=<%# Eval("id_Number") %>';"
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("id_Number") %>' />
</td>
<td>
<asp:Label ID="TextLabel" runat="server" Text='<%# Eval("Text") %>' />
</td>
<td>
<asp:Label ID="DateLabel" runat="server" Text='<%# Eval("Date") %>' />
</td>
</tr>
</ItemTemplate>
One thing to note is for the path of Page.aspx, you have to use a relative path.
~/page.aspx?id=
Is a .net path that gets compiled into the full relative path to that page.
However, bacause your ItemTemplate contains HTML, you'd need the full (relative) path to Page.aspx in there.
So instead it should be (just an example):
/some/path/page.aspx?id= <-- page.aspx lives on http://www.yoursite.com/some/path/page.aspx
/page.aspx?id= <-- page.aspx lives on root, http://www.yoursite.com/page.aspx
Alternately you can use
onClick="window.location.href = '<% System.Web.VirtualPathUtility.ToAbsolute("~/Page.Aspx?ID=" + Eval("id_number")); %>';"
I have the following Repeater and I am trying to add a divider (dotted line or similar) after each row but the style is getting messed up, what am I doing wrong?
Code:
<ItemTemplate>
<table id="tableItem" runat="server">
<tr>
<td style="width:400px;">
<%-- <asp:Label ID="lblEmployeeId" runat="server" Text='<%#Eval("EmployeeId") %>' ></asp:Label>--%>
<asp:HiddenField ID="HdnEmployeeId" runat="server" Value='<%#Eval("EmployeeId") %>' />
<asp:Literal Text="" runat="server" ID="LiteralUser" ></asp:Literal>
</td>
</tr>
<tr>
<td style="width: 100px;">
<asp:HiddenField ID="HdnRequestId" runat="server" Value='<%#Eval("id") %>' />
<asp:Label ID="lblDate" runat="server" Text='<%#Eval("Date", "{0:dd/M/yyyy}") %>'></asp:Label>
</td>
<td style="width: 80px;">
<asp:Label ID="lblHours" runat="server" Text='<%#Eval("Hours") %>'></asp:Label>
</td>
<td style="width: 50px; font-size:10px;">
<asp:Label ID="lblPeriod" runat="server" Text='<%#Eval("AMorPM") %>'></asp:Label>
</td>
<td style="width: 850px; font-size:10px;">
<asp:Label ID="lblNote" runat="server" Text='<%#Eval("Note") %>'></asp:Label>
</td>
<td style="50px">
<asp:RadioButtonList ID="rbtVerified" runat="server" >
<asp:ListItem Value="1">Accept</asp:ListItem>
<asp:ListItem Value="2">Reject</asp:ListItem>
</asp:RadioButtonList>
</td>
<td>
<asp:TextBox ID="txtNotes" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td style="width:900px;">
<asp:Label ID="lblBreak" runat="server" Text="------------------------------------------------------------------------------"></asp:Label>
</td>
</tr>
</table>
By Style getting messed up I mean the dotted line is being displayed only under the first column (lblDate) and the lblDate width is expanded.
you can use a separator template and inside it insert <hr />
<asp:Repeater runat="server" ID="rp">
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:Repeater>
Since your middle TR has 6 TDs, add attribute colspan="6" to TD in the 1st and the last row
<td colspan="6" style="width:400px;">
...
<td colspan="6" style="width:900px;">
By the way, you're specifying different width for the 1st and the last TD and both are less than summary width of inner TDs, so those styles won't have any effect and can be removed.
Another approach would be to spit out a div at the very end of your template and change its border to dotted. I tend to use this approach quiet often as it gives me the ability to easily add space between each item by targeting the div and adding margin around it.
So something like this:
<ItemTemplate>
...
<div class="divider"></div>
</ItemTemplate>
.divider
{
border: 1px dotted #C5C5C5;
height: 5px;
margin-bottom: 15px;
width: 100%;
}
Another way to do that just with with css flex
<div style="display: flex; align-items: center">
<div>My awesome article price:</div>
<div style="flex:1;border-bottom: dotted 1px #eee"></div>
<div>10.00€</div>
</div>
Using the code below i am trying to page break after every two rows of my list view control
when my apsx page is genrated to a PDF page...But some how its not working ..can someone please check what i am doing wrong here or suggest any other method to achieve it
<asp:ListView ID="ListView1" runat="server"
DataSourceID="DS_DvtImages" GroupItemCount="2">
<ItemTemplate>
<td id="Td1" runat="server" class='<%# ((ListViewDataItem)Container).DisplayIndex % 2 == 0 ? "page-break-before: always" : "" %>' style="color: #333333; border-style:solid;" >
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/ImageHandler.ashx?MaxHeight=500&MaxWidth=500&AttachmentId=" + Eval("ATTACHMENTID") %>' Height="300px" Width="300px" />
<br />
<span style="width:300px; background-color:Gray">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("ATT_name") %>'
Font-Size="10pt" ForeColor="Black" Width="100%" />
</span>
</td>
</ItemTemplate>
<LayoutTemplate>
<table id="Table1" runat="server" class="ListViewMainTable">
<tr id="Tr1" runat="server">
<td id="Td2" runat="server">
<table ID="groupPlaceholderContainer" runat="server" border="1"
style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
<tr ID="groupPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr id="Tr2" runat="server">
</tr>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr ID="itemPlaceholderContainer" runat="server">
<td ID="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
</asp:ListView>
page-break-before: always is the style, not the class. You will have to create a class with the style as page-break-before: always and then reference that class
I have a list view on a page and am trying emulate the toggling effect of a tree view. When first bound the detail elements (LBL_ActionTitle, LBL_Action, LBL_UrlTitle, LBL_Url) are set to visibility = false. I would like to have the click event of the element (LB_ExpandCollapse) toggle the visibility of detail elements directly related to it. IE not all the elements of that type on the page. I am not sure how to accomplish this, or if it can be done, and was hoping that someone could point me in the right direction. Here is the control for reference.
<div id="logContainer">
<asp:ListView ID=LV_Logs runat="server">
<LayoutTemplate>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td></td>
<td style="width:85%" />
</tr>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<hr />
<asp:LinkButton ID="LB_ExpandCollapse" runat="server" CausesValidation="false" OnClick="expandCollapse_Click">+</asp:LinkButton>
<asp:Label ID="LBL_MessageType" runat="server" Text='<%# Eval("messageType") %>'></asp:Label>
<hr />
</td>
<td style="text-align: right">
<hr />
<asp:Label ID="LBL_Message" runat="server" Text='<%# Eval("messageTime") %>'></asp:Label>
<hr />
</td>
</tr>
<tr style="text-align: left">
<td style="padding-left: 65px">
<asp:Label ID="LBL_ActionTitle" Visibility="false" runat="server" Text="User Action:"></asp:Label>
</td>
<td style="padding-left: 10px">
<asp:Label ID="LBL_Action" Visibility="false" runat="server" Text='<%# Eval("action") %>'></asp:Label>
</td>
</tr>
<tr style="text-align: left">
<td style="padding-left: 65px">
<asp:Label ID="LBL_UrlTitle" Visibility="false" runat="server" Text="URL:"></asp:Label>
</td>
<td style="padding-left: 10px">
<asp:Label ID="LBL_Url" runat="server" Visibility="false" Text='<%# Eval("url") %>'></asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:DataPager ID="DataPagerProducts" runat="server" PagedControlID="LV_Logs"
PageSize="20" OnPreRender="DataPagerProducts_PreRender">
<Fields>
<asp:NextPreviousPagerField ShowFirstPageButton="True" ShowNextPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ShowLastPageButton="True" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
I suggest you put the ID of the record as an ID on the TR containing the fields you want toggled. Then in your expandCollapseClick also pass the ID, so that you can set the row's style to display:block. Of course this assumes that all the rows start out at display:none. ie.
<tr id='<%# Eval("recordId") %>' style='display:none'>
and then in Javascript (pseudo-code)
function expandCollapseClick(row)
{
document.getElementById(row).style.display = 'block';
}
Then change your button to execute client-side as in:
<button onclick='expandCollapse(<%# Eval("recordId") %>)'>+</button>
This will call the code to display the row, passing in the id of the correct row. Of course this assumes that the table is fully populated when the page is retrieved and all you want to do is hide/show detail.
I have just created a website with a MasterPage. I have two conditions that will illustrate my problem:
Condition 1:
I have added a ModalPopupExtender on website.master. It has three fields and each field has a RequiredFieldValidator and a ValidatorCalloutExtender.
Condition 2:
I have a few different pages where you can click on a registration link. When you click the registration link, a registration form will appear. This form also has RequiredFieldValidators and ValidatorCalloutExtenders for each field.
Problem:
If I open a registration form and want to place my feedback, I click on the feedback button. The feedback modal popup displays. If I click on the submit button without filling the feedback form, it should give me the error in ValidatorCalloutExtender format on the ModalPopupExtender panel. However, it doesnt show me any error but the ValidatorCalloutExtender does show on the registation form along with respective validation.
<cc1:ModalPopupExtender CancelControlID="lnk_cancel" ID="popup_change_password" BackgroundCssClass="modalBackground"
runat="server" TargetControlID="ImageButton1" PopupControlID="panel_change_password">
</cc1:ModalPopupExtender>
<asp:Panel ID="panel_change_password" runat="server" Style="display: none; height: 400px;
width: 400px; padding-left:30px; background-repeat:no-repeat;" BackImageUrl="~/Images/background.gif">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="3" valign="top">
<table cellpadding="0" cellspacing="0" width="400px">
<tr>
<td align="right">
<asp:ImageButton ID="lnk_cancel" runat="server" ImageUrl="Images/close.gif" Height="30px"
Width="30px" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Label ID="lbl_new_password" runat="server" Text="Your feedback is important to us."
CssClass="login_font1"></asp:Label>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td>
<asp:Label ID="lbl_name" runat="server" Text="Name" CssClass="Label_Styles"></asp:Label>
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txt_name" runat="server" CssClass="Textbox_Styles"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td>
<asp:Label ID="lbl_email" runat="server" Text="Email Address" CssClass="Label_Styles"></asp:Label>
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txt_email" runat="server" CssClass="Textbox_Styles"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td>
<asp:Label ID="lbl_comment" runat="server" Text="Comments" CssClass="Label_Styles"></asp:Label>
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txt_comment" runat="server" CssClass="Textbox_Styles" Height="120px"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
</asp:Panel>
Put the above code in an UpdatePanel with UpdateMode="Conditional" and ChildrenAsTriggers="False".
So it will look something like :
<asp:UpdatePanel ID="sbsModalExtenderUpdatePanel" runat="server" UpdateMode="Conditional"
Visible="False" ChildrenAsTriggers="False">
<ContentTemplate>
<asp:Panel ID="StepByStepBookingPanel" runat="server" Enabled="false" EnableViewState="false"
Style="display: block" CssClass="mediumModalPopup" ScrollBars="Auto" Width="800px"
Height="300px" ViewStateMode="Enabled">
<div id="clientCoordDiv" runat="server">
<table id="StepByStepTable" runat="server">
etc...
</table>
</div>
</asp:Panel>
<ajax:ModalPopupExtender ID="mpeStepByStepBooking" runat="server" BackgroundCssClass="modalBackground"
PopupControlID="StepByStepBookingPanel" CancelControlID="BtnCancel" OnCancelScript="ClearStepByStepPopup"
TargetControlID="hdnStepByStepButton" DropShadow="true" BehaviorID="modalwithinput" />
<asp:CompareValidator ID="ClientCoordinatorCompareValidator" runat="server" ErrorMessage="Please select a Client Coordinator"
ControlToValidate="ddlClientCoordinator" Display="None" Operator="NotEqual" SetFocusOnError="True"
Type="Integer" ValueToCompare="0" ValidationGroup="SelectionRequired">
</asp:CompareValidator>
<asp:CompareValidator ID="CVOCoordinatorCompareValidator" runat="server" ErrorMessage="Please select a CVO Coordinator"
ControlToValidate="ddlCVOCoordinator" Display="None" Operator="NotEqual" ValueToCompare="0"
Type="Integer" SetFocusOnError="True" ValidationGroup="SelectionRequired">
</asp:CompareValidator>
<ajax:ValidatorCalloutExtender ID="CompareClientCoordinatorExt" runat="server" Enabled="True"
TargetControlID="ClientCoordinatorCompareValidator" BehaviorID="ClientValidatorExt">
</ajax:ValidatorCalloutExtender>
<ajax:ValidatorCalloutExtender ID="CVOCoordinatorCompareValidatorExt" BehaviorID="CVOValidatorExt"
runat="server" Enabled="True" TargetControlID="CVOCoordinatorCompareValidator">
</ajax:ValidatorCalloutExtender>
</ContentTemplate>
</asp:UpdatePanel>
This will keep the dialog up while you validate it. Unfortunately, I do not have the full solution since my validator messages are not displaying. So far, from what I am getting on the Net it is a problem with the Ajax library. Ugly!
Oh well, hope this helps someone...