How to bind nested repeater using imagebutton in updatepanel - c#

I was using a simple html img with jQuery to show the nested table and binding the repeater on itemdatabound. Problem is, this was very expensive by getting all sub items from items in the list at the same time. So I decided it's better when i click the collapse image to show the nested table I should bind the repeater in there.
For this I use imagebutton and command argument to get the ID and use update panel to stop postback from button, but the repeater won't update?
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="rptInventarioLocalizacoes_ItemCommand">
<HeaderTemplate>
<table id="tblInventarioLocalizacoes" class="table table-bordered table-striped dataTable text-center">
<thead class="thead-dark">
<tr>
<th></th>
<th>Nª</th>
<th>Localização</th>
<th>Etq. Por Inventariar</th>
<th>Etq. Inventariadas</th>
<th>Precisão</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:ImageButton ID="ibtnCollapse" runat="server" Style="cursor: pointer" ImageUrl="../../Images/Collapse/plus.png" Width="20" CommandName="BindEtiquetas" CommandArgument='<%# Eval("Localizacao") %>' />
<asp:Panel ID="pnlInventarioEtiquetas" runat="server" Style="display: none">
<asp:UpdatePanel runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ibtnCollapse" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Repeater ID="rptLocalizacoesEtiquetas" runat="server">
<HeaderTemplate>
<table id="tblLocalizacoesEtiquetas" class="nestedtable table table-bordered table-striped dataTable">
<thead class="thead-dark">
<tr>
<th>#</th>
<th>Etiqueta</th>
<th>Validar</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblRowIndex" runat="server" Text='<%# (((RepeaterItem)Container).ItemIndex + 1) %>' />
</td>
<td>
<asp:Label ID="lblEtiqueta" runat="server" Text='<%# Eval("Etiqueta") %>' />
</td>
<td>
<asp:CheckBox ID="chkEtiqueta" runat="server" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
<asp:Button ID="btnAddEtiqueta" runat="server" CssClass="btn btn-default" Text="Adicionar Etiqueta" BackColor="#020023" ForeColor="White" Font-Bold="true" />
<asp:Button ID="btnInventariar" runat="server" CssClass="btn btn-default" Text="Inventariar Etiquetas" BackColor="#020023" ForeColor="White" Font-Bold="true" />
</FooterTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</td>
<td>
<asp:Label ID="lblRowIndex" runat="server" Text='<%# (((RepeaterItem)Container).ItemIndex + 1) %>' />
<asp:Label ID="lblIdlocalizacao" runat="server" Text='<%# Eval("IdInventarioLocalizacao") %>' Style="display: none" />
</td>
<td>
<asp:Label ID="lblLocalizacao" runat="server" Text='<%# Eval("Localizacao") %>' />
</td>
<td>
<asp:Label ID="lblEtiquetasPorInventariar" runat="server" Text='<%# Eval("EtiquetasPorInventariar") %>' />
</td>
<td>
<asp:Label ID="lblEtiquetasInventariadas" runat="server" Text='<%# Eval("EtiquetasInventariadas") %>' />
</td>
<td>
<asp:Label ID="lblPrecisao" runat="server" Text='<%# Eval("Precisao") %>' />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>

Related

unable to export html table content to excel in asp.net

