Is there a way to access the "th", in the code behind. I would like to add padding to the header depending on the item value.
<LayoutTemplate>
<table runat="server" >
<tr runat="server">
<td runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="0" class="UserLayoutTbl">
<tr runat="server" style="">
<th runat="server" width="140" align="left">
Date</th>
<th runat="server" width="140" align="left">
Ref. No.</th>
<th runat="server" width="270" align="left">
Description</th>
<%-- <th runat="server" width="90" align="right" style = '<%# GetAmountLabelStyle() %>'>
Amount</th>--%>
<th id="Th1" runat="server" width="90" align="right">
Amount</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
First, give an ID to the element you want to change. After DataBind of the ListView, you can access the control by its ID using the FindControl method of the ListView. Then, you can convert the returned control to HtmlTableCell to proper handle it:
// thDate is the <th> ID
HtmlTableCell thDate = lstItems.FindControl("thDate") as HtmlTableCell;
Related
I'm trying to learn to use listviews instead repeaters all the time with Jquery datatables for more functionality but I'm having a hard time trying to bind it with 0 values in database
Here's my code
<asp:ListView ID="lstArtigos" runat="server" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1">
<LayoutTemplate>
<table id="tblArtigos" class="table table-bordered dataTable">
<thead class="thead-dark">
<tr>
<th style="width: 20px;">ID</th>
<th style="width: 120px">Ref. Cliente</th>
<th style="width: 100px">Ref. Interna</th>
<th style="width: 100px">Nome</th>
<th style="width: 100px">Estado</th>
<th style="width: 100px">Logística</th>
<th style="width: 100px">Info Logística</th>
<th style="width: 100px">Data Criação</th>
<th style="width: 10px;">Editar</th>
<th style="width: 10px;">Validar</th>
<th style="width: 10px;">Rejeitar</th>
</tr>
</thead>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<asp:Label ID="lblIdArtigo" Text="<%# Eval("IdArtigo") %>"></asp:Label></td>
<td>
<asp:Label ID="lblRefCliente" Text="<%# Eval("ReferenciaCliente") %>"></asp:Label></td>
<td>
<asp:Label ID="lblRefInterna" Text="<%# Eval("ReferenciaInterna") %>"></asp:Label></td>
<td>
<asp:Label ID="lblNome" Text="<%# Eval("Nome") %>"></asp:Label></td>
<td>
<asp:Label ID="lblEstado" Text="<%# Eval("EstadoArtigo") %>"></asp:Label></td>
<td>
<asp:Label ID="lblAprovadoLogistica" Text="<%# Eval("AprovadoLogistica") %>"></asp:Label></td>
<td>
<asp:Label ID="lblInformacaoLogistica" Text="<%# Eval("InformacaoLogistica") %>"></asp:Label></td>
<td>
<asp:Label ID="lblDataCriacao" Text="<%# Eval("DataCriacao") %>"></asp:Label></td>
<td class="text-center">
<asp:ImageButton ImageUrl="/Images/Buttons/edit.png" CssClass="" Width="25" runat="server" />
</td>
<td class="text-center">
<asp:ImageButton ImageUrl="/Images/Buttons/success.png" CssClass="" Width="25" runat="server" />
</td>
<td class="text-center">
<asp:ImageButton ImageUrl="/Images/Buttons/x-button.png" CssClass="" Width="25" runat="server" />
</td>
</ItemTemplate>
</asp:ListView>
and in codebehind I bind it with datatable even if it comes empty from database it should appear the jquery message like it does on repeater
private void BindArtigos(int id)
{
lstArtigos.DataSource = Requisicao.GetAll(id);
lstArtigos.DataBind();
}
Also there is no problem with Jquery plugin cause I had a repeater before writing the listview and was working properly
EDIT:
Added the missing columns on table header, still shows nothing and no errors on console
The problem is that you have more cells in the body of the table that in the thead. They must be the same.
<thead class="thead-dark">
<tr>
<th style="width: 20px;">ID</th>
<th style="width: 120px">Ref. Cliente</th>
<th style="width: 100px">Ref. Interna</th>
<th style="width: 100px">Nome</th>
<th style="width: 100px">Logística</th>
<th style="width: 100px">Estado</th>
<th style="width: 10px;">Editar</th>
<th style="width: 10px;">Validar</th>
<th style="width: 10px;">Rejeitar</th>
//add these
<th># 1</th>
<th># 2</th>
</tr>
</thead>
<td>
<asp:Label ID="lblIdArtigo" Text="<%# Eval("IdArtigo") %>"></asp:Label></td>
replace this line with
<td>
<asp:Label ID="lblIdArtigo" Text='<%# Eval("IdArtigo") %>'></asp:Label></td>
and check if it shows data
check out this article
https://www.c-sharpcorner.com/UploadFile/9de7db/listview-control-in-Asp-Net/
I have a gridview which is working fine (i.e. it is loading 4 rows) with bound controls. this grid view has 4 rows:
Ex: <asp:BoundField HeaderText="Classification" DataField="ClassType" />
but when I changed the gridview with itemtemplate then my gridview is loading 4 times
Structure:-
Gridview
- template field
-- Item template
<%# Eval("ClassType")%>
on code behind I am loading this via: (on page_load)
gvResultSet.DataSource = ds.Tables[0];
gvResultSet.DataBind();
Code
<asp:GridView ID="gvResultSet" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table class="tb">
<thead>
<tr>
<th>
Classification
</th>
</tr>
</thead>
<tbody>
<tr class="record">
<td>
<%# Eval("ClassType")%>
</td>
</tr>
</tbody>
</table>
</ItemTemplate>
</asp:TemplateField>
Set gridview's property AutoGenerateColumns="false". This will solve your issue.
Update
My Recommendation is to use Repeater Control.
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table class="tb">
<thead>
<tr>
<th>
Status
</th>
<th>
Name
</th>
<th>
Start Time
</th>
<th class="date">
End Time
</th>
<th>
MAX Date found
</th>
<th>
Classification
</th>
<th class="last">
Read Description
</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr class="record">
<td>
<div class="toggle enabled">
</div>
</td>
<td class="overflow">
<%# Eval("Name")%>
</td>
<td class="overflow">
12/23/2014 6:20:47
</td>
<td>
12/23/2014 6:27:21
</td>
<td class="date">
12/23/2014
</td>
<td>
<%# Eval("ClassType")%>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody> </table>
</FooterTemplate>
</asp:Repeater>
It would be much simpler this way
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="tb">
<Columns>
<asp:TemplateField HeaderText="Classification">
<ItemTemplate><%# Eval("ClassType")%></ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle CssClass="record" />
</asp:GridView>
If you want header inside th, do this after DataBind
gvResultSet.DataBind();
gvResultSet.HeaderRow.TableSection = TableRowSection.TableHeader;
I have made one html-table that contain a RadListView (with use of LayoutTemplate and ItemTemplate), and it works fine.
It's a Property-table with two columns ("CadastralNummer", "CadastralSomething").
(The table has as many rows as the property has cadastrals)
Now comes the tricky part for me!
I now have a list of properties, instead of just one.
How do repeat my table for every property below each other?
If it can help, here's my code for one table:
<table border="0" cellspacing="2" cellpadding="0" width="75%">
<thead>
<tr>
<td style="width: 25%;">
CadastralNummer
</td>
<td style="width: 25%;">
CadastralSomething
</td>
</tr>
</thead>
<telerik:RadListView runat="server"
ID="RadListViewProperty"
AllowPaging="false" DataKeyNames="PropertyNR"
OverrideDataSourceControlSorting="true"
ItemPlaceholderID="ListViewContainer"
OnItemDataBound="RadListViewProperty_ItemDataBound">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="listViewContainer" />
</LayoutTemplate>
<ItemTemplate>
<tbody>
<tr>
<td style="vertical-align: top;">
<asp:Label ID="lblCadastralNummer" runat="server" />
</td>
<td style="vertical-align: top;">
<asp:Label ID="lblCadastralSomething" runat="server" />
</td>
</tr>
</tbody>
</ItemTemplate>
</telerik:RadListView>
</table>
Have you seen the repeater control? This may provide what you need.
I put my table/RadListView inside another table/RadListView, and it worked fine.
I want to hide a column of ListView based on the role from the code behind. Here's the mark-up and the code:
<asp:ListView ID="lvTimeSheet" runat="server">
<LayoutTemplate>
<table id="TimeSheet">
<thead>
<tr>
<th id="thDelete" runat="server" Visible='<%# IsAdmin() %>'>
Select
</th>
</tr>
</thead>
<tbody>
<tr id="itemPlaceholder" runat="server" />
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:CheckBox ID="cbMarkAsComplete" runat="server" onclick="selectMe(this)" Text=" Delete" />
</td>
</ItemTemplate>
</asp:ListView>
In the ListView layout template I have a <th> which has attribute id="thDelete" runat="server" Visible='<%# IsAdmin() %>' . In the code behind,
Public Function IsAdmin() As Boolean
If "user is admin" Then
Return True
Else
Return False
End If
End Function
But that column id="thDelete" is visible all the time. How do I go about hiding the column based on some condition from the code behind? Thank you for any input.
The tags with the attribute runat="server" can't allow inclusion <% %>. Try this:
<asp:ListView ID="lvTimeSheet" runat="server">
<LayoutTemplate>
<table id="TimeSheet">
<thead>
<% If IsAdmin() Then %>
<tr>
<th id="thDelete" runat="server">
Select
</th>
</tr>
<% End If %>
</thead>
<tbody>
<tr id="itemPlaceholder" runat="server" />
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:CheckBox ID="cbMarkAsComplete" runat="server" onclick="selectMe(this)" Text=" Delete" />
</td>
</ItemTemplate>
</asp:ListView>
Please, try this:
<LayoutTemplate>
<table id="TimeSheet">
<thead>
<tr>
<th id="thDelete" runat="server" Visible='<%# If( IsAdmin().tostring()="True", "true", "false") %>'>
Select
</th>
</tr>
</thead>
<tbody>
<tr id="itemPlaceholder" runat="server" />
</tbody>
</table>
</LayoutTemplate>`
I am creating a list of data using Repeater Control. Some of the rows might have other rows that should be toggled using the main row's clickable image.
Here, is the HTML part
<table cellpadding="2" cellspacing="0" width="100%">
<asp:Repeater ID="repeatLockers" runat="Server">
<HeaderTemplate>
<tr>
<td> </td>
<td>A</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr id="trItem" class="SomeParentClass" runat="server">
<td>
<img id="imgToggleHomeInfo" runat="server" alt="show/hide repetitves" src="icon_plus.gif"
style="cursor: pointer" />
</td>
<td>
<asp:Label ID="lbl" runat="server"></asp:Label>
</td>
</tr>
<tr id="trAddOnFee" runat="server" class="SomeClass" style="display: none;">
<td colspan="2">
<table cellpadding="4" cellspacing="2" width="100%">
<tr>
<td class="DgHeader">A</td>
<td class="DgHeader">B</td>
</tr>
<asp:Repeater ID="repeatRepetitives" runat="server">
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblA" runat="server"></asp:Label>
</td>
<td align="right">
<asp:Label ID="lblB" runat="server"></asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
How could I toggle the Rows with class as "SomeClass" inside on click of imgToggleHomeInfo" image on its parent row using Jquery?
I'd find the parent row of the image then toggle it's next sibling.
$(document).ready( function() {
$("[id$='imageToggleHomeInfo']").click( function() {
$(this).closest('tr').next().toggle();
});
})