I want to bind a listview control with a datatable , whose column names are not fixed. And i want to display these column names in the page ?
How to achieve this ?
I dont know what exactly you want to do but this is the example of listview that you can set header name whatever you want.
<asp:ListView ID="ListView1" GroupPlaceholderID="group" GroupItemCount="1" ItemPlaceholderID="item" runat="server">
<LayoutTemplate>
<table>
<asp:PlaceHolder runat="server" ID="group"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="item"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px">
<tr>
<td>
<span>
<%# Eval("Id") %>
</span>
</td>
</tr>
<tr>
<td>
Name: <span><%# Eval("Field_name_of_your_DB") %></span><br />
Number: <span><%# Eval("Field_name_of_your_DB") %></span><br />
Date: <span><%# Eval("Field_name_of_your_DB", "{0:MM dd, yyyy}") %></span><br />
Comment: <span><%# Eval("Field_name_of_your_DB") %></span><br />
</td>
</tr>
</table>
</td>
</ItemTemplate>
</asp:ListView>
And, be sure that autogeneratecolumn = false to avoid displaying data twice.
Related
I'm new to web development using .net and am having issues in binding data from business logic to a table. I'm basically trying to populate a table dynamically.
Table in a list view i want to populate
<asp:ListView ID="processList" runat="server"
DataKeyNames="procName" GroupItemCount="1"
ItemType="SerMon.RemoteProcess" SelectMethod="fetchFromQueue">
<EmptyDataTemplate>
<table >
<tr>
<td>No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<EmptyItemTemplate>
<td/>
</EmptyItemTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server"></td>
</tr>
</GroupTemplate>
<ItemTemplate>
<td runat="server">
<table id="myTable" class="table table-striped table-hover ">
<thead>
<tr>
<th>#</th>
<th>Process</th>
<th>Status</th>
<th>Machine</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<asp:Label runat="server" ID="lblId"><%#: Item.ProcName%></asp:Label></td>
<td>
<asp:Label runat="server" ID="Label1"><%#: Item.Procstatus%></asp:Label></td>
<td>
<asp:Label runat="server" ID="Label2"><%#: Item.mcName%></asp:Label></td>
</tr>
<tr>
</tbody>
</table>
</p>
</td>
</ItemTemplate>
</asp:ListView>
Method which is called to populate table
public List<RemoteProcess> fetchFromQueue()
{
List<RemoteProcess> pl = new List<RemoteProcess>();
foreach (CloudQueueMessage message in queue.GetMessages(5, TimeSpan.FromMinutes(1)))
{
Debug.Write(message.AsString);
RemoteProcess m = JsonConvert.DeserializeObject<RemoteProcess>(message.AsString);
pl.Add(m);
//queue.DeleteMessage(message);
}
return pl;
}
The table is generated but theres no data. Also for some odd reason, five tables are generated( This is always equal to the number specified in the getMessage function)
I am not sure if GroupTemplate is required for you in the ListView. The reason you were getting multiple table was that you have defined table header and row both in the item template. The ItemTemplate should have only structure of the item display. The LayoutTemplate should have the structure of the over all layout of how data should look like.
I have changed the ListView as following it make it look like a proper table.
<asp:ListView ID="processList" runat="server"
DataKeyNames="procName"
ItemType="WebApplication1.Models.RemoteProcess" SelectMethod="fetchFromQueue">
<EmptyDataTemplate>
<table>
<tr>
<td>No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<EmptyItemTemplate>
<td />
</EmptyItemTemplate>
<LayoutTemplate>
<table runat="server" id="table1">
<thead>
<tr runat="server">
<th>#</th>
<th>Process</th>
<th>Status</th>
<th>Machine</th>
</tr>
<tr id="itemPlaceholder" runat="server"></tr>
</thead>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server">
<td>1</td>
<td>
<asp:Label runat="server" ID="lblId"><%#: Item.procName%></asp:Label></td>
<td>
<asp:Label runat="server" ID="Label1"><%#: Item.Procstatus%></asp:Label></td>
<td>
<asp:Label runat="server" ID="Label2"><%#: Item.mcName%></asp:Label></td>
</tr>
</ItemTemplate>
</asp:ListView>
Please note here that I have removed the GroupTemplate and setting related to it as I wasn't sure how to group the data.
This should help resolving your issue.
Hello I have following aspx code and when the button inside ItemTemplate is cliked i need to pass the Item.BookID into code behind and I am unsure how to do it as there can be multiple items in the view. Thank you help would be much appreciated.
<asp:ListView runat="server" ID="UserDetailBooks" DefaultMode="ReadOnly" ItemType="WebApplication1.Models.Borrowed" SelectMethod="GetBorrow" DeleteMethod="ReturnBook">
<EmptyDataTemplate>
<h3>No borrowed books!</h3>
</EmptyDataTemplate>
<LayoutTemplate>
<div style="margin-left: auto; margin-right: auto; width: 50%;">
<h4>Books in possesion:</h4>
<table style="border-spacing: 2px;">
<tr id="groupPlaceholder" runat="server">
</tr>
</table>
</div>
</LayoutTemplate>
<GroupTemplate>
<tr>
<td id="itemPlaceholder" runat="server"></td>
</tr>
</GroupTemplate>
<ItemTemplate>
<td><asp:Button runat="server" Text="Return" OnClick="ReturnBook" />
<%#:Item.BookTitle %>
</td>
</ItemTemplate>
</asp:ListView>
You could pass the id in the button attributes?
<asp:Button runat="server" Text="Return" BookID="<%#:Item.BookID %>" OnClick="ReturnBook" />
<%#:Item.BookTitle %>
void ReturnBook(object sender, EventArgs e) {
Button b = sender;
string BookId = b.Attributes["BookID"];
}
I have a webpage that is setup like so:
There is a ListView that has an item for each record in one of our SQL tables. Each of these items has a CollapsiblePanel in it that can be expanded to show more detail about the given record.
My Issue:
When I expand one panel and then wait for it to complete...everything is okay. However, if I try to expand multiple of those collapsiblepanels at once (meaning before the first panel is completely expanded)...only the last panel expands showing its data.
My Question:
Is it possible to have each of these panels expand asynchronously? Seems silly that I have to wait for one panel to extend before I can extend another.
My aspx:
I modified this aspx a little bit by removing unneeded code to make it less confusing.
<asp:UpdatePanel ID="UpdPnlBGList" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<div class="content-box">
<asp:Panel ID="pnlBGResult" runat="server">
<asp:ListView ID="lvSummary" runat="server" ItemPlaceholderID="placeholderBGList"
OnItemDataBound="lvSummary_ItemDataBound" OnItemCommand="lvSummary_ItemCommand">
<LayoutTemplate>
<table runat="server" id="tblList" cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;">
<tr id="placeholderBGList" runat="server">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server">
<td>
<asp:UpdatePanel ID="UpdBgItemTemplate" runat="server" ChildrenAsTriggers="true"
UpdateMode="Conditional">
<ContentTemplate>
<div class="bgList">
<asp:Panel ID="pnlSummary" runat="server">
<table id="tblBgList" runat="server" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;
border-spacing: 0px;">
<tr>
<td class="imageColumn">
<asp:ImageButton ID="imgCollapsible" CssClass="first" ImageUrl="~/Images/branding/plus.gif"
runat="server" CommandName="ExpandCollapse" Style="cursor: pointer; padding-right: 5px;" />
</td>
<td width="600px">
<asp:Label ID="lblBGName" runat="server" Text='<%# Eval("BGName")%>' CssClass="bgName"></asp:Label>
<asp:Label ID="lblDatePosted" runat="server" CssClass="datePosted"></asp:Label>
</td>
<td colspan="2">
<div style="float: right;">
<asp:Label ID="lblAccountNumber" runat="server" CssClass="accountReview"></asp:Label>
<asp:Label ID="lblAccountNumberText" runat="server" CssClass="accountReview"></asp:Label>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td width="600px">
<asp:Label ID="lblBillToAddress" runat="server" Text='<%# Eval("BillToAddress")%>'
CssClass="billToAddress" Style="font-weight: bold;"></asp:Label>
</td>
<td>
<div style="float: right;">
<asp:ImageButton ID="imgViewAuthLetter" ImageUrl="~/Images/branding/document.jpeg"
CssClass="first" runat="server" OnClick="imgViewAuthLetter_Click" />
<asp:LinkButton ID="lnkAuthorizationLetter" runat="server" Text="View authorization letter"
class="link_button" OnClick="lnkAuthorizationLetter_Click" OnClientClick="dirtySuppress();"
OnPreRender="addTrigger_PreRender" />
</div>
</td>
<td width="70px" style="float: right;">
<div style="float: right;">
<asp:HyperLink ID="lnkExportImage" runat="server" ImageUrl="/Images/branding/export.jpg"
CssClass="hiperlinkExport" OnClick="dirtySuppress();" />
<asp:HyperLink ID="lnkExportText" runat="server" Text="Export" CssClass="hiperlinkExport"
OnClick="dirtySuppress(); precheckURL(this.href); return false;" />
</div>
</td>
</tr>
<tr>
<td colspan="4" style="padding: 0px;">
<asp:Panel Style="margin-left: 50px;" ID="pnlDetails" runat="server">
<of:AccountNumberListControl ID="accountNumberList" runat="server"></of:AccountNumberListControl>
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="pnlDetails"
CollapsedSize="0" Collapsed="True" ExpandControlID="imgCollapsible" CollapseControlID="imgCollapsible"
AutoCollapse="False" AutoExpand="False" ScrollContents="false" ImageControlID="imgCollapsible"
ExpandedImage="~/Images/branding/minus.gif" CollapsedImage="~/Images/branding/plus.gif"
ExpandDirection="Vertical" />
</td>
</tr>
<tr>
<td>
</td>
<td colspan="3" style="padding: 0px;">
<div class="itemSeperator" id="divItemSeperator" runat="server">
</div>
</td>
</tr>
</table>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:HiddenField ID="hdfAccountNumberListControlID" runat="server" Value="" />
<asp:HiddenField ID="hdfAccountNumerID" runat="server" Value="" />
</asp:Panel>
</div>
<of:CustomerSetupExportPopInControl ID="customerSetupExportPopIn" runat="server" />
</ContentTemplate>
My codebehind:
This is the code that is executed when you expand the panel. There are several controls that is populated.
private void ExpandBillingGroup(ListViewDataItem item)
{
Label accountNumberLabel;
Label accountNumberText;
HtmlControl itemSeperator;
AccountNumberListControl accountNumberList;
// set properties for fedex account number label and text.
accountNumberLabel = (Label)item.FindControl("lblAccountNumber");
accountNumberLabel.Text = "FedEx account number: ";
accountNumberLabel.CssClass = "fedExAccountNumberLabel";
accountNumberText = (Label)item.FindControl("lblAccountNumberText");
accountNumberText.Text = lvSummary.DataKeys[item.DisplayIndex].Values["FedExAccountNumber"].ToString();
accountNumberText.CssClass = "fedExAccountNumberText";
//set the properties for Export
var lnkExportImage = (HyperLink)item.FindControl("lnkExportImage");
lnkExportImage.Visible = true;
var lnkExportText = (HyperLink)item.FindControl("lnkExportText");
lnkExportText.Visible = true;
//When expanded populate Customer Setup Export control
customerSetupExportPopIn.BillingGroupID = lvSummary.DataKeys[item.DisplayIndex].Values["BillingGroupID"].ToString();
//When expanded populate AccountNumberlistControl
accountNumberList = (AccountNumberListControl)item.FindControl("accountNumberList");
if (accountNumberList != null)
{
//since we make the AccountNumberListControl not visible on collapse we have to make it visible when we expand
accountNumberList.Visible = true;
//Set the properties
accountNumberList.BillingGroupID = lvSummary.DataKeys[item.DisplayIndex].Values["BillingGroupID"].ToString();
accountNumberList.FedExAccountNumber = lvSummary.DataKeys[item.DisplayIndex].Values["FedExAccountNumber"].ToString();
accountNumberList.BillingGroupName = ((Label)lvSummary.Items[item.DisplayIndex].FindControl("lblBGName")).Text;
accountNumberList.BillToAddress = ((Label)lvSummary.Items[item.DisplayIndex].FindControl("lblBillToAddress")).Text;
accountNumberList.FirstItemNeedsToExpand = BillingGroupIsResolved;
accountNumberList.GetListOfAccountNumbers(lvSummary.DataKeys[item.DisplayIndex].Values["BillingGroupID"].ToString(), VendorID);
}
//set the properties for itemSepeartor
itemSeperator = (HtmlControl)item.FindControl("divItemSeperator");
itemSeperator.Attributes.Add("class", "itemSeperatorExpanded");
UpdatePanel upd = (UpdatePanel)item.FindControl("UpdBgItemTemplate");
upd.Update();
}
Thanks,
Holt
EDIT: Fixed grammar and title issues
How do I copy an .aspx ListView (including it's LayoutTemplate and ItemTemplate) from the aspx.cs file? The .aspx.cs uses DataBind() to display the values onto the page.
so essentially I want to turn this:
<asp:ListView ID="EvalAnswerList" OnItemDataBound="EvalAnswerList_ItemDataBound" runat="server">
<LayoutTemplate>
<table cellpadding="2" width="640px" border="1" runat="server" class="altRows" id="tblProducts">
<tr id="Tr1" runat="server">
<th id="Th1" runat="server">Question
</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr2" runat="server">
<td>
<asp:Label ID="QuestionTextLabel" Font-Bold="true" runat="server" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
Into this:
<asp:ListView ID="EvalAnswerList" OnItemDataBound="EvalAnswerList_ItemDataBound" runat="server">
<LayoutTemplate>
<table cellpadding="2" width="640px" border="1" runat="server" class="altRows" id="tblProducts">
<tr id="Tr1" runat="server">
<th id="Th1" runat="server">Question
</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr2" runat="server">
<td>
<asp:Label ID="QuestionTextLabel" Font-Bold="true" runat="server" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:ListView ID="EvalAnswerList" OnItemDataBound="EvalAnswerList_ItemDataBound" runat="server">
<LayoutTemplate>
<table cellpadding="2" width="640px" border="1" runat="server" class="altRows" id="tblProducts">
<tr id="Tr1" runat="server">
<th id="Th1" runat="server">Question
</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr2" runat="server">
<td>
<asp:Label ID="QuestionTextLabel" Font-Bold="true" runat="server" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
This copying has to be done in the aspx.cs file. Obviously it won't be exactly like this but I wanted to give you an idea of what I am trying to do.
I've tried saying:
ListView test = new ListView();
PlaceHolder.Controls.Add(test);
test = EvalAnswerList;
and then trying to use this in the test.DataBind() but it won't work.
You can use a webusercontrol, try below steps
Step 1: Create a usercontrol and put your list view in that
<%# Control Language="C#" AutoEventWireup="true" CodeFile="CustomListView.ascx.cs"
Inherits="CustomListView" %>
<asp:ListView ID="EvalAnswerList" OnItemDataBound="EvalAnswerList_ItemDataBound"
runat="server">
<layouttemplate>
<table cellpadding="2" width="640px" border="1" runat="server" class="altRows" id="tblProducts">
<tr id="Tr1" runat="server">
<th id="Th1" runat="server">Question
</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</layouttemplate>
<itemtemplate>
<tr id="Tr2" runat="server">
<td>
<asp:Label ID="QuestionTextLabel" Font-Bold="true" runat="server" />
</td>
</tr>
</itemtemplate>
</asp:ListView>
enter code here
Setp 2: Create a public DataSet/DataTable to bind listview in page load
public DataSet dsSource = new DataSet();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
EvalAnswerList.DataSource = dsSource;
EvalAnswerList.DataBind();
}
}
enter code here
Step 3: Now add reference to usercontrol in your aspx page
<%# Reference Control="CustomListView.ascx" %>
enter code here
Step 4: At last, now you can use that list view multiple times in you aspx. Take a panel or div, then add usercontrol to where you want.
CustomListView clv = new CustomListView();
clv.dsSource = ds;//dataset/datatable to bind listview
div.Controls.Add(clv);
gud luck!
In the end, I used a repeater control and it worked. Thanks!
I'm creating one html table. I want to hide the table row. I'm putting the attributes runat=server and id for the particular row, but the row has client side code in it similar to the following code.
<% if ((strFlag=="d") || (strApprvdFlag=="y")) {%>
After call this line, I got this error.
Code blocks are not supported in this context in asp.net control.
Below is my sample code:
<table>
<tr colspan="4" ID="trMedical" scriptrunat="server">
<td style="WIDTH: 45px;HEIGHT: 12px" align="left" class="LabelTaxText" width="45"><b>G
</b>
</td>
<td style="WIDTH: 182px;HEIGHT: 12px" class="LabelTaxText" align="left" width="182"
colSpan="2">Medical
</td>
<td style="WIDTH: 81px; HEIGHT: 12px" align="right" class="LabelTaxText" width="81">
<asp:textbox onchange="onChangeFlag(),intOnly(this);" onkeyup="intOnly(this);" onkeypress="return CheckNumericWithOutDecimals(event)"
id="TxtMedical" tabIndex="24" runat="server" Width="96px" MaxLength="12" style="Z-INDEX: 0"></asp:textbox>
</td>
<% if ((strFlag=="d") || (strApprvdFlag=="y")) {%>
<td class="LabelTaxText" style="WIDTH: 107px; HEIGHT: 12px" align="right" width="107">
<asp:textbox onchange="onChangeFlag(),intOnly(this);" onkeyup="intOnly(this);" onkeypress="return CheckNumericWithOutDecimals(event)" id="TxtMedicalProof" tabIndex="24" onblur="charAlert(TxtMedical,TxtMedicalProof)" runat="server" MaxLength="12" Width="96px">
</asp:textbox>
</td>
<% } %>
<% if (strApprvdFlag=="y") {%>
<td class="LabelTaxText" style="WIDTH: 68px; HEIGHT: 24px" align="right" width="68">
<asp:textbox id="TxtMedicalApproved" tabIndex="24" runat="server" MaxLength="12" Width="96px"></asp:textbox>
</td>
<td class="LabelTaxText" style="WIDTH: 43px">
<asp:Label ID="lblMedicalRemarks" Runat="server"></asp:Label>
</td>
<% } %>
</tr>
</table>
When you add a runat='server' to an HTML control you change the rendering and code blocks aren't supported inside. So if there are properties you need to change (style? class?) you probably have to instead of doing this:
<tr id='myrow' runat='server'>
<td>
your code here
</td>
</tr>
Do something like this:
<tr id='myrow' <%= GetRowProperties() %>>
<td>
your code here
</td>
</tr>
Note: runat='server' removed from tr. Then in your codebehind you can do something like this:
protected string GetRowProperties()
{
return "class='myclass'"; // something like this
}
You can use data binding to control the visibility of a control. That should solve your problem.
<tr runat="server">
some content...
<asp:PlaceHolder runat="server"
visible='<%# (strFlag=="d") || (strApprvdFlag=="y") %>'>
This content will only be rendered if strFlag is "d" or "y"
</asp:PlaceHolder>
more content...
</tr>
On your OnLoad method, you will need to call the DataBind() method to either the PlaceHolder, or any control that contains it, like the tr or even Page:
protected override void OnLoad(EventArgs e) {
base.OnLoad(e);
Page.DataBind();
}