I recently did a nested repeater according to this tutorial. The same thing
http://www.codeproject.com/Articles/6140/A-quick-guide-to-using-nested-repeaters-in-ASP-NET
But I added a jQuery accordion just like this example:
http://www.snyderplace.com/demos/accordion.html
Everything is good, but I realized some UI issues. I mean for example if one of my nested repeaters has 100 records and another has just 1 record, for this second with just 1 record, it has a blank space reserved as it had 100 records also. Someone knows how to fit the height each nested repeater to its elements?
<div id="accordion">
<asp:Repeater ID="summary" runat="server" OnItemDataBound="summary_ItemDataBound">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div>
Id:<asp:Literal ID="litCategory" runat="server" />
</div>
<div>
<asp:Repeater ID="detail" runat="server" OnItemDataBound="detail_ItemDataBound">
<HeaderTemplate>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><asp:Literal ID="litID" runat="server" /></td>
<td><asp:Literal ID="litName" runat="server" /></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
</div>
I got it! I found this solution!
$(function () {
$("#accordion").accordion({
collapsible: true,
heightStyle: "content"
});
});
I need to specify that to attributes and that's it!
Related
this is my code to view products as list view inside each item in list view i want to view list of items how can i do this? i can not understand the concept of the eval function and i want to know if i can pass to it list items from code behind without data Bind or it basically depends on data-bind ?
<asp:ListView ID="mylistView" runat="server" GroupItemCount="3">
<EmptyDataTemplate>
<table id="Table2" runat="server">
<tr>
<td>
No data was returned.
</td>
</tr>
</table>
</EmptyDataTemplate>
<EmptyItemTemplate>
<td id="Td3" runat="server" />
</EmptyItemTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
<ItemTemplate>
<table border="0" width="300" style="display: inline-block; background-color: Lime;">
<tr>
<td>
 
