I have an ASP.NET GridView which is populated from a SQL Server database. This is working fine. My code behind is using C#.
One of the columns in the GridView contains a JQuery Progress bar and another contains a number of responses. Please see the image below:
How can I go about getting each value for the response count column and show this value in each rows corresponding JQuery Progress bar?
My JQuery progress bar is currently static and it generated like so:
<asp:DataList runat="server" id="listResponses" DataKeyField="QuestionID" OnItemDataBound="listResponses_ItemDataBound" Width="100%">
<ItemTemplate>
<div class="question_header">
<p><strong><asp:Label ID="lblOrder" runat="server" Text='<%# Container.ItemIndex + 1 %>'></asp:Label>. <%# DataBinder.Eval(Container.DataItem, "QuestionText") %></strong></p>
</div> <!-- end question_header -->
<asp:GridView runat="server" ID="gridResponses" DataKeyNames="AnswerID" AutoGenerateColumns="False" CssClass="responses" AlternatingRowStyle-BackColor="#f3f4f8">
<Columns>
<asp:BoundField DataField="AnswerTitle" ItemStyle-Width="250px"></asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<div class="pbcontainer">
<div class="progressbar"></div>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Responses" HeaderText="Response Count" HeaderStyle-Width="100px" />
</Columns>
</asp:GridView>
</ItemTemplate>
</asp:DataList>
Using the following script provided on the JQuery UI website:
$(function () {
// Progressbar
$(".progressbar").progressbar({
value: 40
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function () { $(this).addClass('ui-state-hover'); },
function () { $(this).removeClass('ui-state-hover'); }
);
});
I am not sure where to being here so any help would be appreciated.
In your div that holds the progress bar, add a hidden field like so:
<div class="pbcontainer">
<!-- This is the new line in markup. Replace NumOfResponses with your value field -->
<asp:HiddenField ID="hiddenValue" runat="server" Value='<%# Eval("NumOfResponses") %>' />
<div class="progressbar"></div>
</div
Now each div that contains a progress bar also contains a hidden field with the value you need to update the progress bar with.
In jQuery you can set all progress bars inside the data list equal to their respective values. Example:
EDIT: (the following jQuery code was modified)
$('.pbcontainer').each(function() {
// We assume that there is only 1 hidden field under 'pbcontainer'
var valueFromHiddenField = $('input[type=hidden]', this).val();
$('.progressbar', this).progressbar({ value: parseInt(valueFromHiddenField) });
});
ALL these were just from the top of my head without any real code verification..
But this will be the IDEA:
Get the value from ASP.NET into a hidden field near the progress bars in each row
Update each progress bar in jQuery with the value in HTML hidden field.
Hope this helps
Try this:
<script>
var maxBarVal = 0;
$(function () {
$('.row').each(function () {
var val = parseInt($(".value", this).text());
maxBarVal += val;
});
$('.row').each(function () {
var val = parseInt($(".value", this).text());
$('.bar', this).progressbar({ value: val / maxBarVal * 100 });
});
});
</script>
This is simulated output from the GridView control:
<table border="1" cellpadding="3" cellspacing="0" style="border-collapse: collapse;" width="100%">
<tr>
<td colspan="3">4. Have you used an iPad before?</td>
</tr>
<tr>
<td width="250">Answer</td>
<td>Percentage</td>
<td width="100">Response Count</td>
</tr>
<tr class="row">
<td>Yes</td>
<td><div class="bar"></div></td>
<td class="value">4</td>
</tr>
<tr class="row">
<td>No</td>
<td><div class="bar"></div></td>
<td class="value">2</td>
</tr>
</table>
Related
I have a user control in which am using one editable rad combo and one rad text box. depends on the value of combo i need to set the visibility of text box. its working. the code is as follows.
1. User Control
<asp:Panel ID="pnl44" runat="server" Visible="false">
<table width="100%">
<tr>
<td style="width: 20%;">
Quantity<span style='color: red'>* </span>
</td>
<td align="left" style="vertical-align: top; width: 80%;">
<table width="100%">
<tr>
<td align="left" style="vertical-align: top; width: 63%;">
<telerik:RadComboBox ID="pnl44_ddlUnit" runat="server" DropDownAutoWidth="Enabled"
Width="150px" AutoPostBack="true" OnSelectedIndexChanged="ddlUnit_SelectedIndexChanged"
EmptyMessage="---Select---" markfirstmatch="True" allowcustomtext="false" onclientblur="OnClientBlurHandler"></telerik:RadComboBox>
</td>
<td>
<asp:TextBox ID="pnl44_txtQuantity" MaxLength="10" runat="server" CssClass="textfield"
Width="145px" />
<ajaxtoolkit:FilteredTextBoxExtender ID="ftetxtQuantity" FilterType="Numbers" runat="server"
TargetControlID="pnl44_txtQuantity" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:Panel>
in the code behind am handling the selected changed event to set the visibility, its working fine. the javascript for on blur is as follows (it is in the aspx page).
<script type="text/javascript" language="javascript">
function OnClientBlurHandler(sender) {
var item = sender.findItemByText(sender.get_text());
if (!item) {
sender.clearSelection();
}
}
</script>
with this whenever the combo value is null, it will show the empty message.
the scenario is like this
by default the visibility of txtQuantity is false.
when user select 'value1' from combo, the txtQuantity visibility is true;
then the user is deleting value1 using delete/backspace, combo box will show empty message string, but that time the txtQuantity visibility is true, instead false.
please help me to solve the issue...
It seems you change the textbox visibility on the server, so you would need to initiate a request that will do that for you when you clear the combo selection. Basics:
function OnClientBlurHandler(sender) {
var item = sender.findItemByText(sender.get_text());
if (!item) {
sender.clearSelection();
__doPostBack("", "");
}
}
which will generate a generic postback. You can use hidden buttons or hidden fields or other arguments to know where this postback originated from.
Option 2: hide the textbox with JavaScript, e.g.:
function OnClientBlurHandler(sender) {
var item = sender.findItemByText(sender.get_text());
if (!item) {
sender.clearSelection();
document.getElementById("<%=pnl44_txtQuantity.ClientID%>").style.display="none";
}
}
or something similar, depending on what the ACT control does with the textbox.
Edit: Found the solution, and posted the answer below.
In my ASP.NET c# project, I have a ListView (ParentList) bound to a DataSource. Within the ParentList, inside the ItemTemplate, I have another Repeater (ChildList) bound to an attribute of each ListViewDataItem.
<asp:ListView ID="ParentList" runat="server" DataSourceID="objectDataSourceID" DataKeyNames="ID">
<ItemTemplate>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Attribute1") %>' />
</td>
<td valign="top">
<asp:Repeater ID="ChildList" runat="server" DataSource='<%# Eval("Attribute2ReturnsAnotherList") %>'>
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<%# DataBinder.Eval(Container.DataItem, "childAttribute") %>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
...
</LayoutTemplate>
</asp:ListView>
The code above works just fine, everything renders great. Now I want to add a link that will show/hide the ChildList. Something like the below:
<td valign="top">
<a href="javascript:ToggleListVisibility()" >Show/Hide</a>
<asp:Repeater ID="ChildList" runat="server" DataSource='<%# Eval("Attribute2ReturnsAnotherList") %>'>
</asp:Repeater>
</td>
How can I achieve this? I can't just use getElementById as I normally would, as the ul lists are within a Repeater nested inside the ListView. I tried obtaining the parentNode, then accessing the children and toggling the visibility of the ul element within:
function ToggleListVisibility(source) {
var childrenlist = source.parentNode.children;
for (var i = 0; i < childrenlist.length; i++) {
if (childrenlist[i].tagName == 'ul') {
if (childrenlist.style.display == "none") {
childrenlist.style.display = "block";
} else {
childrenlist.style.display = "none";
}
}
}
}
<a href="javascript:ToggleListVisibility(this)" >Show/Hide</a>
but that didn't work. IE's 'error on page' gave me this error:
The parentNode is null or not an object.
I also tried setting the a runat="server" attribute to my ul element, then using <%# ulID.ClientID %> to pass the ul id to the Js function, but visual studio complained:
Server elements cannot span templates.
Finally, I tried just passing the ul object into the Js function, like this:
function ToggleListVisibility(src) {
if (src.style.display == "none") {
src.style.display = "block";
} else {
src.style.display = "none";
}
}
<a href="javascript:ToggleListVisibility(ulID)" >Show/Hide</a>
...
<ul id="ulID">
which works, but it toggles the visibility for the ChildList in all rows within my ParentList. I want it to only toggle the visibility for the ChildList in its own row.
I'm at a loss of what to do. JavaScript is not my forte, and I would appreciate if someone can provide some pointers. Thanks in advance.
Ok hopefully this will get you going - it worked for me in hiding a list. My source HTML looks like this:
<table>
<tbody>
...
<tr>
<td>
Hide
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</td>
</tr>
...
</tbody>
</table>
<script type="text/javascript">
function toggleListVisibility(src) {
var childrenList = src.nextSibling.nextSibling;
childrenList.style.display = "none";
}
</script>
Note I had to use two "nextSibling"'s due to a text node that is created right after the "hide" anchor. Depending on how you structure your HTML, that bit will be different.
I found the painfully simple answer that makes me feel like a doofus. All I needed to do is wrap my Repeater in a <div> element, then show/hide the entire thing.
<a href="javascript:ToggleListVisibility('<%# Container.FindControl("divWrapper").ClientID %>')" >Show/Hide</a>
<div id="divWrapper" runat="server">
<asp:Repeater ID="ChildList" runat="server">
</asp:Repeater>
</div>
function ToggleListVisibility(id) {
var wrapper = document.getElementById(id);
if (wrapper.style.display == "none") {
wrapper.style.display = "block";
} else {
wrapper.style.display = "none";
}
}
Hooray for overthinking!
I have a table in DB:
NOTICE(NUM,TITLE,CONTENT)
I use Repeater Control in ASP to show all the notices in DB, like:
+----------+------------+|
|title1 (readmore)|
|
|title2 (readmore)|
|
|title3 (readmore)|
......
+------------------------+
All I want is: I read a "title" then I clicked on (readmore), the new page will be opened ( show detail's notice) with the "content" of that notice. How can I assign the num of notice without display it to define the notice in next page?
I just assign the title to property Text of a Label ID="TITLE" because I want to show the title of each notice.
All information I want to show in the this page is: title and the readmore( link to the next page). So that I don't know how to assign the num
My asp page: notice.asp
<asp:Repeater ID="RepDetails" runat="server" >
<HeaderTemplate>
<table style=" width:565px" cellpadding="0" class="borber">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="Title" runat="server" Text='<%#Eval("TITLE") %>' />
</td>
<td>
<asp:HyperLink ID="HyperLink1" runat="server" > (readmord)</asp:HyperLink>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
My C# code:notice.asp.cs
private void BindRepeaterData()
{
string sql = "select num,title from NOTICE";
DataTable ds = l.EXECUTEQUERYSQL(sql);
RepDetails.DataSource = ds;
RepDetails.DataBind();
}
And the next page: detailnotice.asp.cs
private void GetNotice()
{
string sql = "select * from NOTICE where num=" ;// num= the num of notice I choose in notice.asp page.
}
How can I assign a num in Label without display it? What property of Label Control or I should use a other Control ?
Hope you understand what I say. If you don't, please ask?
Basically the same as Sain but using the NavigateURL
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("NUM","~/detailpage.aspx?id={0}") %>' > (readmord)</asp:HyperLink>
hi you can ues anchor tag in place of hyper link button. you can pass num in the query string to the detail page.
<a href='detailpage.aspx?id=<%#Eval("NUM") %>'> (readmord)</a>
On details page you can get query string value and fetch details from database.
int myKey = 0;
if (!string.IsNullOrEmpty(Request.QueryString["id"]))
{
myKey = int.Parse(Request.QueryString["id"]);
// Use myKey to retrieve record from database
}
in a repeater, i want to do a function on every item bounded, example
<asp:Repeater runat="server" ID="rptArticleContent"
OnItemDataBound="rptArticleContent_ItemDataBound">
<ItemTemplate>
<tr>
<td width="365" valign="top" align="left" class="bodyContent" bgcolor="#FFFFFF">
<div>
<h2 class="h2">
<asp:Label runat="server" ID="dsds"> <%#Eval("Title") %></asp:Label>
</h2>
<div class="article-body">
<div class="Article-image">
<%#Eval("Image") %>
</div>
<%#Eval("Description") %>
</div>
<asp:Literal runat="server" ID="litArticleSource" Text='<%#Eval("Source") %>'>
</asp:Literal>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
in code behind i want to do some manipulation on the data inside the Literal
protected void rptArticleContent_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
Literal litArticleSource = rptArticleContent.FindControl
("litArticleSource") as Literal;
string ArticleSourcesR = litArticleSource.Text;
}
ArticleSourcesR still gives null, somes told me that when catching the controle with rptArticleContent.FindControl i should add something so it would be applied on every item bounded, what is that missing clue.?? what should be added?
You don't want to use rptArticleContent in the function, rather e.Item which will return the current repeater item instance.
Before I had a problem of findhing the control and setting the tab index. My problem now is that depending if there is data in some of the tabs they are set to Visible = true or false. If there is no data they are not visible (the tab that is) but the container and any of the other tabs that do have data are shown.
So when I do
$find('<%=myTabs.ClientID%>').set_activeTabIndex(1);
It gives me error because for that particular item there is no data in tab 0 so the tab I want to set now is at index 0 since the tab I want to set would move an index down. How can I know in which index this tab is at, using javascript?
Related code:
function getFocus() {
//need to be able to find out at which index pnlTab2 is at.. so i can set it
$find('<%=myTabs.ClientID%>').set_activeTabIndex(1);
document.getElementById('<%=pnlTab2.ClientID%>').focus();
return false;
}
<asp:UpdatePanel ID="UpdatePnl" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<ajaxToolKit:TabContainer runat="server" id="myTabs" CssClass="CustomTabStyle">
<ajaxToolKit:TabPanel ID="pnlTab1" runat="server" HeaderText="Tab 1">
<ContentTemplate>
<table>
<tr>
<td>
<div class="Tab1">
<asp:Label ID="lblPnl1" runat="server"></asp:Label>
</div>
</td>
</tr>
</table>
</ContentTemplate>
</ajaxToolKit:TabPanel>
<ajaxToolKit:TabPanel ID="pnlTab2" runat="server" HeaderText="Tab2">
<ContentTemplate>
<table>
<tr>
<td>
<div class="Tab2">
<asp:Label ID="lblPnl2" runat="server"></asp:Label>
</div>
</td>
</tr>
</table>
</ContentTemplate>
</ajaxToolKit:TabPanel>
</ajaxToolKit:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
SO basically, how can i find the index of a TabPanel so that I can set the activeTab to the index found?
=========================================================================
function setFocus() {
var success = false;
var tabInedx = 0;
var tabs = $find("<%= myTabs.ClientID %>").get_tabs();
for (; tabInedx < tabs.length; tabInedx++) {
if (tabs[tabInedx].get_id() == "<%= pnlTab2.ClientID %>") {
success = true;
break;
}
}
if (success) {
alert("Tab2 index: " + tabInedx)
}
}