How to add paging capabilities to the Repeater control in ASP.Net? - c#

I have an asp.net Repeater control .I have to display only 5 rows in the repeater. I searched about it in Google but most of the resources are talking about how to do it with DataSet. In my case, I am using SqlDataSource. So I can have paging in this Repeater control?
ASP.NET Code:
<asp:Repeater ID="Repeater3" runat="server" DataSourceID="SqlDataSource3">
<HeaderTemplate>
<div>
<table border="1">
<thead>
<tr>
<td colspan="3">
<center> <strong>Safety Quizzes Record</strong> </center>
</td>
</tr>
<tr>
<td>
<center> <strong>Quiz Title</strong> </center>
</td>
<td>
<center> <strong>Date & Time</strong> </center>
</td>
<td>
<center> <strong>Score</strong> </center>
</td>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<p>
<%# Eval("Title") %>
</p>
</td>
<td>
<p>
<%# Eval("DateTimeComplete") %>
</p>
</td>
<td>
<p>
<%# Eval("Score") %>
</p>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</div>
</FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource3" runat="server"
ConnectionString="<%$ ConnectionStrings:testConnectionString %>" SelectCommand="SELECT dbo.Quiz.Title, dbo.UserQuiz.DateTimeComplete, dbo.UserQuiz.Score
FROM dbo.employee INNER JOIN
dbo.UserQuiz ON dbo.employee.Username = dbo.UserQuiz.Username INNER JOIN
dbo.Quiz ON dbo.UserQuiz.QuizID = dbo.Quiz.QuizID
WHERE (dbo.employee.Username = #Username)">
<SelectParameters>
<asp:Parameter Name="Username" />
</SelectParameters>
</asp:SqlDataSource>
UPDATE:
What I want is showing only 5 items in the Repeater and the others will be listed on the other pages of the Repeater. So how I can have Pagining with SqlDataSource as mentioned above.

The Repeater control does not support paging out-of-the-box.
You could however implement it but it would require you to manually code it.
I would like to recommend you to change the Repeater control for the ListView control
Differences:
Repeater. This control does not support paging, updating, inserting or deleting operations out-of-the-box, if you want these features you would need to manually code them.
ListView. This is the most flexible of all data-bound controls. It's based on templates like the Repeater and DataList controls. It does support CRUD operations automatically mapping the operations agains your data source control. It does support server paging, and you can customize pretty much everything
BTW, since you are using a SqlDataSource, you would have to manually add paging code to your queries or store procedures, you could change that behavior if you use a LinqDataSource or an EntityDataSource
This is a simplified ListView markup:
<asp:ListView runat="server" ID="lv"
DataSourceID="lds" DataKeyNames="emp_id"
EnableModelValidation="false"
EnablePersistedSelection="false"
>
<LayoutTemplate>
<br />
<br />
A static header
<div runat="server" id="itemPlaceHolder"></div>
<br />
<asp:DataPager runat="server" PageSize="4">
<Fields>
<asp:NextPreviousPagerField
ButtonType="Button"
ShowFirstPageButton="true"
ShowLastPageButton="true"
/>
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<div style="background-color:Gray">
First Name
<div><asp:Label runat="server" ID="lbl" Text='<%# Eval("fname") %>'></asp:Label></div>
<br />
<asp:GridView ID="GridView1" runat="server" DataSource='<%# Eval("Achivements") %>' />
<br />
<asp:LinkButton ID="LinkButton1" Text="Select" CommandName="Select" runat="server" />
<asp:LinkButton ID="LinkButton2" Text="Edit" CommandName="Edit" runat="server" />
<asp:LinkButton ID="LinkButton4" Text="Delete" CommandName="Delete" runat="server" />
</div>
</ItemTemplate>
<ItemSeparatorTemplate>
<hr />
</ItemSeparatorTemplate>
</asp:ListView>

Please use the PagedDataSource shown at link http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.pageddatasource.aspx

Related

Display repeater data horizontally

In continuation to my last question, I was suggested to use Repeater for displaying data fetched from SQL Db in horizontal layout.
https://stackoverflow.com/questions/25447351/asp-net-c-sharp-customized-gridview/25458682#25458682
As per suggestion I implemented a repeater control. The data was displayed in horizontal layout but only second column fetched from the DB.
How to get the first column too:
<asp:Repeater ID="RepDetails" runat="server">
<HeaderTemplate>
<asp:Literal ID="litRowStart" runat="server"></asp:Literal>
<td>
<asp:Label ID="lblExpID" runat="server" Text='<%#Eval("Exp_ID") %>' Font-Bold="true" />
</td>
<asp:Literal ID="litRowEnd" runat="server"></asp:Literal>
</HeaderTemplate>
<ItemTemplate>
<asp:Literal ID="litRowStart1" runat="server"></asp:Literal>
<td>
<asp:Label ID="lblExpAmt" runat="server" Text='<%#Eval("Amt_Allocated") %>' Font-Bold="true" />
</td>
<asp:Literal ID="litRowEnd1" runat="server"></asp:Literal>
</ItemTemplate>
</asp:Repeater>
Create your repeater like this:
<table>
<tr>
<asp:Repeater ID="repTest" runat="server">
<ItemTemplate>
<td>
<div>
<b>
<%#Eval("NameofColumnYOuWantToShowAsHeader") %>
</b>
</div>
<div>
<%#Eval("YourColumnValue") %>
</div>
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
For more information about repeater:
Repeater Insert, Update, Delete in asp .net
Try this one using AlternateingItemTemplate:
<asp:Repeater ID="RepDetails" runat="server">
<ItemTemplate>
<td>
<asp:Literal ID="litRowStart" runat="server"></asp:Literal>
<asp:Label ID="lblExpID" runat="server" Text='<%#Eval("Exp_ID") %>' Font-Bold="true" />
<asp:Literal ID="litRowEnd" runat="server"></asp:Literal>
</td>
</ItemTemplate>
<AlternatingItemTemplate>
<td>
<asp:Literal ID="litRowStart1" runat="server"></asp:Literal>
<asp:Label ID="lblExpAmt" runat="server" Text='<%#Eval("Amt_Allocated") %>' Font-Bold="true" />
<asp:Literal ID="litRowEnd1" runat="server"></asp:Literal>
</td>
</AlternatingItemTemplate>
</asp:Repeater>
Assuming that you're getting 2 rows in your datasource.

asp.net web application and c# code to control the repeaters.

I have been trying to write c# code in .cs file to control the repeaters.
I donot know how to use entity model to get the data from table and execute using repeaters into categories to subcategories...
here is HTML cod :
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" >
<ItemTemplate>
<table>
<tr>
<td style="height:50px">
<asp:Label ID="lbl1" runat="server"> <%#Eval("ForumName") %> </asp:Label></td>
<td> By : <asp:Label ID="lbl2" runat="server"> <%#Eval("CeatedBy") %></asp:Label></td>
<td> on <asp:Label ID="lbl3" runat="server"> <%#Eval("DateCreated") %></asp:Label></td> <br /> <br /> </tr>
</table></ItemTemplate>
</asp:Repeater>
<asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource2" >
<ItemTemplate>
<table>
<tr>
<td> <asp:Label ID="lbl4" runat="server" selectcommand="SELECT [ThreadName] FROM [Threads]" > <%#Eval("ThreadName") %></asp:Label></td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ForumConnectionString %>" SelectCommand="SELECT [ThreadName] FROM [Threads]" ></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ForumConnectionString %>" SelectCommand="SELECT [ForumName], [CeatedBy], [DateCreated], [IsActive] FROM [Forum1]"></asp:SqlDataSource>
I have to put the thread name below the particular forum...! and so i am not able to figure out the c# code for it by using entity model..!
awaiting for the solution..
thanks ,
Jay
You want to use entity framework to bind your data against those repeaters in codebehind file ?

Displaying search results in a Website

I am working on a website where i need to search for items from database and display it in page.I am using Datalist for displaying all the items .Now i need to display all the items according to some category.For example if i search for a two-wheeler it may have many categories or manufacturer's.Now I want to display it separately according to the categories.I can use many datalist to do that,but it will slow down the site.Instead which control can i use to do this.I searched the web but got no idea.So please give me sugessions to go about it.Any sugessions will be appreciated.
Code:
<asp:DataList ID="Dlitems" runat="server" RepeatDirection="Horizontal" RepeatColumns="4"
CellPadding="0" CellSpacing="15">
<ItemTemplate>
<table>
<tr>
<td>
<asp:ImageButton ID="ImgbtnProductImage" CssClass="imgdisp" ImageUrl='<%# Eval("ImagePath") %>'
CommandArgument='<%#Eval("ProductCode") %>' runat="server" CommandName="cmdView" />
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td width="20px"></td>
<td>
<img src="../Database/images/inr.jpg" alt="addtocart" />
<asp:Label ID="lblproductprice" runat="server" Text='<%# Eval("Price") %>' CssClass="lbl" />
</td>
<td>
<asp:ImageButton ID="imgbtnaddtocart" runat="server" Height="25px" Width="25px" ImageUrl="~/Database/images/addtocart.JPG"
ToolTip="Add to Cart" CommandArgument='<%#Eval("ProductCode")+","+ Eval("ProductName")+","+ Eval("ImagePath")+","+ Eval("Price")+","+ Eval("LongDescription") %>'
CommandName="addtocart" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
You can take benefit of gridview.
Bind you gridview data.
And letter merge the rows.
For an example you can use the below link
http://www.codeproject.com/Articles/34337/How-to-merge-cells-with-equal-values-in-a-GridView
Edit 1
Some links
How to display group data separately using DataList in ASP.NET?
http://aspnettuts.wordpress.com/2010/10/21/asp-net-repeater-group-recordsdata-delete-selected-rows/
You should go for a Repeater control.
Example on Repeater
<asp:Repeater runat="server" ID="Repeater1">
<ItemTemplate>
<asp:ImageButton ID="ImgbtnProductImage" CssClass="imgdisp" ImageUrl='<%# Eval("ImagePathForTwoWheeler")%> + <%# Eval("ImagePathForCategory") %>'
CommandArgument='<%#Eval("ProductCode") %>' runat="server" CommandName="cmdView" />
</ItemTemplate>
</asp:Repeater>

How to add/read items in ASP.NET

I have a set textboxes where the user enters something and I use them when they click Submit. I need to add a button that lets them add another identical set of textboxes on the fly, enter data into those and then when the submit button is pressed I need to grab the value from both sets. The amount of added sets of items can be unlimited.
What's the best way to handle something like this in ASP.NET/C#?
I've looked around and have basically only gotten that you can try to use JQuery on the front end which leaves the backend a mess or you can try to use a GridView and rebind it every time with new items which can get messy.
Any better/easier way to do this?
Thanks for the help.
Use a Repeater control for the first set of text boxes, and have it repeat for each extra listing.
Here's my comment control repeater. It's a little arcane, as it was the first control I ever made in asp.net, but it should get you going.
<asp:Repeater runat="server" ID="repeater"
onitemdatabound="repeater_ItemDataBound"
>
<HeaderTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
</HeaderTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
<ItemTemplate>
<tr id="trContents" runat="server"><td>
<table id="tableComment" runat="server"
width="100%" style="border-color:Black; border-width:1px; border-style:solid;background-color:#EEEE99">
<tr><td id="tdHeader" runat="server"
style="border-color:Black; border-width:1px; border-style:solid;padding: 5px">
<table width="100%" id="tableHeader" runat="server">
<tr>
<td>
<asp:Label ID="headerText" runat="server"
Text="<%# GetHeader((CommentRecord)Container.DataItem) %>" />
</td>
<td style="text-align:right"> <%-- OnClientClick="aspnetForm.target ='_blank';" --%>
<asp:Button ID="btnEdit" runat="server" Text="Edit"
PostBackUrl="<%$ AppSettings:TextEditor %>"
/>
<asp:Button ID="btnReply" runat="server" Text="Reply"
PostBackUrl="<%$ AppSettings:TextEditor %>"
/>
</td>
</tr>
</table>
</td></tr>
<tr><td style="border-color:Black; border-width:1px; border-style:solid;background-color:#FFFFF0;padding: 10px">
<%# ((CommentRecord)Container.DataItem).Text %>
</td></tr>
<tr><td>
<table width="100%"><tr>
<td style="text-align:left">
<asp:Button ID="btnDelete" runat="server" Text="Delete"
CausesValidation="False" />
</td>
<td style="text-align:right">
<asp:Label ID="footer" runat="server" Text="<%# GetFooter((CommentRecord)Container.DataItem) %>" />
</td>
</tr></table>
</td></tr>
</table>
<asp:PlaceHolder ID="placeHolder" runat="server" />
</td></tr>
</ItemTemplate>
</asp:Repeater>
What I usually do in these cases is have Javascript that handles the client-side dynamic creation of additional textboxes, then before I submit the values, have all the data collected into a JSON object and save the JSON string into a <asp:HiddenField> control that ASP.NET can read and parse. This isn't a perfectly clean approach, but it is the best thing I have found so far.
I would create the textboxes using jQuery (assigning them a unique id) and then get the values on the server from the Request.Form key/value collection. This would be a rather simple solution.
I would recommend going the GridView way, and bind it to a DataSource object, e.g. ObjectDataSource. Clicking the add button should add an empty row to the data source, and this empty row will automatically be drawn by the GridView. When everything works you can wrap in an UpdatePanel to achieve smooth refresh when adding rows.

Paging in Repeater

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

Categories