I have a ASP.NET repeater consists of image and label(wrap inside a div).
I want to make the repeater row work like a checkbox.
<asp:Repeater ID="rpt" runat="server">
<ItemTemplate>
<div class="divItem">
<asp:HiddenField ID="hfIID" runat="server" Value='<%# Eval("ID") %>' />
<asp:Image ID="imgItem" runat="server" ImageUrl='<%# Eval("ImageURL") %>' />
<asp:Label ID="lblName" runat="server" Text='<%# Eval("ItemName") %>'></asp:Label>
</div>
</ItemTemplate>
</asp:Repeater>
For example, the repeater have 10 items.
When a user select item 3 and item 5(similar like a checkbox) and press Save, I need to get the selected Item ID.
you will need to add some client side scripting with jquery.
Here's how to do it:
in your .aspx define repeater as :
<asp:Repeater ID="rpt" runat="server">
<ItemTemplate>
<div class="divItem" id='divItem<%# Eval("ID") %>'>
<asp:HiddenField ID="hfSelected" runat="server" />
<asp:HiddenField ID="hfIID" runat="server" Value='<%# Eval("ID") %>' />
<asp:Image ID="imgItem" runat="server" ImageUrl='<%# Eval("ImageURL") %>' />
<asp:Label ID="lblName" runat="server" Text='<%# Eval("ItemName") %>'></asp:Label>
</div>
</ItemTemplate>
</asp:Repeater>
and then add this javascript:
<script>
$(function () {
$('.divItem').click(function () {
var item = $(this);
item.toggleClass("divItemSelected"); //mark div as selected: set background color, etc...
var selector = "#" + item.attr("id") + " input[type='hidden'][id*='hfSelected']";
var selected = $(selector).val();
if (selected == "true") {
$(selector).val("false");
} else {
$(selector).val("true");
}
});
});
</script>
And then in code-behind on button click, you do this:
protected void OnSaveClick(object sender, EventArgs e)
{
foreach (RepeaterItem item in rpt.Items)
{
HiddenField hfSelected = item.FindControl("hfSelected") as HiddenField;
bool selected = false;
bool.TryParse(hfSelected.Value, out selected);
if (selected)
{
HiddenField hfIID = e.Item.FindControl("hfIID") as HiddenField;
int id = Convert.ToInt32(hfIID.Value);
// do appropriate action as needed.
}
}
}
Hope this helps!
Regards,
Uros
Related
I am building a website right now using DataLists and I want to ask a question:
When using OnLoad on specific control in DataList item, the DataList has 5 items, but the function is called only 4 times (does what it needs to do but not on the last item)
C# code:
protected void ibDeleteAlbum_Load(object sender, EventArgs e)
{
foreach (DataListItem item in DataList1.Items)
{
ImageButton btnDelAlbum = item.FindControl("ibDeleteAlbum") as ImageButton;
btnDelAlbum.Visible = true;
}
}
HTML code:
<asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" RepeatColumns="4" >
<ItemTemplate>
<asp:Label ID="lblAlbumID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Id") %>' Visible="false"></asp:Label>
<asp:ImageButton ID="ibDeleteAlbum" type="image" runat="server" style="position:absolute; margin-right: 1.4vw; margin-top: 2.4vh;" Visible="false" ImageUrl="~/Images/ic_delete.png" OnClick="ibDeleteAlbum_Click" ToolTip="מחיקה" OnLoad="ibDeleteAlbum_Load" />
<asp:ImageButton ID="ibShowAlbums"
runat="server"
class="album"
ImageUrl='<%# DataBinder.Eval(Container.DataItem, "coverPhoto") %>'
CommandName="album"
CommandArgument='<%#DataBinder.Eval(Container.DataItem, "ID") %>'
OnCommand="ibShowAlbums_Command" />
<div class="albumNameShow" runat="server"><%#DataBinder.Eval(Container.DataItem, "albumName") %></div>
</ItemTemplate>
</asp:DataList>
Thanks ahead!
I have a listview which I want highlight the items on click.
Using the below code, I could set the CSS class. But the foreach loop doesn't clear the css class set before.
<asp:ListView ID="ListView2" runat="server" SelectedIndex="0" onitemcommand="ListView2_ItemCommand">
<ItemTemplate>
<asp:Panel ID="Panel8" runat="server" CssClass="left-listitem-div">
<asp:Image ID="Image1" runat="server" AlternateText="User Icon" ImageUrl='<%# Eval("UserType").ToString() == "AD_USER" ? "Images/icons/ldapuser32px.png" : "Images/icons/user32px.png" %>' CssClass="list-group-icon" />
<asp:Label ID="ListUserID" runat="server" Text ='<%#Eval("UserID") %>' CssClass="list-group-id" style="display:none;" />
<asp:LinkButton ID="ListFullName" runat="server" Text='<%#Eval("FullName") %>' CssClass="list-group-name" CommandName="select" CommandArgument = '<%# Eval("UserID") %>' Font-Underline="False" ForeColor="Black" Width="130" Height="30" />
<asp:Label ID="ListUserName" runat="server" Text='<%#Eval("UserName") %>' CssClass="list-group-username" style="display:none;" />
<asp:Label ID="ListUserType" runat="server" Text='<%#Eval("UserType") %>' CssClass="list-group-usertype" style="display:none;" />
<asp:Label ID="ListUserEnabled" runat="server" Text='<%#Eval("Enabled") %>' CssClass="list-group-enabled" style="display:none;" />
<asp:Label ID="ListUserDescription" runat="server" Text ='<%#Eval("Description") %>' CssClass="list-group-descri" style="display:none;" />
</asp:Panel>
</ItemTemplate>
</asp:ListView>
The Codebehind is below.
I used SelectedItemTemplate, but Listview selectedIndex is not changing.
If I set the selectedIndex on ItemCommand event, Its affecting only at the next postback.
protected void ListView2_ItemCommand(object sender, ListViewCommandEventArgs e)
{
if (e.Item.FindControl("Panel8") != null && e.Item.FindControl("Panel8") is Panel)
{
foreach (ListViewItem li in ListView2.Items)
{
Panel lipp = (Panel)e.Item.FindControl("Panel8");
lipp.CssClass = "left-listitem-div";
}
Panel pp = (Panel)e.Item.FindControl("Panel8");
pp.CssClass = "left-listitem-div selected";
}
}
Ok, don't change the event, because you use commandEventargs.
Just set the SelectIndex of the listview and then change the css for that item.
protected void ListView2_ItemCommand(object sender, ListViewCommandEventArgs e)
{
(sender as ListView).SelectedIndex = e.Item.DataItemIndex;
(e.Item.FindControl("Panel8") as Panel).CssClass += "SelectedCss";
}
In the loop you alwas refer to the currently selected item, that's your problem.
Change the loop to this: --> li
foreach (ListViewItem li in ListView2.Items)
{
Panel lipp = (Panel)li.FindControl("Panel8");
lipp.CssClass = "left-listitem-div";
}
I"m using DataList. in my FooterTemplate I add a radio button I I want check it. but it always return false.
This is my code
<asp:DataList ID="dlDelivery" OnItemDataBound="dlDelivery_DataBound" RepeatColumns="1" RepeatDirection="Vertical" Width="300" runat="server">
<ItemTemplate>
<asp:RadioButton ID="rdoDel" GroupName="aaa" OnCheckedChanged="rdoOther_Changed" AutoPostBack="true" runat="server" />
<asp:Label ID="lblDel1" Text='<%# Eval("Street") %>' runat="server" /><br />
<asp:Label ID="lblDel2" Text='<%# Eval("Suburb") %>' runat="server" />
<span class="clear" />
</ItemTemplate>
<FooterTemplate>
<asp:RadioButton ID="rdoOther" Text="Other" OnCheckedChanged="rdoOther_Changed" AutoPostBack="true" GroupName="aaa" runat="server" />
a
<br class="clear" />
</FooterTemplate>
</asp:DataList>
I check the rdoOther check like this
RadioButton rdoOther = (RadioButton)dlDelivery.Controls[dlDelivery.Controls.Count - 1].Controls[0].FindControl("rdoOther");
if (rdoOther.Checked = true ) // this always fales
{
}
How to fix it?
Try this
foreach (DataListItem item in dlDelivery.Items)
{
if (item.ItemType == ListItemType.Footer)
{
RadioButton rdoOther = (RadioButton)item.FindControl("rdoOther");
}
}
Simply search the radio button in e.Item:
protected void dlDelivery_DataBound(object sender, DataListItemEventArgs e)
{
RadioButton rdoOther = e.Item.FindControl("rdoOther") as RadioButton;
//rdoOther will be null if ListItemType is not footer.
if (rdoOther !=null && rdoOther.Checked)
{
// Do your tasks
}
}
I have a DataList inside another DataList. I want to access the child DataList "dlQuestion" events, ItemDataBound event. Also, I'm tring to find the control LableControl "lblQuestion" in the child datalist. How do I do that? Here's the mark-up:
<asp:DataList ID="dlSection" runat="server" Width="100%">
<ItemTemplate>
<div>
<asp:Label ID="lblSection" runat="server" Text='<%# Eval("Section") %>'></asp:Label>
<asp:HiddenField ID="hfSectionId" runat="server" Value='<%# Eval("SectionId") %>' />
</div>
<asp:DataList ID="dlQuestion" runat="server" >
<ItemTemplate>
<asp:Label ID="lblQuestion" runat="server" Text='<%# Eval("Question") %>'></asp:Label></td>
<asp:HiddenField ID="hfQuestionId" runat="server" Value='<%# Eval("QuestionId") %>' />
</ItemTemplate>
</asp:DataList>
</ItemTemplate>
</asp:DataList>
You need to handle ItemDataBound event of the dlQuestion DataList and get lblQuestion Label in that event handler:
Markup:
<asp:DataList ID="dlSection" runat="server" Width="100%">
<ItemTemplate>
<div>
<asp:Label ID="lblSection" runat="server" Text='<%# Eval("Section") %>'></asp:Label>
<asp:HiddenField ID="hfSectionId" runat="server" Value='<%# Eval("SectionId") %>' />
</div>
<asp:DataList ID="dlQuestion" runat="server" OnItemDataBound="dlQuestion_ItemDataBound">
<ItemTemplate>
<asp:Label ID="lblQuestion" runat="server" Text='<%# Eval("Question") %>'></asp:Label></td>
<asp:HiddenField ID="hfQuestionId" runat="server" Value='<%# Eval("QuestionId") %>' />
</ItemTemplate>
</asp:DataList>
</ItemTemplate>
</asp:DataList>
Code-behind:
protected void dlQuestion_ItemDataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
var lblQuestion = e.Item.FindControl("lblQuestion") as Label;
if (lblQuestion != null)
{
lblQuestion.ForeColor = Color.Red;
}
}
}
This is one way finding label control in child datalist...
//here I am finding item(DataList) of child Datalist
DataList dlSubChild = (DataList)childItem.FindControl("dlSubChild");
foreach (DataListItem subChildItem in dlSubChild.Items)
{
//here I am finding item(TextBox) of sub child Datalist
TextBox txtName = (TextBox)subChildItem.FindControl("txtName");
//set literal(litName) text
litName.Text = string.Format("{0}{1}", "Welcome ", txtName.Text);
}
i hope it will helps you ...
The repeater template:
<ItemTemplate>
<div style="width:100%">
<asp:Label style="display:none" ID="ArticleID" runat="server" text='<%# DataBinder.Eval(Container.DataItem, "ArticleID") %>'></asp:Label>
<asp:TextBox ID="ArticleOrder" runat="server" Width="20px" value='<%# DataBinder.Eval(Container.DataItem, "Order") %>'></asp:TextBox>
<a title="Edit Article" href="javascript:void(0)" onclick="parent.document.location.href='/cms/Secured/Article/EditArticle.aspx?ArticleID=<%# DataBinder.Eval(Container.DataItem, "ArticleID") %>'"><%# DataBinder.Eval(Container.DataItem, "Title") %> </a>
<asp:LinkButton id="delll" runat="server" OnCommand ="Del" CommandName ='<%# DataBinder.Eval(Container.DataItem, "ArticleID") %>'>(Delete)</asp:LinkButton>
(Replace Article)
</div>
</ItemTemplate>
The DB update code:
protected void up_Click1(object sender, EventArgs e)
{
foreach(RepeaterItem _item in rptArticleList.Items)
{
dcLigdol DB = new dcLigdol();
TextBox tbArticleOrder = (TextBox)_item.FindControl("ArticleOrder");
Label lblArticleID = (Label)_item.FindControl("ArticleID");
byte ArticleOrder;
if(tbArticleOrder.Text.Trim() == "")
ArticleOrder = byte.Parse("99");
else
ArticleOrder = byte.Parse(tbArticleOrder.Text.Trim());
int ArticleID = int.Parse(lblArticleID.Text.Trim());
int CategoryID = int.Parse(Request.QueryString["CategoryID"].ToString().Trim());
byte LocationID = byte.Parse(Request.QueryString["LocationID"].ToString().Trim());
DB.spCategory_Article_Location_Order_Update(ArticleID, ArticleOrder, CategoryID, LocationID);
}
Show();
}
If I put a brakepoint within the loop, I get a tbArticleOrder.Text = "" each time.
I can't figure out why this isn't working.
Thank you!
Make sure that you are not re-binding the repeater on the Page PostBack.
Stick the initial code that is Binding the repeater in a !Page.IsPostBack condition :)