when the html table is exported to excel from asp.net the table is displayed but the content inside the table is not displayed below is my code.
protected void btnExportToExcel_Click(object sender, EventArgs e)
{
Response.Clear();
Response.Buffer = true;
lblCategorystatusReportHeader.Visible = true;
Response.AddHeader("content-disposition",
"attachment;filename=StatusReport.xls");
Response.Charset = "";
Response.ContentType = "application/vnd.ms-excel";
StringWriter sw = new StringWriter();
HtmlTextWriter hw = new HtmlTextWriter(sw);
//Panel preOrderPanel = (Panel)rpt1.FindControl("pnlPreOrder");
//rptCP.RenderControl(hw);
//pnlPreOrder.RenderControl(hw);
order.RenderControl(hw);
string output = sw.ToString();
output = "<html><head><meta charset=" + Encoding.UTF8.WebName + " /></head><body>" + output + "</body></html>";
Response.Output.Write(output);
Response.Flush();
Response.End();
lblCategorystatusReportHeader.Visible = false;
}
below is the aspx code
&nbsp
</asp:TableRow>
</asp:Table>
<table>
<tr>
<td>
&nbsp
</td>
</tr>
</table>
<table>
<%-- <tr style="text-align:center">
<td colspan="20" style="font-size:16px; padding-left:100px;background-color:#90cad9;border:1px solid black;display:none">
<b><asp:Label ID="lblCategorystatusReportHeader" runat="server" Text="Category Status Report"></asp:Label></b>
</td>
</tr>--%>
<tr>
<td style="width:150px !important;vertical-align:middle;text-align:center; border-style:solid; border-width:1px" rowspan="2">
<asp:Label ID="lblCPPre" runat="server"></asp:Label>
</td>
<td>
<%-- <asp:Panel ID="pnlPreOrder" runat="server">--%>
<table border="1" style="border-collapse:collapse">
<tr>
<%--<td stylwe="width:40px">
<asp:Label ID="lblCPPre" runat="server"></asp:Label>
</td>--%>
<td style="vertical-align:middle;background-color:#90cad9;text-align:center">
<div style="width:100px !important">Category CP</div>
</td>
<td>
<asp:Label ID="lblMessagePre" runat="server" Text="No Records found" Visible ="false" ForeColor="Red"></asp:Label>
<asp:Repeater ID="rptStylePO" runat="server" OnItemDataBound="rptStylePO_ItemDataBound">
<ItemTemplate>
<table border="1" style="border-collapse:collapse;border-spacing:0px">
<tr>
<td class="stylestatusReport">
<div style="width:100px !important"> <asp:HiddenField ID="styleid" runat="server" Value='<%# Container.DataItem.ToString() %>'/>
<asp:Label ID="lblStyle" runat="server"></asp:Label></div>
</td>
<td>
<asp:Label ID="lblNoMilestonePre" runat="server" Text="No Records found" Visible ="false" ForeColor="Red"></asp:Label>
<asp:Repeater ID="rptt" runat="server" OnItemDataBound="rptt_ItemDataBound">
<ItemTemplate>
<table>
<tr>
<td style="width:60px;vertical-align:middle;text-align:center">
<div style="width:60px !important"><asp:HiddenField ID="stlId" runat="server" Value='<%# Container.DataItem.ToString() %>' /></div>
</td>
<td>
<asp:DataList ID="dataListPO" runat="server" RepeatDirection="Horizontal" OnItemDataBound="dataListPO_ItemDataBound">
<ItemTemplate>
<table border="1" style="border-collapse:collapse; border-spacing:0px" >
<tr>
<td style="word-wrap:break-word;width:110px; height:60px; color:#000000;vertical-align:middle;text-align:center; background-color:#90cad9 ; font-size:11px;">
<div style="word-wrap:break-word;width:100%;font-size:13px">
<asp:Label ID="lblMilestoneValue" runat="server" Text='<%# Eval("MilestoneName") %>'></asp:Label></div>
</td>
</tr>
<tr>
<td style="text-align:left;">
<asp:Table ID="tblStatus" runat="server" Width="100%">
<asp:TableRow ID="rowStatus" runat="server">
<asp:TableCell ID="cellStatus1" Width="25px" runat="server"><div style="width:100px; text-align:justify"><asp:Label ID="lblForecastedDate" Font-Size="13px" runat="server" Width="50%" ForeColor="Black"></asp:Label></div></asp:TableCell>
<asp:TableCell ID="cellStatus" Width="25px" runat="server"> <div style="width:100px; text-align:center">
<asp:Label ID="lblStatus" Font-Size="13px" runat="server" ForeColor="White"></asp:Label></div>
</asp:TableCell>
</asp:TableRow></asp:Table>
<asp:HiddenField ID="hdnPlannedDate" runat="server" Value='<%# Eval("MilestonePlannedDate") %>'></asp:HiddenField>
<asp:HiddenField ID="hdnRevisedDate" runat="server" Value='<%# Eval("MilestoneRevisedDate") %>'></asp:HiddenField>
<asp:HiddenField ID="hdnActualDate" runat="server" Value='<%# Eval("MilestoneActualDate") %>'></asp:HiddenField>
<asp:HiddenField ID="hdnMilestoneStatus" runat="server" Value='<%# Eval("MilestoneStatus") %>' />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</td>
</tr>
</table>
<%-- </asp:Panel>--%>
</td>
</tr>
<tr>
<td>
<%-- <asp:Panel ID="pnlPostOrder" runat="server">--%>
<table border="1" style="border-collapse:collapse;">
<tr>
<%--<td style="width:40px">
<asp:Label ID="lblCPPost" runat="server"></asp:Label>
</td>--%>
<td style=" background-color:#90cad9; font-size:14px;vertical-align:middle;text-align:center;white-space:nowrap; " ><div style="width: 100px;">Item CP</div></td>
<td style="font-size:14px">
<asp:Label ID="lblMessagePost" runat="server" Text="No Records found" Visible ="false" ForeColor="Red"></asp:Label>
<asp:Repeater ID="rptStylePostOrder" runat="server" OnItemDataBound="rptStylePostOrder_ItemDataBound">
<ItemTemplate>
<table border="1" style="border-collapse:collapse">
<tr>
<td class="stylestatusReport">
<div style="width:100px !important"><asp:HiddenField ID="styleid" runat="server" Value='<%# Container.DataItem.ToString() %>'/>
<asp:Label ID="lblStyle" runat="server"></asp:Label></div>
</td>
<td>
<asp:Label ID="lblNoMilestonePost" runat="server" Text="No Records found" Visible ="false" ForeColor="Red"></asp:Label>
<asp:Repeater ID="rptPO" runat="server" OnItemDataBound="rptPO_ItemDataBound">
<ItemTemplate>
<table>
<tr>
<td style="word-wrap:break-word;width:60px;vertical-align:middle;text-align:center;">
<div style="width:60px">
<asp:Label ID="lblPostOrderNumber" runat="server"></asp:Label>
<asp:HiddenField ID="hdnStylePOID" runat="server" Value='<%# Container.DataItem.ToString() %>'/></div>
</td>
<td>
<asp:DataList ID="dataListPostOrder" runat="server" RepeatDirection="Horizontal" OnItemDataBound="dataListPostOrder_ItemDataBound">
<ItemTemplate>
<table border="1" style="border-collapse:collapse">
<tr>
<td style="word-wrap:break-word;width:110px; height:60px;background-color:#90cad9 ; font-size:11px;vertical-align:middle;text-align:center">
<div style="word-wrap:break-word;width:100%; font-size:13px"><asp:Label ID="lblMilestoneValuePost" runat="server" Text='<%# Eval("MilestoneName") %>'></asp:Label></div>
</td>
</tr>
<tr>
<td style="text-align:left">
<asp:Table ID="tblStatusPost" runat="server" Width="100%">
<asp:TableRow ID="rowStatusPost" runat="server">
<asp:TableCell ID="cellStatus1Post" Width="25px" runat="server">
<div style="width:100px;text-align:justify;"><asp:Label ID="lblForecastedDatePost" Font-Size="13px" runat="server" Width="50%" ForeColor="Black"></asp:Label></div></asp:TableCell>
<asp:TableCell ID="cellStatusPost" runat="server"><div style="width:100px;text-align:center">
<asp:Label ID="lblStatusPost" Font-Size="13px" runat="server" Width="100%" ForeColor="White"></asp:Label></div></asp:TableCell></asp:TableRow></asp:Table>
<asp:HiddenField ID="hdnPlannedDatePost" runat="server" Value='<%# Eval("MilestonePlannedDate") %>'></asp:HiddenField>
<asp:HiddenField ID="hdnRevisedDatePost" runat="server" Value='<%# Eval("MilestoneRevisedDate") %>'></asp:HiddenField>
<asp:HiddenField ID="hdnActualDatePost" runat="server" Value='<%# Eval("MilestoneActualDate") %>'></asp:HiddenField>
<asp:HiddenField ID="hdnMilestoneStatusPost" runat="server" Value='<%# Eval("MilestoneStatus") %>' />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</td>
</tr>
</table>
<%-- </asp:Panel>--%>
</td>
</tr>
</table>
[Below is the image of the table that is being displayed in excel.]
http://i.stack.imgur.com/JhHQo.png
actual image
[1]: http://i.stack.imgur.com/ghl8I.png