</td>
<td>
<a href='ContactUs.aspx'>
<image src='productsImg/<%# Eval("Pic_Path") %>' width="100" height="75" border="0">
</a> 
</td>
<td>
<a><b style="text-decoration: underline;">
<%# Eval("MenuName") %></b> </a>
<br />
want to view here list of items
I
</td>
</tr>
</table>
</ItemTemplate>
<LayoutTemplate>
<table id="Table1" runat="server">
<tr id="Tr1" runat="server">
<td id="Td1" runat="server">
<table id="groupPlaceholderContainer" runat="server">
<tr id="groupPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr id="Tr2" runat="server">
<td id="Td2" runat="server">
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
this is code behind...
dataSource.ConnectionString = connetionString;
dataSource.SelectCommand = "SELECT * FROM tbl_WebMenu where MenuID like'3_';";
mylistView.DataSource = dataSource;
mylistView.DataBind();
thanks in advance.
Eval is used to bind to an UI control that is supposedly read only. it can be used to set any type of property of control.
The complete syntax is "Databinder.Eval", it has to be used in conjunction with databind.
Look at this example.
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblRead" runat="server" Text='<%# Eval("FieldName") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
you can even set a property of control using eval. it provides flexibility.
But there is a downside of eval as it uses reflection to evaluate the expression.
Read more here http://msdn.microsoft.com/en-us/library/4hx47hfe.aspx#remarksToggle
I am using datatable JQuery plugin found on this site. http://datatables.net/
This is how I generated my table, which include three columns, checkbox column, program name and company name.
<script>
$(document).ready(function () {
var table = $('#tablePrograms').DataTable();
});
</script>
<div id="selectedProgramIds" runat="server"></div>
<asp:Repeater ID="RpPrograms" runat="server">
<HeaderTemplate>
<table id="tablePrograms" class="display">
<thead>
<tr>
<th></th>
<th>Program</th>
<th>Company Name</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:checkbox runat="server" ID="cbxProgram"/>
<asp:HiddenField ID="hdnProgramID" runat="server" Value='<%# Eval("ProgramID")%>' />
</td>
<td><asp:label runat="server" id="ProgramName" Text='<%#Eval("Program")%>'></asp:label></td>
<td><%#Eval("CompanyName")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
My question is, now that this is a 10 pages table with pagination, what is the best way to save the data so that checkboxes selected on 10 different pages can all be saved. Currently, the DOM only shows the elements of the pages that I am on. For example, if I am on page 1, DOM doesn't display the elements on page 2-10. What is the best way to perform saving is this case? Does datatable plugin has some kind of build-in saving feature? Thanks for your help.
Found the answer on their website. http://datatables.net/release-datatables/examples/api/form.html
A handy jQuery serialize() function can be used to string together the data.
I have browsed the different cases already answered about the topic but did not find the one answering my question:
<asp:ListView ID="lstView_phoneUsersExtensionsFound" runat="server" OnItemDataBound="lstView_phoneUsersExtensionsFound_ItemDataBound">
<LayoutTemplate>
<table id="tbl1" runat="server" class="bordered">
<tr id="tr1" runat="server">
<th id="th1" runat="server" visible='<%# selectOptionVisible %>' >Select</th>
<th id="th1" runat="server">UserID</th>
<th id="th2" runat="server">Firstname</th>
<th id="th3" runat="server">Lastname</th>
</tr>
<tr id="ItemPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td runat="server" visible='<%# selectOptionVisible %>' >
<input type="radio" name="rdbutton_userSelection" value='<%# Eval("uuid") %>' />
<asp:HiddenField runat="server" ID="hdfield_userID" Value='<%# Eval("uuid")%>' />
</td>
<td><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# String.Format("~/Users/DisplayUserDetails.aspx?selectedCCMUserID={0}&uuid={1}",Eval("userID"),Eval("uuid"))%>'><%# Eval("userID")%></asp:HyperLink></td>
<td><%# Eval("firstname")%></td>
<td><%# Eval("lastname")%></td>
</tr>
</ItemTemplate>
<EmptyDataTemplate></EmptyDataTemplate></asp:ListView>
The repeater layouttemplate header does not take into account the visible value but the different items work well and hide the cell when needed.
I would like to keep using an aspx function and not go through javascript or CSS if possible.
Any idea?
Well the below code does the trick but I am sure there should be a better way.
protected void lstView_phoneUsersExtensionsFound_ItemDataBound(object sender, ListViewItemEventArgs e)
{
HtmlTableCell th_selectColumn = (HtmlTableCell)lstView_phoneUsersExtensionsFound.FindControl("th1");
th_selectColumn.Visible = selectOptionVisible;
}
Try this...
<th id="th1" runat="server" visible='<%# Eval("selectOptionVisible") %>'>
The problem was in visible='<%# selectOptionVisible %>'
Instead I changed it to visible='<%# Eval("selectOptionVisible") %>'
Make sure that your data source contains a column as selectOptionVisible
Note
To hide the column header i.e <th>,
Load the "selectOptionVisible to a variable in the code behind while page loading.
Instead of '<%# Eval("selectOptionVisible") %>'
now you can use '<%# selectOptionVisibleVariable %>'.
Set value for selectOptionVisibleVariable before loading data to ListView.
Ok so I have an update panel sorrounding my controls. I have 2 dropdownlists which have functions they run from codebehind and a repeater of items. I've done the test in a Repeater using a button it doesn't do a postback, but the linkbutton does. What am I doing wrong?
also this is inside a usercontrol no aspx page.
<asp:UpdatePanel ID="upLocation" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<asp:Repeater ID="rptMuniProducts" runat="server">
<HeaderTemplate>
<table class="table">
<thead>
<tr>
<th class="w80"></th>
<th>Product</th>
<th>Product Type</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td class="actions">
<asp:Button ID="btnProd" runat="server" OnClick="btnProd_Click" Text="test" />
<asp:LinkButton ID="lnkDeleteProd" runat="server" OnClick="lnkDeleteProd_Click">Link Test</asp:LinkButton>
<asp:HiddenField ID="hdnId" runat="server" Value='<%# DataBinder.Eval(Container, "DataItem.Id") %>' />
</td>
<td><%# DataBinder.Eval(Container, "DataItem.Name") %></td>
<td><%# DataBinder.Eval(Container, "DataItem.Producttype") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
Have you tried setting ClientIDMode=Auto on the LinkButton? There's a long-standing .NET bug with doPostBack and non-auto client ids.
Just like we have pagesize property in gridview that allows us to switch back and forth between pages, isn't there anyway i can incorporate the same functionality in a repeater.
<table id="myTable">
<tbody>
<asp:Repeater ID="Repeater1" runat="server"
onitemcommand="addItem_OnClick" DataMember="DefaultView">
<ItemTemplate>
<tr>
<td>
<div class="product">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr valign="top">
<td width="105"><asp:HyperLink ID="HLSysDet" runat="server"
NavigateUrl='<%# "/Product.aspx?productId=" + Eval("ProductDescriptionId") %>'>
<asp:Image ID="Image1" runat="server" width="85" height="85"
ImageUrl='<%# Eval("Thumbnail")%>' border="0" />
</asp:HyperLink></td>
<td><ItemTemplate><a
href='<%# "/Product.aspx?productId=" + Eval("ProductDescriptionId") %>'>
'<%# Eval("ProductName")%>'</a> </ItemTemplate></b><br />
<br />
Manufacturer: <%# Eval("Manufacturer")%><br />
<br />
<b>Rs <%# Eval("UnitPrice")%>
</b><br />
<br />
Weight: <%# Eval("Weight")%> Kg<br />
</td>
<td width="20"></td>
<td valign="bottom" width="130">
<%# Eval("Quantity")%>+ in stock<br />
<asp:TextBox ID="_qty" runat="server" CssClass="textbox"
MaxLength="2" Text="1" Width="30"
Visible='<%# showBtn(Eval("Quantity")) %>' /> <asp:RangeValidator
ID="RangeValidator1" runat="server" ControlToValidate="_qty"
ErrorMessage="*" ForeColor="Red" MaximumValue="50"
MinimumValue="1"></asp:RangeValidator>
<div class="buttons"><span id="Span1" class="mandatory"
runat="server" visible='<%# isQty(Eval("Quantity")) %>'>
Sorry, this item is out of stock</span></div>
<div class="buttons"><br />
<asp:LinkButton ID="CommandButton" runat="server"
Text='Add to Cart' CssClass="positive" CommandName="Add"
CommandArgument='<%# Eval("ProductDescriptionId") %>'
Visible='<%# showBtn(Eval("Quantity")) %>' />
</div>
</td>
</tr>
</div>
</table>
</div>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
<div class='pager'><a href='#' alt='Previous' class='prevPage'>Prev</a>
<span class='currentPage'></span> of <span class='totalPages'></span> <a
href='#' alt='Next' class='nextPage'>Next</a></div>
Check out http://plugins.jquery.com/project/paginateTable.
It's basically pagination on a html table ( which you can build using a repeater ) using jQuery.
It's easy to use, has customization options.
I used it already, worked just fine.
EDIT
You'd have to build your table with a repeater. I've provided a quick example below:
<table id="myTable">
<tbody>
<asp:Repeater ...>
<ItemTemplate>
<tr><td><%# Eval('Description') %></td></tr>
</ItemTemplate>
</asp:Repeater>
<tbody>
</table>
<div class='pager'>
<a href='#' alt='Previous' class='prevPage'>Prev</a>
<span class='currentPage'></span> of <span class='totalPages'></span>
<a href='#' alt='Next' class='nextPage'>Next</a>
</div>
Your javascript should then call the paginateTable function on this
<script>
$(document).ready(function () {
$('#myTable').paginateTable({ rowsPerPage: 2 });
});
</script>
Repeater and control offers a quick and flexible means of displaying data on a ASPX page. But it offers no paging functionality built in.
However you may do something about that ...
Refer to the following page if you like to figure it out:
http://www.codeproject.com/KB/webforms/Aspnet_Repeater_Control.aspx
You can use PagedDataSource.
Repeater with Paging and Sorting Features
Paging Repeater Control using PagedDataSource