Web Part's Update Panel Ajax feature

Yang Wen asked on March 3, 2016 18:14

I have a basic repeater web part that is hooked up to a SQL Datasource.

I would like for the output of the repeater to refresh asynchronously. I've enabled the Use Update Panel checkbox on the repeater web part. The expectation is that the HTML output of the repeater would be wrapped in an Update Panel DIV. Anything inside the Update Panel DIV would be updated via AJAX.

However this is not what's happening. Below is a snippet from the HTML source. It shows that the Update Panel DIV is added as sibling to the Table that the repeater outputs. I need for the Update Panel DIV to be a parent to the Table. Currently, the Table isn't being updated when I trigger the update panel refresh.

Any idea how to force the update panel to be a parent of the table element?

<div id="blahblah_sys_pnlUpdate"></div><table class="table scada_table"><tbody><tr>....

Recent Answers

Bryan Soltis answered on March 4, 2016 18:22

Hi Yang,

The "Use update panel" option only wraps the webpart / container in an update panel. Anything that causes a postback in the webpart will then be loaded using AJAX and a partial render. While this works great for simple forms and other elements, I have often created a custom webpart with a complex update process and used that in my sites. If you need to explicitly control the naming / layout / nesting of your controls, you may need to look into a custom web part to achieve what you need.



0 votesVote for this answer Mark as a Correct answer

Yang Wen answered on March 4, 2016 19:33 (last edited on March 4, 2016 19:44)

Hi Bryan,

As stated in my original post, the expectation is the output of the webpart would be wrapped by an update panel parent element.

However as demonstrated in my code snippet. When I enabled Update Panel, the web part outputs a sibling update panel DIV next to the table outputted from the transformation template. The webpart is not creating a parent Update Panel element.

The Update Panel generated by Kentico is working other than the incorrect wrapping of elements. When I call ___doPostBack("updatePanelID"), the AJAX request occurs and the response contains the updated table markup. However, the response payload gets appended to the sibling Update Panel DIV, rather than replacing the table element(due to incorrect wrapping)

To re-iterate the code structure that I expect vs what I actually observe.

Expected (update panel wrapper element):

<div id="updatePanelID"><table class="table scada_table"><tbody><tr>....</table></div>

Observed (update panel sibling element):

<div id="updatePanelID"></div><table class="table scada_table"><tbody><tr>....</table>
0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.