How to avoid a page refresh when CheckBox selected in repeater in C#?

In an asp.net web page with a repeater control, how can I avoid a complete page refresh when I select a checkbox in the header to check all checkboxes in the item template rows?
My project is based on asp.net C#, with SQL Server as database.
<asp:Repeater ID="Repeater_product_detail" runat="server" OnItemCommand="Repeater_product_detail_ItemCommand" OnItemDataBound="Repeater_product_detail_ItemDataBound">
<HeaderTemplate>
<table class="table table-striped table-bordered ">
<thead>
<tr>
<td> <asp:CheckBox ID="chk_select" AutoPostBack="true" runat="server" OnCheckedChanged="chk_select_CheckedChanged"/> </td>
<th>SubCategory</th>
<th>Product Name</th>
<th>Product image</th>
<th>Product Price</th>
<th>in stock</th>
<th>Type for</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:CheckBox ID="chkDelete" AutoPostBack="true" runat="server" />
<asp:Label ID="lbl_id" Visible="false" runat="server" Text='<%# ("int_product_id") %>'></asp:Label>
</td>
<td>
<asp:Label ID="lbl_sub_cate" runat="server" Text='<%# Eval("txt_sub_category_name") %>'></asp:Label>
<asp:DropDownList ID="ddl_sub_category" Width="100px" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "txt_sub_category_name") %>' runat="server" Visible="false" > </asp:DropDownList>
</td>
<td> <asp:Label ID="lbl_product_name" runat="server" Text='<%# Eval("txt_product_name") %>'></asp:Label>
<asp:TextBox ID="txt_product_name" BackColor="#d4d0c8" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "txt_product_name")%>' Visible="false"></asp:TextBox>
</td>
<td> <%--<asp:Label ID="lbl_product_image" runat="server" Text='<%# Eval("product_img_small") %>'></asp:Label>--%>
<asp:Image ID="Image1" Height="50px" Width="50px" ImageUrl='<%# Eval("product_img_small") %>' runat="server" />
</td>
<td> <asp:Label ID="lbl_product_price" runat="server" Text='<%# Eval("txt_product_price") %>'></asp:Label>
<asp:TextBox ID="txt_product_price" Width="60px" BackColor="#d4d0c8" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "txt_product_price")%>' Visible="false"></asp:TextBox>
</td>
<td> <asp:Label ID="lbl_stock" runat="server" Text='<%# Eval("in_stock") %>'></asp:Label>
<asp:TextBox ID="txt_stock" BackColor="#d4d0c8" Width="60px" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "in_stock")%>' Visible="false"></asp:TextBox>
</td>
<td> <asp:Label ID="lbl_type" runat="server" Text='<%# Eval("cate_type") %>'></asp:Label>
<asp:DropDownList ID="ddl_type" runat="server" Width="60px" DataTextField="cate_type" Visible="false"></asp:DropDownList>
</td>
<td>
<asp:LinkButton ID="lnk_edit" CommandArgument='<%# Eval("int_product_id") %>' CommandName="edit" runat="server">Edit</asp:LinkButton>
<asp:LinkButton ID="lnk_update" CommandArgument='<%# Eval("int_product_id") %>' Visible="false" CommandName="update" runat="server">Update</asp:LinkButton>
<asp:LinkButton ID="lnk_cancel" CommandArgument='<%# Eval("int_product_id") %>' Visible="false" CommandName="cancel" runat="server">Cancel</asp:LinkButton>
<asp:LinkButton ID="lnk_delete" CommandArgument='<%# Eval("int_product_id") %>' CommandName="delete" OnClientClick='javascript:return confirm("Are you sure you want to delete?")' runat="server">Delete</asp:LinkButton>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
<tr style="background-color:#15880a">
<td colspan="8">
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
<asp:LinkButton ID="lnk_del_selected" CommandArgument='<%# Eval("int_product_id") %>' OnClientClick='javascript:return confirm("Are you sure you want to delete?")' runat="server" OnClick="lnk_del_selected_Click">Deleted Selected</asp:LinkButton>
Behind Code
protected void chk_select_CheckedChanged(object sender, EventArgs e)
{
Control header_control = Repeater_product_detail.Controls[0].Controls[0]; // Find header Template's Items
CheckBox chk = header_control.FindControl("chk_select") as CheckBox;
if (!chk.Checked)
{
toggleCheckState(false);
}
else
{
toggleCheckState(true);
}
}
public void toggleCheckState(bool checkstate)
{
foreach (RepeaterItem item in Repeater_product_detail.Items) // Find Item Template's Items
{
if (item.ItemType == ListItemType.AlternatingItem || item.ItemType == ListItemType.Item)
{
CheckBox chk_delete = (CheckBox)item.FindControl("chkDelete");
chk_delete.Checked = checkstate;
}
}
Set AutoPostBack="false" in checkbox properties.
The crux of your question, I believe, is:
"when i select any value from drop down i load some data from database that depends on this selected value, i am facing a problem whenever selection changes page will be refreshed."
There are many ways to accomplish this, but it might require some restructuring to produce the desired effect. A relatively simple way to do this would be:
<asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
<ContentTemplate>
<asp:CheckBox ID="chk_select" AutoPostBack="true" runat="server" OnCheckedChanged="chk_select_CheckedChanged"/>
</ContentTemplate>
<Triggers>
<asp:Asyncpostbacktrigger controlid="chk_select" eventname="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
Set the AutoPostBack property to false on the checkbox.
The previous answer was almost correct, except the ASP.NET checkbox doesn't have a SelectedIndexChanged event. It should be CheckedChanged
<asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
<ContentTemplate>
<asp:CheckBox ID="chk_select" AutoPostBack="true" runat="server" OnCheckedChanged="chk_select_CheckedChanged"/>
</ContentTemplate>
<Triggers>
<asp:Asyncpostbacktrigger controlid="chk_select" eventname="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
set value of Autopostback attribute of checkbox which causing postback to false
You can set AutoPostBack property of CheckBox to false or else you can also use Ajax UpdatePanel control and put your CheckBox inside it so that whole page will not be reloaded and only checkbox value will be refreshed.

Changing css with data binding

as you can see there is a MsgIsNew in select command with type of Bit in my sql data base. how can i put the BodyLiteral, in a span tag, if the valu of MsgIsNew field, is true?
I'm using asp.net with C#.
Thank you very much.
<asp:Panel ID="Panel2" runat="server" Visible='<%# Eval("MasSender") %>' Width="100%" Wrap="False">
<table style="width: 100%;">
<tr>
<td>
<asp:Literal ID="BodyLiteral" runat="server" Text='<%# Eval("MsgBody") %>'></asp:Literal>
</td>
</tr>
<tr>
<td>
<asp:Literal ID="DateLiteral" runat="server" Text='<%# DisplayDate(Eval("MsgDate")) %>'></asp:Literal>
</td>
</tr>
</table>
</asp:Panel>
SelectCommand="SELECT DISTINCT MsgIsNew, MsgBody, MsgDate, FROM Message"
<asp:Panel ID="Panel2" runat="server" Visible='<%# Eval("MasSender") %>' Width="100%" Wrap="False">
<table style="width: 100%;">
<tr>
<td>
<asp:Label runat="server" Visible='<%# Eval("MsgIsNew") %>'>
<asp:Literal ID="BodyLiteral" runat="server" Text='<%# Eval("MsgBody") %>'></asp:Literal>
</asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Literal ID="DateLiteral" runat="server" Text='<%# DisplayDate(Eval("MsgDate")) %>'></asp:Literal>
</td>
</tr>
</table>
Or maybe more exact:
Visible='<%# Convert.ToBoolean(Eval("MsgIsNew")) %>
But you need to be sure that the return from database is boolean or by converting (0 or 1)...
If this is not what you ment please be more specific.

how to assign an item template (eval) value to a label outside the asp.net gridview control

I would like to assign the
<%# DataBinder.Eval(Container.DataItem, "Name")%>
which is within the gridview to a a label
Label2
outside the gridview. I cant figure out a way to do it since the Eval value is within the Gridview and I
need to use it outside the gridview. I have the code below.
Please let me know.
<div class="ModalPopup" id="PopupDiv1">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
<div class="modalHeader">
<table width="100%">
<tr>
<td class="title">
<asp:Label ID="Label2" Font-Bold="true" runat="server"></asp:Label>
</td>
<td>
<a href="javascript:void(0);" onclick="javascript:CloseModelPopup1();" class="CloseModal">
X</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="Div1" class="InsertBar">
<asp:Panel ID="Panel1" runat="server" HorizontalAlign="left" ScrollBars="Auto">
<asp:GridView ID="gDetails" OnRowDataBound="gvDetails_RowDataBound"
Orunat="server" CellPadding="5"
AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Image Width="32px" ID="statusImage" runat="server" Height="32px"></asp:Image>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LogId">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "LogId") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "Name")%> </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</div>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Try this out
<div class="ModalPopup" id="PopupDiv1">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
<div class="modalHeader">
<table width="100%">
<tr>
<td class="title">
<asp:Label ID="Label2" Font-Bold="true" runat="server"></asp:Label>
</td>
<td>
<a href="javascript:void(0);" onclick="javascript:CloseModelPopup1();" class="CloseModal">
X</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="Div1" class="InsertBar">
<asp:Panel ID="Panel1" runat="server" HorizontalAlign="left" ScrollBars="Auto">
<asp:GridView ID="gDetails" OnRowDataBound="gvDetails_RowDataBound"
Orunat="server" CellPadding="5"
AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Image Width="32px" ID="statusImage" runat="server" Height="32px"></asp:Image>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LogId">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "LogId") %>
CommandArgument='<%# Container.DataItemIndex %>' runat="server" ID="btnRequest"></asp:LinkButton>--%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "Name")%> </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</div>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>

