Quantcast
Channel: ASP.NET AJAX + Ajax Control Toolkit (ACT)
Viewing all articles
Browse latest Browse all 5678

how can I update in a webform where is contained in a collapsible without using ajax updatepanel ?

$
0
0

I am working on a webform project (.net 4.0 -- VS2013).  The front end is in VB.Net, and the supporting project libraries in C#.  The page I am working on contains three collapsible <div>'s (powered by some .js libraries) which each of these <div>'s contains a user control (where the asxc contains a repeater control for displaying data lists within the respective <div> and the ascx is referenced in each of the three <div> on this page I am working on), each of these collapsible <div>'s also contain some buttons.  Each of the main <div class="collapsible"> display like a long button with the collaps/uncollapse ►▼ arrows, and each of these <div ...>'s also displays like a title in the form of ....

<h3>Executive to Assess (<%=Me.countUnmarkedRows%>/<%=Me.countTotalRows%>)</h3>

(markup code sample below).  Everything works OK.  The asxc in each <div> is contained/wrapped in an <updatepanel>.  When I mark a row (click a checkbox on the row) and then click an update button in that <div> the contained list gets updated.  I need to reflect the updated counts <%=Me.countUnmarkedRows%> in the (so called title section) of the respective <div>.  The only way I have been able to do this is by wrapping another <updatepanel> around this title thing in each main <div ....>

<asp:UpdatePanel runat="server"><contenttemplate><h3>Executives to Assess (<%=Me.countUnmarkedRows%>/<%=Me.countTotalRows%>)</h3></contenttemplate></asp:UpdatePanel>

But -- one (of two) problems I am having is that by adding another separate <updatepanel> to each of these main <div>'s causes each <div> to display thicker (like from height:20px to height:40px).  I tried adding a style each <div> but then the title doesn't display correctly in the <div> (displays too low -- almost hidden).  The other problem is that once I click the Update button the collapse/uncollaps ►▼ arrows disappear.

Before I go ballistic in the codebehind and add the collapse/uncollapse ►▼ arrows to the titles as part of the text and just live with the fatter <div>'s I would like to know if there is javascript/jquery I could use to update <%=Me.countUnmarkedRows%> in the respective <div>.  Note:  my basic task is to duplicate a page that uses a Telerik control that does the exact same thing except without the processing overhead.  The Telerik page works fine for like an 8 core processor machine.  Most of our users only have 4 cores (whatever -- I have to eliminate the Telerik).  I almost have this project nailed except for updating the row count vars.  Is there some JS technique I could use to achive my objective?  Or is there another way I could display the row counts in the title area?  What would these ways be?  What JS could I use?  Can I tweak the JS I am using (below) which make the <div>'s collapsible?

<div class="collapsible"> <%--<asp:UpdatePanel runat="server"><contenttemplate>--%>                        <h3>Executives to Assess (Assigned to Panel Member)</h3>    <%--</contenttemplate></asp:UpdatePanel> --%> <div id="div1ss" runat="server"><asp:UpdatePanel runat="server"><contenttemplate><div id="Div7" align="right" runat="server"><asp:ImageButton ID="DefaultImageButton1Atest" OnClick="DefaultButton1Test_Click" Enabled="True" CssClass="panel_long_button" SkinID="ApplyDefaultButton" runat="server"/></div>                <asp:Button runat="server" Style="display:ruby" ID="btnNew3" Text="get Panel Member Data" OnClick="LoadPanelMember_Click" /> <uc:BoardDefaultControlTest ID="LoadPanelMember" runat="server" PnlTest="3" /></contenttemplate></asp:UpdatePanel></div></div>  <div class="collapsible"><%--<asp:UpdatePanel runat="server"><contenttemplate>--%>            <h3>Executives to Assess (<%=Me.cntExecRating%>/<%=Me.cntExecs%>)</h3> <%--</contenttemplate></asp:UpdatePanel>--%><div><asp:UpdatePanel runat="server"><contenttemplate><div id="Div1" align="right" runat="server"><asp:ImageButton ID="DefaultImageButton2Atest" OnClick="DefaultButton2Test_Click" Enabled="True" CssClass="panel_long_button" SkinID="ApplyDefaultButton" runat="server"/></div><asp:Button runat="server" Style="display:normal" ID="btnNew2" Text="get Required Member Data" OnClick="LoadRequired_Click" /> <uc:BoardDefaultControlTest ID="LoadRequired" runat="server" PnlTest="2" /></contenttemplate></asp:UpdatePanel></div></div>      <div class="collapsible">   <h3>Executives Without an Endorsed Assessment</h3>                                <div><asp:UpdatePanel runat="server"><ContentTemplate><asp:Button runat="server" Style="display:normal" ID="btnNew1" Text="get UnEndorsed Member Data" OnClick="LoadUnEndorsed_Click" /> <uc:BoardDefaultControlTest ID="LoadUnEndorsed" runat="server" PnlTest="1" /></ContentTemplate></asp:UpdatePanel></div>                                                   </div>           <script type="text/javascript">$(document).ready(function () {$(".collapsible").accordion({ collapsible: true, active: false, heightStyle: "content" });$(".position").accordion({
        collapsible: true,
        active: false,
        heightStyle: "content",
        icons: false,
        beforeActivate: function (event, ui) { BeforeActivate(event, ui); }
      });
  });</script>


Viewing all articles
Browse latest Browse all 5678

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>