c# - ajax CollapsiblePanelExtender inside datalist -
i creating data list have multiple person records displayed inside collapsible panel , iside each dataitem user can edit record etc.
following code
<%@ register tagname="createeditperson" src="~/ascx/create_edit_person.ascx" tagprefix="wd" %> <asp:datalist id="dlperson" runat="server" onitemdatabound="dlperson_onitemdatabound"> <itemtemplate> <div class="personrow"> <div class="personrowheader" id="diveditperson"> <div class="lastnamecolumn"> <asp:label id="lbllastname" runat="server"></asp:label </div> <div class="firstnamecolumn"> <asp:label id="lblfirstname" runat="server"></asp:label> </div> <div class="editcolumn"> <asp:image id="imgexpandimage" runat="server" class="divsearchlabel" meta:resourcekey="imgexpandimage" /> <asp:label id="lbleditperson" runat="server" meta:resourcekey="lbleditperson"></asp:label> </div> <div style="clear: both"> </div> </div> <ajaxtoolkit:collapsiblepanelextender id="cpperson" runat="server" meta:resourcekey="cpperson" collapsed="true" targetcontrolid="pnlpersonedit" collapsecontrolid="diveditperson" expandcontrolid="diveditperson" textlabelid="lbleditperson" collapsedsize="0" scrollcontents="false" suppresspostback="true" imagecontrolid="imgexpandimage"> </ajaxtoolkit:collapsiblepanelextender> <asp:panel id="pnlpersonedit" runat="server"> <div class="product_technical_details"> <wd:createeditperson id="createeditperson1" runat="server" /> </div> </asp:panel> </div> </itemtemplate> </asp:datalist>
my problem is, 1. when click on 1st dataitem panel, panels expands. need dynamic id of targetcontrolid ?
i solved follows: on itemdatabound event of datalist, set dynamic id of collapsible panel, target panel , collaped/expand control; , set "targetcontrolid", "collapsecontrolid" , "expandcontrolid" giving code snippet here:
protected void dlperson_onitemdatabound(object sender, datalistitemeventargs e) { if (e.item.itemtype == listitemtype.item || e.item.itemtype == listitemtype.alternatingitem) { //find controls in item template panel pnlpersonedit = e.item.findcontrolrecursive("pnlpersonedit") panel; collapsiblepanelextender cppersonedit = e.item.findcontrolrecursive("cppersonedit") collapsiblepanelextender; //this panel div "diveditperson" have changed panel panel pnleditpersonhead = e.item.findcontrolrecursive("pnleditpersonhead") panel; //some object db personobject personobject = e.item.dataitem personobject; //set id of collapsed/expanded panel unique key pnleditpersonhead.id += personobject.crmddressid.tostring(); //set id of target panel unique key pnlpersonedit.id += personobject.crmddressid.tostring(); //simillarly set id of collapsible panel extender cppersonedit.id += personobject.crmddressid.tostring(); //now set targetcontrolid, collapsecontrolid , expandcontrolid cppersonedit.targetcontrolid = pnlpersonedit.id; cppersonedit.collapsecontrolid = pnleditpersonhead.id; cppersonedit.expandcontrolid = pnleditpersonhead.id; } }
Comments
Post a Comment