ModalPopupExtender inside DataList show up onclick of ImageButton inside datalist item

I have a datalist filled with items from database and each item has an image button onclick of which I want to show a modalpopup containing the Description of the particular Item. Below is what I have dine so far but fail:
<asp:DataList ID="DataList1" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" Width="100%">
<ItemTemplate>
<table width="228px">
<tr>
<td width="20px" > </td>
<td width="160px" align="center">
<asp:Label ID="pID" runat="server" Visible="false" Text='<%# Eval("id") %>'></asp:Label><asp:Label ID="Label1" runat="server" Text='<%# Eval("ProductName") %>' Font-Size="8pt" ForeColor="#336699" Width="100%" />
</td>
<td align="right">
<asp:ImageButton ID="SpecificBtn" ImageUrl="images/SmallCallout.png" OnClick="SpecificBtn_Click" CommandArgument='<%# Eval("Id") %>' runat="server" />
<ajaxToolkit:ModalPopupExtender ID="mdl" runat="server" PopupControlID="pnl" TargetControlID="SpecificBtn" Enabled="True" CancelControlID="btn" DropShadow="true" Drag="True" ></ajaxToolkit:ModalPopupExtender>
</td>
</tr>
</table>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "GetImage.aspx?id=" + Eval("id") %>' /><br />
<table align="center" style="position:relative; left:2px;" cellspacing="0" cellpadding = "0" width="228px">
<tr>
<td style="background-color:Black;" colspan=2>
<div >
<asp:Image ID="Image2" ImageUrl="/images/cart.png" runat="server" />
<asp:Button CommandName="AddToCart" CssClass="anchor" OnClick="addProduct" CausesValidation="false" CommandArgument='<%# Eval("Id") %>' ID="addToHire" runat="server" Text=" Add To Cart " BackColor="Black" BorderColor="Black" BorderStyle="None" ForeColor="#F8CD20" Height="24" Font-Bold="true" Font-Size="10" />
</div>
</td>
</tr>
</table>
<br /><br />
</ItemTemplate>
<ItemStyle CssClass="dataListItemStyle" HorizontalAlign="Center" VerticalAlign="Top" />
</asp:DataList>
<asp:Panel ID="pnl" runat="server" visible="false" Width="300px" Height="300px" BackColor="red">
<asp:Label ID="Label2" runat="server" Text="Specification"></asp:Label>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("Specification") %>'></asp:Label>
<asp:Button ID="btn" runat="server" Text="cancel" />
</asp:Panel>
Code behind:
protected void SpecificBtn_Click(object sender, EventArgs e)
{
DataListItem dli = (DataListItem)((ImageButton)sender).Parent;
ModalPopupExtender ModalPopupExtender2 = (ModalPopupExtender)dli.FindControl("mdl");
pnl.Visible = true;
ModalPopupExtender2.Show();
}
Can somebody tell me how to acheive this and where I went wrong. Thanks.
use jquery..
function onimagebuttonclick()
{
$find('BehaviorIDofmodelpopupextender').show();
}
i hope this solves your problem..

Categories