Highlight (bold font) row in asp:Repeater with timer - c#

I have a list of activities that is displayed with a Repeater. I already use Timers to display these, so the Timer isn't the problem. It's the code that i have to put into the Timer_tick method.
The "highlight-Timer" is supposed to highlight the items/rows one at a time, and then I want to display some info related to the highlighted row.
If it's easier with another control that's no problem. I doesn't have to be a Repeater. I just use it because of the styling-possibilities (it isn't displayed in just one line, but with several line-breaks etc.)
As requested:
(Repeater)
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div id="divActivity" runat="server">
<span style="font-size:30px;">
<%# DataBinder.Eval(Container.DataItem, "act_headline") %>
</span>
<br />
<img alt="mapIcon" src="../img/mapIcon.gif" height="15px" width="15px" style="position:absolute;" />
<span style="font-size:12px; font-style:italic; margin-left:23px;">
<%# DataBinder.Eval(Container.DataItem, "act_place") %>
</span>
<img alt="watchIcon" src="../img/watchIcon.png" height="15px" width="15px" style="position:absolute;" />
<span style="font-size:12px; font-style:italic; margin-left:23px;">
<%# DataBinder.Eval(Container.DataItem, "act_start") %> - <%# DataBinder.Eval(Container.DataItem, "act_end") %>
</span>
<br />
<div style="word-wrap: break-word; width:1000px; margin-top:20px; padding:0;">
<%# DataBinder.Eval(Container.DataItem, "act_text") %>
</div>
<br />
<img alt="infoIcon" src="../img/infoIcon.png" height="15px" width="15px" style="position:absolute;" />
<span style="font-size:12px; margin-left:23px;"><a target="_blank" href="http://<%# DataBinder.Eval(Container.DataItem, "act_info") %>"><%# DataBinder.Eval(Container.DataItem, "act_info") %></a>
</span>
</div>
</ItemTemplate>
</asp:Repeater>
I don't have anything in the the Timer_tick-event, as i've tried several things and the deleted it after it failed. Hope it's enough.

I would set a special CSS class to the highlighted item by using something like this in the tick event handler by looping over the Repeater.Items collection.
Something like this (untested):
int currentHighlight = -1;
int nextHighlight = -1;
for (int i = 0; i < Repeater1.Items.Count; i++)
{
HtmlControl htmlDiv = (HtmlControl)Repeater1.Controls[i].Controls[1];
if (htmlDiv.Attributes["class"] != null)
{
if (htmlDiv.Attributes["class"].Contains("highlighted")) // this is the currently highlighted item
{
// record currently highlighted item index
currentHighlight = i;
// remove highlight
htmlDiv.Attributes["class"].Replace("highlighted", "");
htmlDiv.Attributes["class"].Trim();
}
}
}
if ((currentHighlight == -1) || (currentHighlight == Repeater1.Items.Count))
{
// handle first Item highlighting
nextHighlight = 1;
}
else
{
// handle standard case
nextHighlight = currentHighlight + 1;
}
// highlight next item
((HtmlControl)Repeater1.Controls[nextHighlight].Controls[1]).Attributes["class"] += " highlighted";
Then you can use the highlighted CSS class to handle styling (the bold font you mention) as well as some special behavior in JavaScript or jQuery for example.
BTW, you can do any other operation on the RepeaterItem object once you get which one is currently highlighted.

Related

how to access a header template in c#

I have a template:
<asp:Repeater ID="litFolder" runat="server" OnItemDataBound="litFolder_ItemDataBound">
<HeaderTemplate>
<ul class="test" id="currentLink">
</HeaderTemplate>
<ItemTemplate>
<div class="leftNav">
<li>
<asp:HyperLink ID="innerHyperLink" runat="server"></asp:HyperLink>
</li>
</div>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
and I'm trying to set the to display block when a link is selected. I can set the link to display block, but how do I set the ul to display block ( only using C# )
protected void litFolder_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
// if the child from the first repeater has children, it will grab them here
Item innerItem = (Item)e.Item.DataItem;
if (innerItem != null)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
// this creates a link to the page in sitecore once clicked
HyperLink topNavigation = (HyperLink)e.Item.FindControl("innerHyperLink");
topNavigation.NavigateUrl = LinkManager.GetItemUrl(innerItem);
topNavigation.Text = innerItem["Title"];
if (topNavigation != null) {
//this is where I think I need to define the ul to display block
}
}
}
}
I need to make sure that the current link sets the ul that it is in and not all the ul's with the class test.
In order to prevent the Ul from being broken, place the <div class="leftNav"> inside the <li> as shown below:
<asp:Repeater ID="litFolder" runat="server" OnItemDataBound="litFolder_ItemDataBound">
<HeaderTemplate>
<ul class="test" id="currentLink">
</HeaderTemplate>
<ItemTemplate>
<li>
<div class="leftNav">
<asp:HyperLink ID="innerHyperLink" runat="server"></asp:HyperLink>
</div>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
To set the display block style, you can find the control based on the ID, then set the style to it.
Thanks

