How to hide an item in datalist - asp.net

I want to hide an item in datalist according to some condition suing ItemBound, how ?

Wrap a PlaceHolder control around the entire content of the ItemTemplate.
Then in your ItemDataBound event, you could do something like:
Protected Sub myDataList_ItemDataBound(sender As Object, e As System.Web.UI.WebControls.DataListItemEventArgs) Handles myDataList.ItemDataBound
If Not Value = Value2 Then
Ctype(e.Item.FindControl("myPlaceHolder"), PlaceHolder).Visible = False
End If
End Sub
A better approach (however I've not had chance to test it), would be to hide the whole item using e.Item.Visible. This way no HTML table elements would be rendered for the item. It would also mean no PlaceHolder would have to be added.
Protected Sub myDataList_ItemDataBound(sender As Object, e As System.Web.UI.WebControls.DataListItemEventArgs) Handles myDataList.ItemDataBound
If Not Value = Value2 Then
e.Item.Visible = False
End If
End Sub
Alternatively, if the values you are checking are from a database source, you could filter the items out before binding:
WHERE Value=#Value2

A simple solution could be to set the visibility of your Item container by evaluating your desired condition in your ItemTemplate:
<ItemTemplate>
<div id="itemdiv" visible='<%# (Convert.ToInt32(Eval("YourValue")) == 5) %>' runat="server">
<%# Eval("SomeOtherValue") %>
</div>
</ItemTemplate>
My example uses a constant but you could use any variable in scope.
Pitfall!
DataList will insist to create empty rows for hidden items, so you may have to use ListView instead to fully control creating your filtered itemlist.
Update
Using a ListView instead will only create rows for visible items:
<ItemTemplate>
<tr id="itemdiv" visible='<%# (Convert.ToInt32(Eval("YourValue")) == 5) %>' runat="server">
<td><%# Eval("SomeOtherValue") %></td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table border="1">
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>

Related

ASP.Net Passing a Variable from VBA on HTML Listview Item template when loading a web page

I have the below code on my aspx page, where a listview is being formed on HTML
´´´
<asp:ListView runat="server"
ID="VistaVehiculos"
DataSourceID="ADSParticipantes"
DataKeyNames="IDInscrito" ItemPlaceholderID="itemPlaceHolder"
OnItemDataBound="VistaVehiculos_ItemDataBound">
<ItemTemplate>
<td>
<asp:Label ID="lNum" runat="server" Height="80px" Width="83px" BackColor="Red"
Style="text-align:center; margin-left:5px; font-size:40px; padding-top:3px; font-family:'Doppio One', sans-serif; font-style:italic"
Text='<%# Eval("Num")%>'/>
<asp:Label ID="lTS" runat="server" Height="80px" BorderStyle="None"
Style="font-size:11px; display:block; margin-top:-80px; margin-left:8px"
text='<%# If(Eval("SEO1") Is DBNull.Value, "", "Correct"))%>'/>
</td>
</ItemTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</tr>
</GroupTemplate>
<GroupSeparatorTemplate>
<tr id="Tr1" runat="server">
<td style="height:15px"></td>
</tr>
</GroupSeparatorTemplate>
<LayoutTemplate>
<table border="0">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
</table>
</LayoutTemplate>
</asp:ListView>
´´´
In label id=lTS, I evaluate a data field "SEO1"
What I need to do is to set such data field with different values depending on different requirements, to use this page as a template, using load vba procedure.
This case refers to Safety Engine O1 - SEO1, if I need to change by Safety Engine O2, I would evaluate SEO2 data field.
I cannot find control to change text value.
Any help on this?
Ok, first up. Your tags VBA are incorrect VBA is Visual Basic for Applications (that the code system used in Word, Excel, and ms-access.
you are using vb.net - you should change your tags.
As for messing around with that expression? You don't mention if the if() now works?
However, beyond ANY simple Eval() expression, I find it becomes worse then a trip to the dentist to try and burn up a pot of coffee to inject/use/have complex expressions. They are also rather painfull to extend and write and change.
So, I suggest you consider setting the value(s), and writing your code logic in codebehind.
so, I would change this control to this:
<asp:Label ID="lTS" runat="server" Height="80px" BorderStyle="None"
Style="font-size:11px; display:block; margin-top:-80px; margin-left:8px"
text = "" />
Note how it has nothing now. Because we want to apply "more" complex logic to that control, then moving our code to the item data bound event is the place to be!
So, we now will have this:
Protected Sub VistaVehiculos_ItemDataBound(sender As Object, e As ListViewItemEventArgs) Handles VistaVehiculos.ItemDataBound
If e.Item.ItemType = ListViewItemType.DataItem Then
' get the control we are to format
Dim SEOlbl As Label = e.Item.FindControl("ITS")
Dim dRow As DataRowView = e.Item.DataItem
' NOTE IN ABOVE - NOT list view item!!! - but DataRowItem!!!!!!!!!
Dim strResult As String = ""
If dRow("SafteyCase") = "Safety Engine O1" Then
strResult = dRow("SE1").ToString
Else
strResult = dRow("SE2").ToString
End If
If strResult = "" Then
strResult = "NO VALUE"
End If
SEOlbl.Text = strResult
End If
End Sub
note how we are free to get any data column here INCLUDING ones not in the lv layout, but of course they MUST be in the data source.
So, you can conditional test anything you want, and then SHOVE into the label the results of that code - that code can be anything you want.
so, remove your expression from the label, and use code in the data bound event of lv.
Needless to say, you can also use this event to set color of the row, or even text boxes, so for conditonal formatting tricks, you can use the above.

Event handlers for controls in an ASP Repeater

I need to be able to trigger events when a user clicks on a radio button that is generated within an control on my page.
I've added an OnSelectedIndexChanged handler to the RadioButtonList and created a function in my code behind that should handle the selection of the RadioButtonList's ListItems, but I don't know how to pass a value to that function.
Here's my code:
<asp:Repeater runat="server" ID="rptQuestions">
<HeaderTemplate><table width="100%"></HeaderTemplate>
<ItemTemplate>
<tr>
<td colspan="2"><%# Container.DataItem("QuestionText")%></td>
</tr>
<tr>
<td>
<asp:RadioButtonList runat="server" ID="rblAnswerSelection" RepeatDirection="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="CheckAnswer">
<asp:ListItem Text="True" Value="1"></asp:ListItem>
<asp:ListItem Text="False" Value="0"></asp:ListItem>
</asp:RadioButtonList>
<asp:Label runat="server" ID="lblCorrectAnswer" Text="<%#Container.DataItem("CorrectAnswer") %>"></asp:Label>
</td>
<td><asp:Label runat="server" ID="lblResult"></asp:Label></td>
</tr>
</ItemTemplate>
<FooterTemplate></table></FooterTemplate>
</asp:Repeater>
Private Function CheckAnswer(ByVal SelectedAnswer As Integer) As Boolean
Select Case SelectedAnswer
Case 1 ' User answered True
If lblCorrectAnswer.Text = "True" Then
Return True
Else
Return False
End If
Case 0 ' User answered False
If lblCorrectAnswer.Text = "False" Then
Return True
Else
Return False
End If
End Select
End Function
The idea is that the user is to be informed whether or not their selected answer was correct. The value of the CheckAnswer function would determine a "CORRECT" or "INCORRECT" message displaying on lblResult. If there's a way to do this without a PostBack, then that would be ideal.
Any suggestions will be greatly appreciated.
Here's brief outline of client side solution (w/o post-back). Use html radio-buttons along with a hidden field to store the correct answer. Attach click event handlers on radio-buttons to match the value with the value from hidden field.
Repeater Mark-up:
<tr>
<td colspan="2"><%# Container.DataItem("QuestionText")%></td>
</tr>
<tr>
<td class="answerContainer">
<input type="radio" class="option" name='answer_<%# Container.ItemIndex %>' value="1">True
<input type="radio" class="option" name='answer_<%# Container.ItemIndex %>' value="0">False
<input type="hidden" id="correct_answer" value='<%#Container.DataItem("CorrectAnswer") %>' />
</td>
<td>
<span class="result" />
</td>
</tr>
Java-script (using jquery):
$(document).ready(function() {
$('td.answerContainer .option').click(function() {
var opt = $(this);
var correctAns = opt.next('#correct_answer');
var result = (opt.val() == correctAns.val()) ? "Correct" : "Incorrect";
opt.parent().next('td').find('.result').html(result);
});
});
Disclaimer: untested code
Note that radio button names are suffixed with the item index so that on the server side, you can read the user's answers by looking into the request (for example, value of Request["answer_1"] should tell user selected answer for second question -> "1" : True, "0": False and empty string: no selection).
The obvious disadvantage is that correct answer is stored in the html and so it will be simpler to cheat the system. Solution can be to make ajax call to the server to check if the answer is correct or not - this will need creating salted time-bound pseudo-random tokens to identify questions (otherwise user can make same ajax calls to get answers).
Cut your RadioButton code from repeater somewhere outside repeater, go to Design view and click on that RadioButton (now it's not included in repeater and you can assign event handler to it without typing any code manually).
When you select this RadioButton in DesignView, click events button in your proporties tab and click OnSelectedIndexChanged and this will auto generate eventhandler function. You have to enable autopostback on this radiobutton (arrow in top right corner of control - in Design view).
Now cut back this RadioButton and place it inside your repeater. Now every radiobutton change will cause calling generated handler function where you can cast sender object to RadioButton, and you can access its value with SelectedValue property.
I've tried this solution many times, but only in C# so I am sorry if something is different in VB.NET
You can't use Function as an event handler. It must be a sub which takes two argument.
Take a look at this sample.
Markup
<asp:Repeater runat="server" ID="rptQuestions">
<HeaderTemplate><table width="100%"></HeaderTemplate>
<ItemTemplate>
<tr>
<td colspan="2"><%# Eval("Name")%></td>
</tr>
<tr>
<td>
<asp:RadioButtonList runat="server"
ID="rblAnswerSelection"
RepeatDirection="Horizontal"
AutoPostBack="true"
OnSelectedIndexChanged="CheckAnswer">
<asp:ListItem Text="True" Value="1"></asp:ListItem>
<asp:ListItem Text="False" Value="0"></asp:ListItem>
</asp:RadioButtonList>
<asp:Label runat="server"
ID="lblCorrectAnswer"
Text='<%#Eval("CorrectAnswer") %>'>
</asp:Label>
</td>
<td><asp:Label runat="server" ID="lblResult"></asp:Label></td>
</tr>
</ItemTemplate>
<FooterTemplate></table></FooterTemplate>
</asp:Repeater>
Code-behind
Public Class Data
Public Property QuestionText As String
Public Property CorrectAnswer As String
End Class
Dim lst As List(Of Data)
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
lst = New List(Of Data)
lst.Add(New Data() With {.QuestionText = "A", .CorrectAnswer = "True"})
lst.Add(New Data() With {.QuestionText = "B", .CorrectAnswer = "False"})
lst.Add(New Data() With {.QuestionText = "C", .CorrectAnswer = "True"})
rptQuestions.DataSource = lst
rptQuestions.DataBind()
End If
End Sub
Protected Sub CheckAnswer(sender As Object, e As System.EventArgs)
Dim rad As RadioButtonList = DirectCast(sender, RadioButtonList)
Dim item As RepeaterItem = DirectCast(rad.Parent, RepeaterItem)
Dim correctAns As Label = DirectCast(item.FindControl("lblCorrectAnswer"), Label)
Dim result As Label = DirectCast(item.FindControl("lblResult"), Label)
Dim SelectedAnswer As String = rad.SelectedItem.Text
If correctAns.Text = SelectedAnswer Then
result.Text = "Correct"
Else
result.Text = "Incorrect"
End If
End Sub

Hiding a table row (the ItemPlaceholderID row) in a ListView

I have a table row that holds my paging controls in a ListView as follows (partial layout):
<asp:ListView ID="lvOrderItems" runat="server"
DataSourceID="odsShoppingCart"
DataKeyNames="ProductNumber"
ItemPlaceholderID="lvItemContainer">
<LayoutTemplate>
<table id="lvCart" runat="server">
<tr id="lvHeader" runat="server">
...
</tr>
<tr id="lvItemContainer" runat="server"></tr>
<tr id="lvPaging" runat="server">
...
</tr>
</table>
</LayoutTemplate>
In my code-behind, I handle the DataBound event as follows, and I am planning on hiding the entire lvItemContainer row conditionally (for now, I am just trying to hide the row itself without conditions):
Protected Sub lvOrderItems_DataBound(ByVal sender As Object, ByVal e As EventArgs) Handles lvOrderItems.DataBound
Dim lvItemContainer As HtmlTableRow = CType(lvOrderItems.FindControl("lvItemContainer"), HtmlTableRow)
If Not lvItemContainer Is Nothing Then
Response.Write("hit1")
lvItemContainer.Visible = False
End If
Dim lvPaging As HtmlTableRow = CType(lvOrderItems.FindControl("lvPaging"), HtmlTableRow)
If Not lvPaging Is Nothing Then
Response.Write("hit2")
lvPaging.Visible = False
End If
End Sub
So when this runs on DataBound, hit1 is never fired, but hit2 is... any ideas what is happening here?
HTML purists don't like it, but this approach works:
In the OnLayoutCreated event, try one of the following approaches:
Take the runat="server" out of the table and child rows, and do this:
<asp:Panel ID="pnlItemContainer" runat="server">
<tr id="lvItemContainer"></tr>
</asp:Panel>
pnlItemContainer.Visible = false;
Or you can do this:
<tr id="lvItemContainer" runat="server"></tr>
EDIT: Embedded style element because setting visible to false does not work in the layout template.
lvItemContainer.Style["display"] = "none";
I'm not sure how it will work with a layout template, but it's worked for me in other situations.
Instead of attempting to (unsuccessfully) adjust the visibility of the ItemPlaceholderID container, I've set the visibility of the individual rows in the container.

Dynamically change the number of header cells in listview LayoutTemplate

I'm trying to dynamically create a listview. on reports.aspx user selects a bunch of checkboxes. On the next page, user sees reports.aspx, and should see a table with columns of the checkboxes he selected. My idea was to create a listview, then dynamically change the header row of the LayoutTemplate, then change the select statement depending on which columns selected. This is what I have:
<asp:ListView runat="server" ID="ReportListView" DataSourceID="ReportListViewSDS">
<LayoutTemplate runat="server">
<table runat="server">
<tr runat="server">
<%
' Doesn't work because code blocks (<%%>) aren's allowed inside <LayoutTemplate> blocks
'For Each i As String In Request.Form
'Response.Write("<th>" & Request.Form(i) & "</th>")
'Next
%>
</tr>
</table>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</LayoutTemplate>
...
Problem is that this doesn't work because i can't put a code block (<%%>) inside the LayoutTemplate. Is there a way in the code behind to edit the LayoutTemplate, or another way to cycle through the Request.Form vars and build the table header row with it?
Thanks for any advice/direction!
-Russ
Try using the ItemTemplate for the binding syntax instead of the layout template. I believe the layout template is strictly for layout.
Also, it looks like you're using classic ASP code blocks. ASP.NET code blocks look like this:
For data binding:
<%# Eval("<COLUMN NAME>")%>
For other cases not involving data binding:
<%= Request.QueryString["Hello"] %>
Since the control is already a server side control, try giving the and id and then modifying the header on pre-render:
<asp:ListView runat="server" ID="ReportListView" DataSourceID="ReportListViewSDS">
<LayoutTemplate runat="server">
<table runat="server">
<tr id='trCustomHeader" runat="server">
Then in your code behind, attach this logic to the listview's pre-render
ReportListView_PreRender(...)
{
TableRow tr = ReportListView.FindControl("trCustomerHeader");
TableCell tempCell = new TableCell();
tempCell.Text = ...
tr.Cells.Add(tempCell);
}
I just created a separate table on the page, outside of the listview, that was the simple way of doing it.
<asp:Table ID="HeaderTable" runat="server">
<asp:TableHeaderRow ID="HeaderTableHeaderRow" runat="server" />
</asp:Table>
<asp:ListView ...>
...
</asp:ListView>
Then in the code behind:
For Each i As String In Request.Form
If i.IndexOf("checkbox_") = 0 Then
Dim c As New TableHeaderCell()
Dim l As New LinkButton()
l.Text = i.Substring(Len("checkbox_"))
c.Controls.Add(l)
c.CssClass = "customreport"
HeaderTableHeaderRow.Cells.Add(c)
End If
Next
Pretty simple. So I didn't have to use a LayoutTemplate at all.

ASP.NET Repeater Template, Conditional Code for every Nth element

I'm using an asp.net repeater to create a bunch of images. The image markup is all the same so the standard <ItemTemplate> is fine.
However, I want to wrap K images in a div. Lets say I bind 25+ images to the repeater and I want 5 images per div. How do I go about conditionally creating the start and close tags for the div?
Is this a case better suited for a for loop.
This should work for you, with no need for anything in the code behind (other than binding the repeater..):
<asp:Repeater ID="repImages" runat="server">
<HeaderTemplate><div></HeaderTemplate>
<ItemTemplate>
<%# (Container.ItemIndex != 0 && Container.ItemIndex % 5 == 0) ? #"</div><div>" : string.Empty %>
<asp:Image ID="imgGallery" runat="server" ImageUrl='<%# /* your code here */ %>' />
</ItemTemplate>
<FooterTemplate></div></FooterTemplate>
</asp:Repeater>
Here is where Asp.Net WebForms can give you incredible RAD efficiency.
You can use the new ListView control, and set the number of items per "group", which will allow you to setup the HTML that surrounds a group, as well as each individual item. This way you can surround the group with the conditional tags.
<asp:ListView ID="ListView1" runat="server" DataKeyNames="id" DataSourceID="LinqDataSource1" GroupItemCount="3">
<LayoutTemplate>
<div id="layout">
<asp:PlaceHolder ID="groupPlaceholder" runat="server"></asp:PlaceHolder>
</div>
</LayoutTemplate>
<GroupTemplate>
<div class="group">
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</div>
</GroupTemplate>
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
<ItemTemplate>
<div class="item">
<img alt='<%# Eval("title") %>' title='<%# Eval("title") %>'
src='<%# Eval("filename","photos/{0}") %>' />
</div>
</ItemTemplate>
</asp:ListView>
If you want to keep your markup on the ASPX page you could also try this variation on David's method:
On the aspx page:
<ItemTemplate>
<asp:Literal runat="server" ID="divStart" Text="<div>" />
<asp:Image ....>
<asp:Literal runat="server" ID="divEnd" Text="</div>" />
</ItemTemplate>
In the ItemDataBound event in the codebehind:
e.Item.FindControl("divStart").Visible
= e.Item.FindControl("divEnd").Visible
= e.Item.ItemIndex % 5 == 0;
Add two empty label controls into your Repeaters ItemTemplate where you'd want your div tags to be.
Then add an ItemDataBound event to the Repeater.
Then add this code into the ItemDataBound event:
Protected Sub Repeater1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs)
If (e.Item.ItemType = ListItemType.Item) Or (e.Item.ItemType = ListItemType.AlternatingItem) Then
If e.Item.ItemIndex Mod 5 = 0 Then
Dim lblDivStart As Label = CType(e.Item.FindControl("lblDivStart"), Label)
Dim lblDivEnd As Label = CType(e.Item.FindControl("lblDivEnd"), Label)
lblDivStart.text = "<div>"
lblDivEnd.text = "</div>"
End If
End If
End Sub
Note - This will need some tweaking to handle the first div and you may need to do something like If (e.Item.ItemIndex + 1) Mod 5 = 0 to get the divs to show up exactly where you want them.
For more info:
DataListItem.ItemIndex Property
DataList.ItemDataBound Event

Resources