Develop Reference

OnLoad method DataList item`s control

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!

Make repeater row checkable

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

How to append a row to a gridview instead of a full refresh

I have a drop down list. On changing the index of the dropdownlist , I populate a row in asp.net gridview.
Instead of refreshing the whole gridview, I would like to append the gridview with the new row whenever there is a change in the dropdown list value.
Anyone knows how it can be done ? I have my code below :
aspx :
<table>
<tr>
<td>
<div>
<asp:Label ID="lblClient" runat="server" Text="Client :" CssClass="label" ForeColor="Black"></asp:Label>
<asp:DropDownList ID="ddlClient" runat="server" AppendDataBoundItems="true" AutoPostBack="true" OnSelectedIndexChanged="ddlClient_SelectedIndexChanged">
<asp:ListItem Text="ALL" Value="0"></asp:ListItem>
</asp:DropDownList>
</div>
</td>
</tr>
<tr>
<td>
<asp:GridView ID="gvMainLog" runat="server" Visible="true" AllowSorting="True" AutoGenerateColumns="False"AllowPaging="true">
<Columns>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<div id='<%# "myRow" + Container.DataItemIndex %>'>
<asp:Literal ID="ltId" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Instruction")%>'></asp:Literal>
<img src="../Images/KnobRed.png" onclick='<%# "deleteRow(\"myRow" + Container.DataItemIndex+"\")" %>'/> </div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
aspx.cs
protected void ddlClient_SelectedIndexChanged(object sender, EventArgs e)
{
gvMainLog.DataSource = GetDealerSetupUtilityByClientId(1,1);
gvMainLog.DataBind();
}
javascript
<script type="text/javascript">
function deleteRow(rowId) {
$("#" + rowId).remove();
}
</script>

try this in javascript
//Add new row
function AddNewRecord()
{
var grd = document.getElementById('GridView1');
var tbod=grd.rows[0].parentNode;
var newRow=grd.rows[grd.rows.length - 1].cloneNode(true);
tbod.appendChild(newRow);
return false;
}
//delete old row
function delrow(rowindex)
{
var gridID=document.getElementById("<%=grid.ClientID %>");
gridID.deleteRow(rowindex+1);
return false;
}

This probably needs to be a comments but I want to show a line of code
Container.DataItemIndex should be replaced with <%#DataBinder.Eval(Container, "DataItemIndex")%> and the function deleteRow need to come out.
Your onclick should look like this
onclick="deleteRow(myRow + <%#DataBinder.Eval(Container, "DataItemIndex")%>"

How to access ItemTemplate control from ItemCommand event using Repeater

My repeater:
<asp:Repeater ID="rptrContacts" runat="server" OnItemCommand="rptrContact_ItemCommand" >
<div ID="itemTemplate>
<ItemTemplate>
<%# Eval("Name") %>
<%# Eval("Email") %>
<asp:LinkButton ID="lbtnEditContact" runat="server" CommandName="Edit" Text="Edit" CommandArgument='<%# Eval("ContactID") %>' />
<asp:Label ID="lblUpdateConfirm" runat="server" Text="Update Confirmed" Visible="false" />
</ItemTemplate>
</div>
<div ID="editTemplate runat="server" visibility="false">
Update your Info:<br>
Name: <asp:TextBox ID="txtName" runat="server Text="<%# Eval("Name") %>"/> <br>
Email: <asp:TextBox ID="txtEmail" runat="server Text="<%# Eval("Email") %>"/><br>
<asp:LinkButton ID="lbtnUpdateContact" CommandArgument='<%# Eval("ContactID") %>' CommandName="UpdateContact" runat="server" >Update</asp:LinkButton>
</div>
</asp:Repeater
and code for ItemCommand:
switch(e.CommandName)
{
case "Edit":
//make editTemplate div visible
HtmlGenericControl divEditContact = (HtmlGenericControl)e.Item.FindControl ("divEditContact");
divEditContact.Visible = true;
break;
case "Update":
Employee updateEmployee = new Employee
{
employeeName = txtName.Text:
employeeEmail = txtEmail.Text:
}
updateEmployee = API.UpdateEmployee(updateEmployee);
//display lblUpdateConfirm visible to True
// so user sees this confirm messge in the newly updated ItemTemplate
}
How can I access my lblUpdateConfirm and turn its Text state to visible from inside the ItemCommand, so that when the user sees the newly updated ITemTemplate, the label is showing the "Update Confirmed" message?

VB:
CType(e.Item.FindControl("lblUpdateConfirm"), Label).Visible = True;
C #:
Label lblToMakeVisible = (Label)e.Item.FindControl("lblUpdateConfirm");
lblToMakeVisible.Visible = True;

Radio buttons not working when binded with DataList control

When i tries to bind a radio button in a datalist it becomes multiselect as its name property becomes different even when i used GroupName to be same.
How can i make it act as radio button only.
<asp:DataList ID="dlRoomNo" runat="server" RepeatColumns="4">
<ItemTemplate>
<div class="orboxfour">
<ul class="boxfour">
<li>
<asp:RadioButton ID="rdoRoomNo" GroupName="roomNo"
Text='<%#Eval("Room No")%>' runat="server" />
</li>
</ul>
</div>
</ItemTemplate>
</asp:DataList>

There's a number of suggestions in the answers to this question.
I've solved it with a bit of jQuery, though the way I did it probably isn't the best way!
In my markup, I have a script block with
function SetUniqueRadioButton(current)
{
$('input:radio').attr('checked', false);
current.checked = true;
}
and then attached the script to a radio button in my code-behind in the ItemDataBound event
String uniqueRadioButtonScript;
RadioButton radioButton;
uniqueRadioButtonScript = "javascript:SetUniqueRadioButton(this);";
if (e.Row.RowType == DataControlRowType.DataRow)
{
radioButton = (RadioButton)e.Row.FindControl("MyRadioButton");
radioButton.Attributes.Add("onclick", uniqueRadioButtonScript)
}

the best option is like this:
1. Add script
function fnrad(rbtn) {
var radioList = document.getElementsByTagName("input");
for (var i = 0 ; i < radioList.length; i++) {
if (radioList[i].type == "radio") {
radioList[i].name = 'a';
radioList[i].setAttribute("Checked","");
}
}
rbtn.setAttribute("Checked", "checked");
}
Datalist will be like this:
<asp:DataList ID="dlEmails" RepeatLayout="Flow" runat="server">
<HeaderTemplate>
<table>
<tr>
<th>Select Email Address </th>
<th>Status</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:RadioButton ID="rbtnSelect" Text='<%#Eval("Emails") %>' onclick='fnrad(this);' GroupName="a" Checked='<%#Eval("Primary") %>' runat="server" /><br />
(<asp:Label ID="lblId" runat="server" Text='<%#Eval("Verified") %>'> </asp:Label>)
</td>
<td valign="middle">
<asp:Label ID="Label2" Style="display: none;" runat="server" Text='<%#Eval("Id") %>'> </asp:Label>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Main") %>'> </asp:Label>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>