Aligning checkboxes in nested repeater

I have a nested repeater control and I am trying to list out the items underneath that nested repeater over a few spaces including the check box associated with it. But it seems like every other line is a checkbox without a label, can someone shed a little light?
<asp:Repeater ID="parentRepeater" runat="server">
<ItemTemplate>
<br />
<b>
<input type="checkbox" id="chk_ParentProgram" name="chk_ParentProgram" runat="server"
value='<%# ((programsRepeat)Container.DataItem).Level == 1 ? ((programsRepeat)Container.DataItem).ProgramID.ToString() : "" %> '
/>
<label for="chk_ParentProgram">
<%# ((programsRepeat)Container.DataItem).Level == 1 ? ((programsRepeat)Container.DataItem).ProgramName : "" %>
</label>
</b>
<asp:Repeater>
<ItemTemplate>
<br/>
<input type="checkbox" id="chk_ChildProgram" name="chk_Child" runat="server"
value='<%# ((programsRepeat)Container.DataItem).Level == 2 ? ((programsRepeat)Container.DataItem).ProgramID.ToString() + " from the child repeater" : "" %>'
/>
<label for="chk_ChildProgram">
<%# ((programsRepeat)Container.DataItem).Level == 2 ? ((programsRepeat)Container.DataItem).ProgramName : "" %>
</label>
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:Repeater>
The problem is whether you have a valid value or empty sting for (programsRepeat)Container.DataItem).ProgramID.ToString() you still rendering the checkbox like below
<input type="checkbox" value="" />
This will render the empty checkbox.
Better check the value and render the checkbox like
<% if((programsRepeat)Container.DataItem).Level == 2 &&
((programsRepeat)Container.DataItem).ProgramID!="")
{
//not sure about the inline syntax here.
//add checkbox code
}
%>
Inline Syntax Reference or check this

How to retrieve details from a repeater control to display in modal popup

I have a repeater control which displays an image and some basic information like DateTime and Prouct Id. On clicking an Image I need to run another query and show details in a seperate popup.I know how to do the popup.
I want to know how I can fetch the DateTime and ProductId from the repeater and use them in the button click event of the image?
I have my code for the repeater below :
<asp:Repeater ID="rptMonitorSummary" runat="server" OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">
<%# Eval("Name").ToString().Length > 9 ? (Eval("Name") as string).Substring(0, 9) : Eval("Name")%>
</h5>
<div id="divHover">
<asp:ImageButton Width="80px" ID="btnPerformanceImage" onclick="btnPerformanceImage_Click" runat="server" Height="45px">
</asp:ImageButton>
</div>
<div class="tooltip" style="display: none">
<div style="text-align: center; font-weight: bold;">
<%# Eval("DateTime") %><br />
</div>
<div style="text-align: center; font-weight: normal">
ErrorRatingCalls =
<%# Eval("ProductId")%><br />
</div>
<div style="text-align: center; font-weight: normal">
TotalRatingCalls =
<%# Eval("TotalCalls")%>
<br />
</div>
<div style="text-align: center; font-weight: normal">
SuccessRate =
<%# Eval("PassPercentage") + "%" %>
</div>
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
I also have the button click event below :
protected void btnPerformanceImage_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript
(this, this.GetType(), "callScriptFunction", "ViewModelPopup1();", true);
}
All I want to know is how I can fetch the values that are already bound to the repeater control, When I click on an image which inside the repeater control
Instead of handling click on the button itself, you should rather make use of ItemCommand event of the Repeater control. As a CommandArgument you can pass ProductId, and then inside the handler use it to retrieve rest of the info from the DB. Or you can even include all needed values into CommandArgument as a single string and do some parsing afterwards:
<asp:Repeater ... OnItemCommand="rptMonitorSummary_ItemCommand" ... >
...
<asp:ImageButton ... CommandName="ShowPopup" CommandArgument='<%# Eval("ProductId") + "," + Eval("DateTime") %>'>
</asp:ImageButton>
...
</asp:Repeater>
The handler might look like this:
protected void rptMonitorSummary_ItemCommand(object sender, RepeaterCommandEventArgs e)
{
string[] tokens = e.CommandArgument.ToString().Split(',');
int productId = int.Parse(tokens[0]);
DateTime dateTime = Date.Time.Parse(tokens[1]);
// the rest of the handling here
}
Use the OnItemCommand event to fetch values out of the repeater control.
<asp:Repeater ID="rptMonitorSummary" runat="server" OnItemDataBound="rptMonitorSummary_OnItemDataBound" OnItemCommand="rptMonitorSummary_ItemCommand">
.
.
.
<asp:ImageButton Width="80px" ID="btnPerformanceImage" CommandName="Popup" runat="server" Height="45px"></asp:ImageButton>
.
.
.
protected void rptMonitorSummary_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "Popup")
{
DataRowView row = ((DataRowView)e.Item.DataItem).Row;
string data1 = Convert.ToString(row["Data1"]);
string data2 = Convert.ToString(row["Data2"]);
ScriptManager.RegisterStartupScript
(this, this.GetType(), string.Format("callScriptFunction", "ViewModelPopup1('{0}','{1}');", data1, data2), true);
}
}
Rather than the OnClick inside your Button, use the OnItemCommand="rptMonitorSummary_ItemCommand" in your Repeater
Then on the code behind
protected void rptMonitorSummary_ItemCommand(object sender, RepeaterCommandEventArgs e)
{
// e.CommandName and e.CommandArgument will let you know what was clicked
}
Your button can look something like this
<asp:Button runat="server" ID="btnPerformanceImage" Text="Whatever" CommandName="OpenImage" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ProductId") %>' />
So then you know what the user clicked on and can change the popup to suit it
you can set a class attribute name for both div tags wich contains the date value and ProductId value and next get them with jquery .find('classname') to retreive their values.

