Is there a way to display gridview as "gallery view" instead of plain "list view". For example like ebay(you can toggle the view 1.list view, 2.gallery view, 3. side by side view). Any asp.net controls or jQuery controls will do the job for me. Please suggest.
One way to accomplish this would be to use the ListView server control to make a template that looks like the "Gallery View" you have in mind.
<asp:ListView runat="server" ID="ListView1"
DataSourceID="SqlDataSource1"
GroupItemCount="5">
<LayoutTemplate>
<table runat="server" id="table1">
<tr runat="server" id="groupPlaceholder">
</tr>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr runat="server" id="tableRow">
<td runat="server" id="itemPlaceholder" />
</tr>
</GroupTemplate>
<ItemTemplate>
<td runat="server">
<%-- Data-bound content. --%>
<asp:Label ID="NameLabel" runat="server"
Text='<%#Eval("Name") %>' />
</td>
</ItemTemplate>
</asp:ListView>
Related
I thought this would be eaiser, but I can't seem to find a simple solution for it. I have a listview:
<asp:ListView ID="LVSearchResults" runat="server" DataSourceID="DSSearchResults">
<ItemTemplate>
<tr style="">
<td>
<asp:Label ID="PostDateLabel" runat="server" Text='<%# Eval("post_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>
<th runat="server">Found Rows</th>
</tr>
<tr id="Tr2" runat="server" style="">
<th id="Th1" runat="server">Post Date</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr id="Tr3" runat="server">
<td id="Td2" runat="server" style="">
<asp:DataPager ID="DataPager1" runat="server" PageSize="15">
<Fields>
<asp:NumericPagerField ButtonType="Link" ButtonCount="10" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
My Datasource:
<asp:Sqldatasource ID="DSSearchResults" runat="server" ConnectionString="<%$ ConnectionStrings:CDRConnectionString %>"
SelectCommand="usp_Search"
SelectCommandType="StoredProcedure"
>
</asp:Sqldatasource>
What I would like to do is display the count of records found. So the list view would appear like:
Found 123 records
Post Date
6/1/13
6/2/13
etc.
I tried playing with the Container, but that didn't seem to offer anything, googled, also couldn't find much. Any advice?
Just place a literal (better than your label) above the Listview (outside the markup) and set its tekst value when DataBinding.
You can try the following:
HtmlTableCell th = (HtmlTableCell)LVSearchResults.FindControl("Th1");
th.InnerText = "Found " + LVSearchResults.Items.Count.ToString() + " items.";
But because you are using the DataPager control, it will always return 15. So maybe you want to update the cell using data from the datasource instead. Maybe if you show the DataSource I can tell you how to get it from it.
it's so easy
Use the code below in your codebehind to get all records count
Ctype (listview1.FindControl ("DataPager1"),DataPager).TotalRowCount
Instead of listview1 , just write the ID of ur listview . . .
Good luck
Here is what DataGrid does to my table:
<table id="ContentPlaceHolder1_articleList" cellspacing="0" style="border-width:0px;border-collapse:collapse;" headertext="File Name" rules="all">
How can I remove the unnecessary info from the table?
I do not want cellSpacing, anything in the style. I take care of all of thise with CSS and because these are inline it is overriding my CSS declarations.
I don't care if the ID, or rules="all" (not even sure what that does) or the HeaderText is present, but I would love to get rid of the rest.
As Curt suggested, you can use a Repeater control for more control over the output. Another option would be the ListView control, which gives you more options than the the Repeater does.
<asp:ListView ID="ListView1" runat="server">
<LayoutTemplate>
<table class="myclass">
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("ColumnName", "{0:#,###} bytes") %></td>
</tr>
</ItemTemplate>
</asp:ListView>
If you really want full control over your table, I would recommend using a Repeater instead. Unlike the DataGrid control, the Repeater control doesn't render any HTML which isn't inside the ItemTemplate giving you full control over your rendered code.
<table>
<tr>
<td>Column Header</td>
</tr>
<asp:repeater id="rep" runat="server">
<itemtemplate>
<tr>
<td>
<%#eval("ColumnName") %>
</td>
</tr>
</asp:repeater>
</table>
As the the Eval/DataItem will give object/String return value. In
order to convert into 3,546 bytes output, it is required to convert it into
integer. For that onitemdatabound event registration will be required.
Mark Up
<asp:ListView ID="ListView1" runat="server" onitemdatabound="rpt_ItemDataBound">
<LayoutTemplate>
<table class="myclass">
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><asp:Label ID="lbl" runat="server" ></asp:Label></td>
</tr>
</ItemTemplate>
</asp:ListView>
Code Behind
protected void rpt_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item)
{
Label lbl= (Label)e.Item.FindControl("lbl");
lbl.Text = String.Format("{0:#,### bytes}",
Convert.ToInt32(((YourClassName)e.Item.DataItem).YourProperty);
}
}
I have an ASP.NET GridView. Now I am adding the SortExpression property tothe <TemplateField> tags, to make specific columns sortable.
Now, one of the columns has some markup content to be added in the header. The problem is, SortExpression does not work if there is a <HeaderTemplate> tag in a <TemplateField>, you have to put it inside the HeaderText property of <TemplateField>. But, all the HTML content does not work properly if I dump it inside the HeaderText property.
<asp:TemplateField SortExpression="FK_TesterID" ItemStyle-Width="300px" FooterStyle-Width="300px" ItemStyle-HorizontalAlign="Center" FooterStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center">
<HeaderTemplate>
<table width="100%">
<tr>
<td align="center">
Tester
</td>
</tr>
<tr>
<td>
<asp:DropDownList ID="cmbTestersHeader" ClientIDMode="Static" runat="server" Width="300px" DataSource='<%# PopulateTesterNames() %>' DataTextField="FullName" DataValueField = "PK_ID" Visible="false" AutoPostBack="true" OnSelectedIndexChanged="cmbTestersHeader_SelectedIndexChanged" ToolTip="Bulk Assign Testers !" ></asp:DropDownList>
</td>
</tr>
</table>
</HeaderTemplate>
So you can see, if I put the entire <HeaderTemplate> property inside a headertext, it doesn't work.
But I want to have both functionalities. Can anyone help?
Then you need to provide a control in your HeaderTemplate with CommandName="Sort", for example a LinkButton.
<HeaderTemplate>
<table width="100%">
<tr>
<td align="center">
<asp:LinkButton ID="LbSort" runat="server" CommandName="Sort" Text="Sort" />
</td>
</tr>
<tr>
<td>
<asp:DropDownList ID="cmbTestersHeader" ClientIDMode="Static" runat="server" Width="300px"
DataSource='<%# PopulateTesterNames() %>' DataTextField="FullName" DataValueField="PK_ID"
Visible="false" AutoPostBack="true" OnSelectedIndexChanged="cmbTestersHeader_SelectedIndexChanged"
ToolTip="Bulk Assign Testers !">
</asp:DropDownList>
</td>
</tr>
</table>
</HeaderTemplate>
This is a quite old thread I have stumbled over while trying to solve exactly that described problem but the solution provided here didn't worked for me. If you have a Sorting method defined for the GridView then
<asp:LinkButton ID="LbSort" runat="server" CommandName="Sort" Text="Sort" />
will call that method
protected void GridView_Sorting(object sender, GridViewSortEventArgs e)
{
dt.DefaultView.Sort = e.SortExpression;
but e.SortExpression will be null and no sorting is happening. You have to first pass the Column's name through the CommandArgument of the LinkButton. Only then it worked in my case!
<asp:LinkButton ID="LbSort" runat="server" CommandName="Sort" CommandArgument="ColumnName" Text="Sort" />
I am trying to update each DataList row without having to PostBack the entire DataList.
Basically I want to go with
<DataList>
<ItemTemplate>
<UpdatePanel>
</UpdatePanel>
</ItemTemplate>
</DataList>
instead of
<UpdatePanel>
<DataList>
<ItemTemplate>
</ItemTemplate>
</DataList>
</UpdatePanel>
Is this possible, or better - does it make any sense?
Yes, It is possible, I personally do that in some situation.
But you must be aware that with an UpdatePanel is not a perfect solution. As an example, the client sent the complete ViewState of the page. So there will be a gain, but not as big as you might expect.
I suggest you to read the UpdatePanel Considerations section in this link for more information.
Update :
You must also watch how you setup you template, example : you cannot put a table row in a update panel.
Don't do this :
<asp:DataList>
<HeaderTemplate>
<Table>
</HeaderTemplate>
<ItemTemplate>
<UpdatePanel>
<tr>
<td>...</td>
<td>...</td>
</tr>
</UpdatePanel>
</ItemTemplate>
<FooterTemplate>
</Table>
</FooterTemplate>
</asp:DataList>
But you cant do :
<asp:DataList>
<HeaderTemplate>
<Table>
</HeaderTemplate>
<ItemTemplate>
<UpdatePanel>
<tr>
<td>
<UpdatePanel>
...
</UpdatePanel>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</Table>
</FooterTemplate>
</asp:DataList>
I'm just beinning basic data driven ASP.NET webforms design. I have the first part of a form working, but I don't know what to do next.
Please see this screenshot of what I have created so far: http://www.twitpic.com/2gnmr
I need help knowing what kind of HTML element to use in the master list, and what event/trigger on that element to use to fire off the "get child records for this selected item" sequence?
Also, is a ListView even the correct way to present the master list? At this time, I'm not trying to provide any editing features; I'll get to that later, I guess.
Should I use some other ASP.NET data control rather than hand-coding a listview like I am doing?
I don't want to see an actual "Select" link item beside each Customer Name (that looks goofy). I want the Customer Name to be the link to click on.
So, you can see in my code below that I have a ListView to present a list of CustomersWithOpenOrders. But, it's just a static list, so how do I make the Company Name label clickable, and what else will I need to make it fire back to some code-behind to fetch the child records. I already have a code-behind method to get child records for a passed-in CustomerNumber into a DataTable, and I think I would know how to bind that to a grid or listview for child records, but I do not know how to pass the CustomerNumber from the master ListView to the method from the UI form.
<asp:ListView ID="ListView1" runat="server">
<LayoutTemplate>
<table cellpadding="2" border="0" ID="tbl1" runat="server">
<tr id="Tr1" runat="server" class="lvHeader">
<th id="Th1" runat="server">Customer</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr2" runat="server">
<td>
<asp:Label ID="label2" class="FirstLine" runat="server" Text='<%# Eval("company") %>' />
<br />
<div class="SecondLine">
<asp:Label ID="labelCustNo" runat="server" Text='<%# Eval("custno") %>'/>
<asp:Label runat="server" Text='Ph: '></asp:Label>
<asp:Label ID="label3" runat="server" Text='<% # Eval("phone") %>' />
</div>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
I personally haven't found a case where the ListView can't solve my needs. If you want to create a customer selection style list you can use a link button for binding.
<asp:ListView runat="server" id="CustomersList" ItemCommand="CustomersList_ItemCommand">
<LayoutTemplate>
<table cellpadding="2" border="0" ID="tbl1" runat="server">
<tr id="Tr1" runat="server" class="lvHeader">
<th id="Th1" runat="server">Customer</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr2" runat="server">
<td>
<asp:LinkButton ID="link1" class="FirstLine" runat="server" Text='<%# Eval("company") %>' CommandName="Select" />
<br />
<div class="SecondLine">
<asp:Label ID="labelCustNo" runat="server" Text='<%# Eval("custno") %>'/>
<asp:Label runat="server" Text='Ph: '></asp:Label>
<asp:Label ID="label3" runat="server" Text='<% # Eval("phone") %>' />
</div>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:ListView runat="server" ID="OrderList">
<!-- Child Rows implementation -->
</asp:ListView>
Then you would need to bind the event to the ListView.ItemCommand.
protected void CustomersList_ItemCommand(object sender, ListViewCommandEventArgs e)
{
if (e.CommandName = "Select")
{
if (e.Item.ItemType != ListViewItemType.DataItem) return;
var dataItem = e.Item as ListViewDataItem;
if (dataItem == null) return;
var customer = dataItem.DataItem as Customer;
if (customer == null) return;
this.OrdersList.DataSource = GetChildRecords(customer.ID);
this.OrdersList.DataBind();
}
}