Mehram says:
the problem is we need to click on left top on the image for the selection. while we need the user click picture for the selection/unselect (checkbox is ok)
When user clicks on the DataList item selection happens and checkbox checked or unchecked.
Mehram says:
secondly Putting two image together. result is showing but the second image is show down to the first image. while we need to show it beside of the first image.
To align image side by side use the div structure and place the Image control inside it.
Refer below html.
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
//On Page Load
$(function () {
SetSelection();
});
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
SetSelection();
}
});
};
function SetSelection() {
$('[id*=hfSelected]').val('0');
$('[id*=lblImage]').on('click', function () {
$(this).closest('td').find('input[type=checkbox]').click();
});
$('input[type = checkbox]').on('click', function () {
var isSelected = $(this).closest('td').find('[id*=hfSelected]');
if ($(isSelected).val() == "0") {
$(isSelected).val(1);
} else {
$(isSelected).val(0);
}
});
}
</script>
<section class="content-header">
<h1>Voting </h1>
</section>
<asp:UpdatePanel ID="upContent" runat="server">
<ContentTemplate>
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box-body table-responsive">
<div class="row">
<div class="col-xs-12">
<table class="table table-bordered">
<tr>
<th>Company</th>
<th>Election Year</th>
<th></th>
</tr>
<tr>
<td style="width: 200px;">
<asp:DropDownList ID="cboCompany" runat="server" CssClass="chzn-select ddst" Width="100%"></asp:DropDownList>
</td>
<td style="width: 380px;">
<asp:DropDownList ID="cboElectionYear" runat="server" CssClass="chzn-select ddst" Width="100%" Enabled="true"></asp:DropDownList>
</td>
<td style="text-align: left;">
<asp:LinkButton ID="btnGetReport" runat="server" CssClass="btn btn-default btn-flat toolbtn" Style="float: left; margin: 0px;">Get Data</asp:LinkButton>
</td>
</tr>
</table>
</div>
</div>
<br />
<div class="row" id="divOptions" runat="server" visible="false">
<div class="col-xs-12" style="text-align: center;">
<asp:LinkButton ID="lnkExcel" runat="server" CssClass="gridbuttonred" style="padding:4px; border-radius:0px" Visible="false">Export to Excel</asp:LinkButton>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12 col-lg-12 col-md-12 col- row">
<asp:DataList ID="dlCustomers" runat="server" RepeatColumns="4" CellSpacing="5" RepeatLayout="Table"
DataKeyField="ElectionContributorsID">
<ItemTemplate>
<table class="table" border="0">
<tr>
<th colspan="2"><b><%# Eval("MemberName") %></b></th>
</tr>
<tr>
<td colspan="2">
<asp:HiddenField ID="hfSelected" runat="server" />
<input type="checkbox" id='cb<%#Eval("ElectionContributorsID") %>' />
<label for='cb<%#Eval("ElectionContributorsID") %>'>
<div class="row">
<div style="float: left;">
<asp:Image ID="lblImage" runat="server" CssClass="img-circle" Width="100px" hight="100px"
ImageUrl='<%#DataBinder.Eval(Container.DataItem, "PicPath")%>' /></label>
</div>
<div style="float: left;">
<asp:Image ID="lblImage1" runat="server" CssClass="" Width="100px" hight="100px"
ImageUrl="~/Images/Tulips.jpg" />
</div>
</div>
</label>
</td>
</tr>
<tr>
<td>Phone:</td>
<td><%# Eval("MemberFatherName")%></td>
</tr>
<tr>
<td>Fax:</td>
<td><%# Eval("FamilyName")%></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
<asp:Button Text="Save" runat="server" OnClick="OnSave" CssClass="btn btn-success" />
</div>
</div>
</div>
</div>
</div>
</section>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="lnkExcel" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress DisplayAfter="0" ID="MPG1" AssociatedUpdatePanelID="upContent"
runat="server">
<ProgressTemplate>
<div id="overlay">
<div id="modalprogress">
<div id="theprogress">
<img alt="indicator" src="Images/loading.gif" />
<br /><br />
Please wait while system is updating ...
</div>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Content>
Screenshot