TextChanged event does not fire when 2nd modification equals the original value

I have a _TextChanged event which works properly except in a specific circumstance which can be replicated as follows:
User modifies text (event fires correctly)
User modifies text again to match the original value (event doesn't fire)
I can get the _TextChanged event to work on my development box by turning on Viewstate for the update panel on the ascx page, but when I move it to the server I get an error that the viewstate failed if I switch user controls and then switch back to that page. The controls which go inside the update panel are build dynamically in code behind and are rebuilt with each postback -- this works for every other postback so I don't think the issue is with the controls.
Additionally, turning on viewstate makes the page run dreadfully slow anyway, so this would not be an ideal fix.
Finally, the _TextChanged event works for all changes except when reverting back to the original value.
Can anyone tell me why the event doesn't fire in that specific circumstance, and how to address the problem?
Text box creation in code behind:
TextBox annualHoursTextBox = new TextBox();
annualHoursTextBox.ID = string.Format("bundle{0}_annualHoursTextBox{1}", bundle.BundleNbr, parentItem.LaborItemNbr);
annualHoursTextBox.CssClass = "";
annualHoursTextBox.Columns = 4;
annualHoursTextBox.Text = childItem == null ? string.Empty : childItem.FTEHours.ToString("F0");
annualHoursTextBox.AutoPostBack = true;
annualHoursTextBox.TextChanged += new EventHandler(annualHoursTextBox_TextChanged);
AsyncPostBackTrigger AHtrigger = new AsyncPostBackTrigger();
AHtrigger.ControlID = annualHoursTextBox.UniqueID;
AHtrigger.EventName = "TextChanged";
upPricingSheet.Triggers.Add(AHtrigger);
//snip
//add some attributes for reference on the events
annualHoursTextBox.Attributes["othercontrol"] = tasksPerYearTextBox.UniqueID;
annualHoursTextBox.Attributes["nextcontrol"] = benefitsTextBox.UniqueID;
annualHoursTextBox.Attributes["targetTBcontrol"] = taskTimeTextBox.UniqueID;
annualHoursTextBox.Attributes["targetDDLcontrol"] = taskTimeUOMDropDown.UniqueID;
Event Handler:
protected void annualHoursTextBox_TextChanged(object sender, EventArgs e)
{
TextBox ah = sender as TextBox;
TextBox other = Page.FindControl(ah.Attributes["othercontrol"]) as TextBox;
if ((!String.IsNullOrEmpty(ah.Text)) && (!String.IsNullOrEmpty(other.Text)))
{
TextBox next = Page.FindControl(ah.Attributes["nextcontrol"]) as TextBox;
TextBox targetTB = Page.FindControl(ah.Attributes["targetTBcontrol"]) as TextBox;
DropDownList ddl = Page.FindControl(ah.Attributes["targetDDLcontrol"]) as DropDownList;
Double TasksPerSecond;
TasksPerSecond = CalculateTimePerTask(ah.Text, other.Text);
string TimeUnit;
double Time;
if (TasksPerSecond < 60)
{
TimeUnit = "Seconds";
Time = TasksPerSecond;
}
else if (TasksPerSecond < 3600)
{
TimeUnit = "Minutes";
Time = (TasksPerSecond / 60);
}
else
{
TimeUnit = "Hours";
Time = (TasksPerSecond / 60 / 60);
}
//Enter the time in the appropriate textbox
targetTB.Text = Time.ToString("F2");
//select the appropriate item from the ddl
ListItem i = ddl.Items.FindByText(TimeUnit);
if (i != null)
{
ddl.SelectedItem.Selected = false;
i.Selected = true;
}
}
}
ASPX Page:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Solution.aspx.cs" Inherits="Solution" %>
<%# Register Src="fragments/solutionRecommended.ascx" TagName="solutionRecommended"
TagPrefix="uc1" %>
<%# Register Src="fragments/solutionPricingSheet.ascx" TagName="solutionPricingSheet"
TagPrefix="uc2" %>
<%# Register Src="fragments/solutionSuggested.ascx" TagName="solutionSuggested" TagPrefix="uc3" %>
<%# Register Src="fragments/solutionSummary.ascx" TagName="solutionSummary" TagPrefix="uc4" %>
<%# Register Src="fragments/ucItemFilterSearch.ascx" TagName="ucItemFilterSearch"
TagPrefix="uc5" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript">
function addItemToBundle(postUrl, redirectUrl) {
$.post(postUrl);
window.location = redirectUrl;
// window.location = url;
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:HiddenField ID="hfStepNbr" runat="server" />
<asp:Panel ID="pnlStepMessage" runat="server" Visible="false" CssClass="padding10">
<h3 class="placeholder">
<asp:Label ID="lblMessage" runat="server" /></h3>
</asp:Panel>
<div class='elev8form' id="mainDiv" runat="server">
<h3 class='header'>
Solutions</h3>
<div id="tabs">
<div class='tab'>
<asp:LinkButton ID="lbSuggested" runat="server" Text="Select Items" data-step="1"
OnClick="lbTab_Click" CausesValidation="false"></asp:LinkButton>
</div>
<div class='tab'>
<asp:LinkButton ID="lbPricing" runat="server" Text="Pricing Worksheet" data-step="2"
OnClick="lbTab_Click" ></asp:LinkButton>
</div>
<div class='tab'>
<asp:LinkButton ID="lbRecommendedSolutions" runat="server" Text="Recommended Solutions"
data-step="3" OnClick="lbTab_Click" CausesValidation="false"></asp:LinkButton>
</div>
<div class='tab'>
<asp:LinkButton ID="lbSummary" runat="server" Text="Solutions Summary" data-step="4"
OnClick="lbTab_Click" CausesValidation="false"></asp:LinkButton>
</div>
</div>
<div id="solutions-body">
<asp:MultiView ID="mltSolution" runat="server">
<asp:View ID="viewSuggested" runat="server">
<uc3:solutionSuggested ID="solutionSuggested1" runat="server" RedirectUrl="~/portal/elev8/solution.aspx" />
</asp:View>
<asp:View ID="viewPricing" runat="server">
<uc2:solutionPricingSheet ID="solutionPricingSheet1" runat="server" />
</asp:View>
<asp:View ID="viewRecommended" runat="server">
<uc1:solutionRecommended ID="solutionRecommended1" runat="server" />
</asp:View>
<asp:View ID="viewSummary" runat="server">
<p style="font-size: 14px;">
Text here
</p>
<uc4:solutionSummary ID="solutionSummary1" runat="server" />
</asp:View>
</asp:MultiView>
</div>
</div>
<script type="text/javascript">
function pageLoad() {
$(function () {
var maxChannelHeight;
var items = $('.channel');
for (var counter = 0; counter < items.length; counter++) {
var channel = items[counter];
var channelHeight = $(channel).height();
maxChannelHeight = maxChannelHeight > channelHeight ? maxChannelHeight : channelHeight;
}
$('.channel').height(maxChannelHeight);
$("#priceing-sheet-save-button *").click(function () {
window.scrollTo(0, 0);
});
});
}
</script>
ASCX Page:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="solutionPricingSheet.ascx.cs"
Inherits="solutionPricingSheet" %>
<asp:UpdateProgress ID="upProgressRecSolution" runat='server' AssociatedUpdatePanelID="upPricingSheet">
<ProgressTemplate>
<div style="position: absolute; z-index: 2000; left: 45%; display: inline; width: 100px;"
class="elev8form">
<asp:Image ID="Image1" runat='server' ImageUrl="~/portal/img/ajax-loader-big.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<div id="pricing-sheet-wrapper">
<p class='left'>
More text</p>
<asp:Panel ID="pnlSaveMessage" runat="server" Visible="false" CssClass="save-message">
<span>Item prices saved</span>
</asp:Panel>
<div class='export'>
<span class='bigbutton'>
<asp:LinkButton ID="btnExport" runat='server' Text="Export to Excel" OnClick="btnExport_Click" />
</span>
</div>
<asp:UpdatePanel ID="upPricingSheet" runat="server" UpdateMode="Conditional" ViewStateMode="Disabled">
<ContentTemplate>
<div id="pricing-sheet">
<asp:PlaceHolder ID="phContent" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="opportunityPlaceHolder" runat="server" />
<div class='save export'>
<div>
<div id="pageValidationError" class="validationMessage">
* Changes not saved. Review all entries for validation messages. Required fields marked with an asterisk.
</div>
</div>
<%--<asp:HiddenField ID="hf" runat="server" value="0" />--%>
<center>
<span id="priceing-sheet-save-button">
<asp:Button ID="btnSave" runat="server" Text="Save All Prices" SkinID="redbutton"
OnClick="btnSave_Click" CausesValidation="true" />
</span>
</center>
</div>
</div>
<script type="text/javascript">
function pageLoad() {
$("#tabs .tab a").click(function () {
$("#<%= btnSave.ClientID%>").click();
});
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.validationMessage').hide();
$('#<%= btnSave.ClientID %>').click(function () {
if (Page_IsValid == false) {
$('.validationMessage').show();
return false;
}
});
$('input[type=text]').blur(function () {
if (Page_IsValid == false) {
$('.validationMessage').show();
return false;
}
else {
$('.validationMessage').hide();
}
})
});
That is the intended behavior - the event is called OnTextChanged (different from original) not OnTextTyped (any text entered), for that you would have to handle this event (which triggers even if nothing at all is entered):
OnBlur="__doPostBack(this.id, '');"
UPDATE: its pretty simple actually, since you are using ajax, your textbox's .defaultValue is not changing between postbacks, only the .value is - so either use OnBlur as I told you, or on every postback change the .defaultValue to .value in javascript: http://www.w3schools.com/jsref/prop_text_defaultvalue.asp
or just place the textbox in the UpdatePanel, and it will take care of it self on its own...
UPDATE 2: First off, nowhere in your code is the textbox shown to be inside an `UpdatePanel', and secondly, you have 3 choices:
a) For OnBlur method to work, remove AutoPostBack property (it is the client side OnChange event), but keep the OnTextChanged event (it is server side).
b) For ViewState method to work, set ViewStateMode="Enabled" on the textbox, and make sure you are using ViewStateMode="Disabled" on its containers - and not EnableViewState="False".
c) javascript .defaultValue method...

Using Directives

If I have a repeater going through a list of data to retieve the values I use
<%# Eval("current_item") %>
And with a bit of luck it outputs the information for "current_item"
However if I want to check if "current_item" equals 1 for instance, this will tell me whether to print the next lot of information. So how do I use that information to determine the output, effectivily I want to put that information into an variable.
<%# myInt = int.Parse(Eval("current_item")) %>
The above code is what I want to do really.
Then I will do something like this:
<% if (myInt == 1) { %>
<p>Information to display if myInt = 1</p>
<% } else { %>
<p>Other Information</p>
<% } %>
Any Ideas?
I have used something similar to the following in a GridView:
<p>
<asp:Label Visible='<%# ((int)Eval("current_item") == 1) %>' Text="This is the first item" runat="server" />
<asp:Label Visible='<%# ((int)Eval("current_item") != 1) %>' Text="This is not the first item" runat="server" />
</p>
Give that a shot and see if it works for a Repeater too.

Categories