I have a standard dropdown list and am able to databind to the list.
<asp:DropDownList runat="server" ID="ddlMake" ClientIDMode="Static" DataTextField="Name" DataValueField="URL" AppendDataBoundItems="true">
<asp:ListItem>Select Make</asp:ListItem>
</asp:DropDownList>
I would like to add a data-attribute to the option like below:
<asp:ListItem data-siteid="<%# DataBinder.Eval(Container.DataItem, "SiteID") %>">Select Make</asp:ListItem>
I'm obviously getting an error because it doesn't recognize the data-siteid.
The list is databound.
Any tips would be handy
You could do this in the code-behind. I'm not sure if this is the most elegant approach, but it should work.
Dim dataSrc() As String = {"ABC", "123", "!#*#"}
drp.DataSource = dataSrc
drp.DataBind()
For i = 0 To drp.Items.Count - 1
drp.Items(i).Attributes.Add("data-siteId", dataSrc(i))
Next
Also, if this is just something which is not databound, you could consider using the HtmlSelect control which should work as well:
<select id="drp2" runat="server">
<option data-siteId="2">ABC</option>
<option data-siteId="3">123</option>
<option data-siteId="4">#*!&</option>
</select>
I ended up using a repeater since the page didn't need to repost. This allowed me not to have to work with an ondatabound event.
<asp:Repeater runat="server" ID="rptDropDown">
<HeaderTemplate>
<select id="ddlMake">
<option value="">Select Make</option>
</HeaderTemplate>
<ItemTemplate>
<option data-siteid="<%# DataBinder.Eval(Container.DataItem, "SiteID") %>" value="<%# DataBinder.Eval(Container.DataItem, "URL") %>"><%# DataBinder.Eval(Container.DataItem, "Name") %></option>
</ItemTemplate>
<FooterTemplate>
</select>
</FooterTemplate>
</asp:Repeater>
You can rewrite it with pure html if no events handling is needed:
<select>
<%foreach (var item in DataSource){%>
<option data-siteid="<%=item.SiteID%>" value="<%=item.Value%>"><%=item.Name%> </option>
<%}%>
</select>
I ended up doing this (where ds is the dataset):
for (int row = 0; row <= ds.Tables(0).Rows.Count - 1; row++) {
ddl.Items(row).Attributes.Add("data-siteid", ds.Tables(0).Rows(row)("SiteID"));
}
Related
I have the below code to display dropdown, but looks both name and value pairs are coming same when it displayed in dropdown.
aspx.cs:
DropDownList dp = new DropDownList();
dp.ID = ToString();
dp.Items.Add(new ListItem("test1", "This is test1"));
dp.Items.Add(new ListItem("test2", "This is test2"));
Script.DataSource = dp.Items;
Script.DataBind();
aspx:
<asp:DropDownList ID="Script" runat="server" OnSelectedIndexChanged="ScriptSelected" AutoPostBack="true">
</asp:DropDownList>
When I debug came to know that both name and value are coming same, like below
<select name="Script" onchange="javascript:setTimeout('__doPostBack(\'Script\',\'\')', 0)" id="Script">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
but need like below
<select name="Script" onchange="javascript:setTimeout('__doPostBack(\'Script\',\'\')', 0)" id="Script">
<option value="test1">This is test1</option>
<option value="test2">This is test2</option>
</select>
You need to specify both the DataValueField and the DataTextField for your control.
<asp:DropDownList ID="Script" runat="server" OnSelectedIndexChanged="ScriptSelected" AutoPostBack="true" DataValueField="Value" DataTextField="Text">
</asp:DropDownList>
Or, if you want to do it server side,
DropDownList dp = new DropDownList();
dp.ID = ToString();
dp.DataTextField = "Text";
dp.DataValueField = "Value";
dp.Items.Add(new ListItem("test1", "This is test1"));
dp.Items.Add(new ListItem("test2", "This is test2"));
Script.DataSource = dp.Items;
Script.DataBind();
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 drop down list, say ddlTest, which has Opt1, Opt2 as items. On the same page I have a radio button list, with list items as rblItem1, rblItem2 and rblItem3. Now if a user selects Opt2 in the dropdown list, then I should hide rblItem3 or for any other option selected, I should show rblItem3 in the radio button list.
Can you please let me know if it is possible and how to do that using javascript.
<table>
<tr>
<td>
<asp:RadioButtonList ID="radiobuttonlist1" runat="Server" RepeatLayout="flow" RepeatDirection="horizontal">
<asp:ListItem Text="Radio 1" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="Radio 2" Value="2"></asp:ListItem>
<asp:ListItem Text="Radio 3" Value="3"></asp:ListItem>
</asp:RadioButtonList>
</td>
<td>
<input type="button" value="Submit" onclick="GetRadioButtonValue('<%= radiobuttonlist1.ClientID %>')" />
</td>
</tr>
</table>
Javascript Code:-
<script language="javascript" type="text/javascript">
// Get radio button list value
function GetRadioButtonValue(id)
{
var radio = document.getElementsByName(id);
for (var j = 0; j < radio.length; j++)
{
if (radio[j].checked)
//make hide the Item
}
}
</script>
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.
I'm attempting to iterate over the ListViewDataItems in an ASP.Net ListView, and use the ListView.ExtractItemValues to get the values from DataBoundControls. This works fine with ITextControls, but I am having difficulty getting the Selected Item from a RadioButtonList.
Here is my markup:
<asp:ListView ID="lvQuiz" runat="server">
<LayoutTemplate>
<fieldset>
<ul>
<asp:PlaceHolder ID="itemplaceholder" runat="server"></asp:PlaceHolder>
</ul>
</fieldset>
<asp:Button ID="cmdSubmit" runat="server" Text="Submit" OnClick="cmdSubmit_Click" />
</LayoutTemplate>
<ItemTemplate>
<li>
<fieldset>
<legend>
<asp:Label ID="lblQuestionText" runat="server" Text='<%# Bind("Question.QuestionText") %>' />
</legend>
<asp:RadioButtonList ID="rblResponse" runat="server" DataTextField="ResponseText" DataValueField="Id"
DataSource='<%# Bind("Question.PossibleResponses") %>'>
</asp:RadioButtonList>
</fieldset>
</li>
</ItemTemplate>
And here is the code where I am trying to extract the values:
var Q = (Quiz)Session["Quiz"];
foreach (var item in lvQuiz.Items)
{
var itemValues = new OrderedDictionary();
lvQuiz.ExtractItemValues(itemValues, item, true);
var myQuestion = Q.UserResponses.Keys
.Where(x => x.QuestionText == itemValues["Question.QuestionText"])
.Single();
Q.UserResponses[myQuestion] = itemValues["Question.PossibleResponses"].SelectedItem
}
My problem lies with that last line there. "Question.PossibleResponses" is bound to the RadioButtonList, but the value for itemValues["Question.PossibleResponses"] returns a list of ALL my RadioButtonList's options. How do I tell which one the user selected?
Well, I ended up implementing an extension method for Control that implements a Recursive FindControl, as outlined in Steve Smith blog post on Recursive FindControl. As I only had two bindable controls that I cared about (Label and a ListControl), this ended up being good enough. Tightly coupled to the UI, but I don't know what else to do.