Hello!

I have a project with one treeview with checkboxes enabled. I also have a control, with just one property. What i need is to add control every time a node is checked, where the control property takes value from node value checked. It means if you check the first node, the control will be added. If you check a second one, than 2 controls will be shown, and so on. If you uncheck a node, of course the respective control should disappear.

Ok, i'm able to do this, by adding controls at runtime, but this means that every time a control is added or removed the whole zone (panel) will be refreshed. If already there are 10 controls this can take a long time (because this control has a grid inside).

I need an approach to add and remove this control without refreshing the whole panel. I don't know the best way for this... Maybe by adding (and removing) a panel for each control (inside a big panel)? Or is there any better way?

Thank you!

Hi Renis,

In order to avoid postyback for the whole page you could add Ajax in your application. I could suggest you using RadAjaxmanger and add the needed controls into its setting. This will provide partial update only for particular controls. Please review the following online resources which should help achieve the required functionality:

http://www.telerik.com/help/aspnet-ajax/ajxajaxmanager.html
http://www.telerik.com/help/aspnet-ajax/ajxaddajaxsettingsprogrammatically.html
http://demos.telerik.com/aspnet-ajax/ajax/examples/common/loadingusercontrols/defaultcs.aspx


Sincerely yours,
Maria Ilieva
the Telerik team

Hi Maria!

I'm trying to add a usercontrol programatically to a panel (multiple times). It works fine as long as i "ajax" the treeview where controls are selected with the panel where they are added.

The problem is not the functionality, but speed!

I analyzed server responses and every time i add (or remove) a usercontrol, the whole panel is updated. This makes this update very very slow.

So i tried a different approach. I tried to put the AjaxSettings.AddAjaxSetting method inside the for-next cycle that load the controls and ajax the same treeview control with every usercontrol that is created. For example:


But this doesn't work :(

Instead removing addajaxsetting inside block and putting it outside in this mode works:
RadAjaxManager1.AjaxSettings.AddAjaxSetting(pema, Panel1, Nothing)

The problem with this mode is the slowness!

Any help?

Hello,

From the provided description I'm not able to completely understand how the user controls are loaded in your application. Note that the Ajax settings should be dynamically added  in a Page event handler, which is executed each time during the page lifecycle (Page_Load, Page_PreRender) so that the control could be ajaxified when the page is initially loaded. This is why they will not work in the for-next cycle that loads the controls.
I would suggest you to review the following help topic which elaborates on Ajax performance optimization.

Kind regards,
Maria Ilieva
the Telerik team

Hi Maria!

Hi,

Could you please elaborate a little bit more on your application? How have you cathead the response and what leave you to the point that the both grid controls are updated. Also pleas post some more code from the Ajax settings and the grid's relations so we could further research on this behavior.


Kind regards,
Maria Ilieva
the Telerik team

Hi Maria!

I used firebug to check the response. In response always exist both grids... I'm not saying that first control is updated (because nothing changes there). I'm saying that it exist in response. It means response is bigger than it can be.

To make things clear: Grid1 update Grid2. The response has both grids inside, while indeed only the second one is needed, because only the second one will be updated. I can give you a temporal address to check (privately)  and maybe you can verify it...

Thank you!

Hi,

I tried to replicate the described behavior but to no avail. Could you please test replicating this behavior in the following online example:
 http://demos.telerik.com/aspnet-ajax/grid/examples/programming/selectedvalue/defaultcs.aspx

Also please send us live url of the application and the Ajax settings so we could further research and provide more to-the-point answer

Greetings,
Maria Ilieva
the Telerik team

Hello Maria!

I checked your example and using firebug i found the same effect there. There are 3 grids, and clicking grid1 should update grid2 and grid3. It works fine, but the response has 3 grids. Why grid1 should exist in the response if it is not updated at all? This is the response i get using firebug (i removed the zone where viewstate beigns):



6170|updatePanel|RadGrid1Panel|<div id="RadGrid1" class="RadGrid RadGrid_Vista" style="width:95%;">


<!-- 2010.1.519.35 --><table cellspacing="0" class="rgMasterTable" border="0" id="RadGrid1_ctl00" style="width:100%;table-layout:auto;empty-cells:show;">
    <colgroup>
        <col  />
        <col  />
        <col  />
        <col  />
        <col  />
        <col  />
    </colgroup>
<thead>
        <tr>
            <th scope="col" class="rgHeader">CustomerID</th><th scope="col" class="rgHeader">CompanyName</th><th scope="col" class="rgHeader">ContactName</th><th scope="col" class="rgHeader">ContactTitle</th><th scope="col" class="rgHeader">Address</th><th scope="col" class="rgHeader">PostalCode</th>
        </tr>
    </thead><tfoot>
        <tr class="rgPager">
            <td colspan="6"><table cellspacing="0" border="0" style="width:100%;">
                <tr>
                    <td class="rgPagerCell NextPrevAndNumeric"><div class="rgWrap rgArrPart1">
                        <input type="button" name="RadGrid1$ctl00$ctl03$ctl01$ctl02" value=" " onclick="return false;__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl02','')" title="First Page" class="rgPageFirst" /> <input type="button" name="RadGrid1$ctl00$ctl03$ctl01$ctl03" value=" " onclick="return false;__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl03','')" title="Previous Page" class="rgPagePrev" />
                    </div><div class="rgWrap rgNumPart">
                        <a onclick="return false;" class="rgCurrentPage" href="javascript:__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl05','')"><span>1</span></a><a href="javascript:__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl07','')"><span>2</span></a><a href="javascript:__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl09','')"><span>3</span></a><a href="javascript:__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl11','')"><span>4</span></a><a href="javascript:__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl13','')"><span>5</span></a><a href="javascript:__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl15','')"><span>6</span></a><a href="javascript:__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl17','')"><span>7</span></a><a href="javascript:__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl19','')"><span>8</span></a><a href="javascript:__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl21','')"><span>9</span></a><a href="javascript:__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl23','')"><span>10</span></a><a title="Next Pages" href="javascript:__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl25','')"><span>...</span></a>
                    </div><div class="rgWrap rgArrPart2">
                        <input type="button" name="RadGrid1$ctl00$ctl03$ctl01$ctl28" value=" " onclick="javascript:__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl28','')" title="Next Page" class="rgPageNext" /> <input type="button" name="RadGrid1$ctl00$ctl03$ctl01$ctl29" value=" " onclick="javascript:__doPostBack('RadGrid1$ctl00$ctl03$ctl01$ctl29','')" title="Last Page" class="rgPageLast" />
                    </div><div class="rgWrap rgAdvPart">
                        <span id="RadGrid1_ctl00_ctl03_ctl01_ChangePageSizeLabel" class="rgPagerLabel">Page size:</span><div id="RadGrid1_ctl00_ctl03_ctl01_PageSizeComboBox" class="RadComboBox RadComboBox_Vista" style="width:46px;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;">
                            <table cellpadding="0" cellspacing="0" summary="combobox" border="0" style="border-width:0;">
                                <tr class="rcbReadOnly">
                                    <td class="rcbInputCell rcbInputCellLeft" style="width:100%;"><input name="RadGrid1$ctl00$ctl03$ctl01$PageSizeComboBox" type="text" class="rcbInput" id="RadGrid1_ctl00_ctl03_ctl01_PageSizeComboBox_Input" value="5" readonly="readonly" /></td><td class="rcbArrowCell rcbArrowCellRight"><a id="RadGrid1_ctl00_ctl03_ctl01_PageSizeComboBox_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a></td>
                                </tr>
                            </table><div class="rcbSlide" style="z-index:6000;"><div id="RadGrid1_ctl00_ctl03_ctl01_PageSizeComboBox_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_Vista " style="display:none;"><div class="rcbScroll rcbWidth" style="width:100%;"><ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;"><li class="rcbItem ">5</li><li class="rcbItem ">10</li><li class="rcbItem ">20</li><li class="rcbItem ">50</li></ul></div></div></div><input id="RadGrid1_ctl00_ctl03_ctl01_PageSizeComboBox_ClientState" name="RadGrid1_ctl00_ctl03_ctl01_PageSizeComboBox_ClientState" type="hidden" /><link class='Telerik_stylesheet' type='text/css' rel='stylesheet' href='/aspnet-ajax/WebResource.axd?d=QkjKx2Kfg6BROMxP27T6KlYSGWQbuu38fUCQUraL_CYHVoSN3HiMdsJxX2y0CcM3qoe-ogu_xURnZp7vbJKVOA2&amp;t=634098545760000000'></link>
                        </div>
                    </div><div class="rgWrap rgInfoPart">
                         &nbsp;<strong>92</strong> items in <strong>19</strong> pages
                    </div></td>
                </tr>
            </table></td>
        </tr>
    </tfoot><tbody>
    <tr class="rgRow" id="RadGrid1_ctl00__0">
        <td>1213 </td><td>mi compañli</td><td>asdfasfd</td><td>asdfa</td><td>dfas</td><td>asfasfdas</td>
    </tr><tr class="rgAltRow rgSelectedRow" id="RadGrid1_ctl00__1">
        <td>ALFKI</td><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Sales Representative</td><td>Obere Str. 57</td><td>12209</td>
    </tr><tr class="rgRow" id="RadGrid1_ctl00__2">
        <td>ANATR</td><td>Ana Trujillo Emparedados y helados</td><td>Ana Trujillo</td><td>Owner</td><td>Avda. de la Constitución 2222</td><td>05021</td>
    </tr><tr class="rgAltRow" id="RadGrid1_ctl00__3">
        <td>ANTON</td><td>Antonio Moreno Taquería</td><td>Antonio Moreno</td><td>Owner</td><td>Mataderos  2312</td><td>05023</td>
    </tr><tr class="rgRow" id="RadGrid1_ctl00__4">
        <td>AROUT</td><td>Around the Horn</td><td>Thomas Hardy</td><td>Sales Representative</td><td>120 Hanover Sq.</td><td>WA1 1DP</td>
    </tr>
    </tbody>

</table><input id="RadGrid1_ClientState" name="RadGrid1_ClientState" type="hidden" /><link class='Telerik_stylesheet' type='text/css' rel='stylesheet' href='/aspnet-ajax/WebResource.axd?d=QkjKx2Kfg6BROMxP27T6KlYSGWQbuu38fUCQUraL_Cbsx5cWXAjYHCirAIkmLwXG0&amp;t=634098545760000000'></link><link class='Telerik_stylesheet' type='text/css' rel='stylesheet' href='/aspnet-ajax/WebResource.axd?d=QkjKx2Kfg6BROMxP27T6KlYSGWQbuu38fUCQUraL_CZ7tJjnjMZPupXGzxxEZxSZpJP9LQ7qiKK96HDue75Srw2&amp;t=634098545760000000'></link>
    </div>
|3962|updatePanel|RadGrid2Panel|<div id="RadGrid2" class="RadGrid RadGrid_Vista" style="width:95%;">

<table cellspacing="0" class="rgMasterTable" border="0" id="RadGrid2_ctl00" style="width:100%;table-layout:auto;empty-cells:show;">
    <colgroup>
        <col  />
        <col  />
        <col  />
    </colgroup>
<thead>
        <tr>
            <th scope="col" class="rgHeader">OrderID</th><th scope="col" class="rgHeader">OrderDate</th><th scope="col" class="rgHeader">ShipCountry</th>
        </tr>
    </thead><tfoot>
        <tr class="rgPager">
            <td colspan="3"><table cellspacing="0" border="0" style="width:100%;">
                <tr>
                    <td class="rgStatus"><div id="RadGrid2_ctl00_ctl03_ctl01_statusPanel" style="visibility:hidden;">
                        &nbsp;
                    </div></td><td class="rgPagerCell NextPrevAndNumeric"><div class="rgWrap rgArrPart1">
                        <input type="submit" name="RadGrid2$ctl00$ctl03$ctl01$ctl02" value=" " onclick="return false;" title="First Page" class="rgPageFirst" /> <input type="submit" name="RadGrid2$ctl00$ctl03$ctl01$ctl03" value=" " onclick="return false;" title="Previous Page" class="rgPagePrev" />
                    </div><div class="rgWrap rgNumPart">
                        <a onclick="return false;" class="rgCurrentPage" href="javascript:__doPostBack('RadGrid2$ctl00$ctl03$ctl01$ctl05','')"><span>1</span></a><a href="javascript:__doPostBack('RadGrid2$ctl00$ctl03$ctl01$ctl07','')"><span>2</span></a>
                    </div><div class="rgWrap rgArrPart2">
                        <input type="submit" name="RadGrid2$ctl00$ctl03$ctl01$ctl10" value=" " title="Next Page" class="rgPageNext" /> <input type="submit" name="RadGrid2$ctl00$ctl03$ctl01$ctl11" value=" " title="Last Page" class="rgPageLast" />
                    </div><div class="rgWrap rgAdvPart">
                        <span id="RadGrid2_ctl00_ctl03_ctl01_ChangePageSizeLabel" class="rgPagerLabel">Page size:</span><div id="RadGrid2_ctl00_ctl03_ctl01_PageSizeComboBox" class="RadComboBox RadComboBox_Vista" style="width:46px;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;">
                            <table cellpadding="0" cellspacing="0" summary="combobox" border="0" style="border-width:0;">
                                <tr class="rcbReadOnly">
                                    <td class="rcbInputCell rcbInputCellLeft" style="width:100%;"><input name="RadGrid2$ctl00$ctl03$ctl01$PageSizeComboBox" type="text" class="rcbInput" id="RadGrid2_ctl00_ctl03_ctl01_PageSizeComboBox_Input" value="5" readonly="readonly" /></td><td class="rcbArrowCell rcbArrowCellRight"><a id="RadGrid2_ctl00_ctl03_ctl01_PageSizeComboBox_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a></td>
                                </tr>
                            </table><div class="rcbSlide" style="z-index:6000;"><div id="RadGrid2_ctl00_ctl03_ctl01_PageSizeComboBox_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_Vista " style="display:none;"><div class="rcbScroll rcbWidth" style="width:100%;"><ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;"><li class="rcbItem ">5</li><li class="rcbItem ">10</li><li class="rcbItem ">20</li><li class="rcbItem ">50</li></ul></div></div></div><input id="RadGrid2_ctl00_ctl03_ctl01_PageSizeComboBox_ClientState" name="RadGrid2_ctl00_ctl03_ctl01_PageSizeComboBox_ClientState" type="hidden" />
                        </div>
                    </div><div class="rgWrap rgInfoPart">
                         &nbsp;<strong>6</strong> items in <strong>2</strong> pages
                    </div></td>
                </tr>
            </table></td>
        </tr>
    </tfoot><tbody>
    <tr class="rgRow" id="RadGrid2_ctl00__0">
        <td>10643</td><td>8/25/1997</td><td>Germany</td>
    </tr><tr class="rgAltRow" id="RadGrid2_ctl00__1">
        <td>10692</td><td>10/3/1997</td><td>Germany</td>
    </tr><tr class="rgRow" id="RadGrid2_ctl00__2">
        <td>10702</td><td>10/13/1997</td><td>Germany</td>
    </tr><tr class="rgAltRow" id="RadGrid2_ctl00__3">
        <td>10835</td><td>1/15/1998</td><td>Germany</td>
    </tr><tr class="rgRow" id="RadGrid2_ctl00__4">
        <td>10952</td><td>3/16/1998</td><td>Germany</td>
    </tr>
    </tbody>

</table><input id="RadGrid2_ClientState" name="RadGrid2_ClientState" type="hidden" />
    </div>
|848|updatePanel|RadGrid3Panel|<div id="RadGrid3" class="RadGrid RadGrid_Vista" style="width:95%;">


<table cellspacing="0" class="rgMasterTable" border="0" id="RadGrid3_ctl00" style="width:100%;table-layout:auto;empty-cells:show;">
    <colgroup>
        <col  />
        <col  />
        <col  />
    </colgroup>
<thead>
        <tr>
            <th scope="col" class="rgHeader">Unit price</th><th scope="col" class="rgHeader">Quantity</th><th scope="col" class="rgHeader">Discount (%)</th>
        </tr>
    </thead><tbody>
    <tr class="rgRow" id="RadGrid3_ctl00__0">
        <td>45.60</td><td>15</td><td>0.25</td>
    </tr><tr class="rgAltRow" id="RadGrid3_ctl00__1">
        <td>18.00</td><td>21</td><td>0.25</td>
    </tr><tr class="rgRow" id="RadGrid3_ctl00__2">
        <td>12.00</td><td>2</td><td>0.25</td>
    </tr>
    </tbody>

</table><input id="RadGrid3_ClientState" name="RadGrid3_ClientState" type="hidden" />
    </div>
|56|updatePanel|RadAjaxManager1SU|<span id="RadAjaxManager1" style="display:none;"></span>

Hello,

This response is due to the fact that in the RadAjaxManager settings RadGrid1 updates itself and the other two Grid controls. If you use the code form the example and remove this setting you will note correct behavior of the control.

Sincerely yours,
Maria Ilieva
the Telerik team

Hello Maria!

Thx for the response. In my project grid doesn't update itself at all, but it still exist in the response. I'll open a ticket and send you a address where you can verify it.

Thx!

Hello,

As soon as you send us runnable application we will test it locally and advise you further.
Thank you for the cooperation.

Regards,
Maria Ilieva
the Telerik team

Hello Maria!

I was able to refine this problem.
Indeed you are right if you have only two controls where first updates second. But if you have a chain of controls then unnecessary updates are performed.

Example:

Control A should update Control B
Control B should update Control C

If a postback is performed from Control A then everything works fine. It means only Control B is updated.

But if a postback is performed from Control B then instead of updating only control C, the response updates Control C and Control B as well.
Of course i have not declared control B to update itself at all.

What i was able to understand is: If I have already ajaxifized one control to be updated from another control, then if a postback is initiated from it, it will update itself anyway (without being declared).

Is this how ASP.NET AJAX works? Looking that I'm worried about performance, what can i do in this case?

Thank you!

Hi,

Try handling the RadAjaxManager AjaxSettingCreated server-side event as below:


I hope this helps.

Hello SamJ

Thank you for the response.

In a simple scenario your solution worked well. But in a more complex one, where i used radajaxproxy as well, it didn't... Maybe it doesn't work with RadAjaxProxy?

Hi,

Can you tell why it is not working? You are not able to handle the event in the problematic page or ... ?

Thanks
SamJ

Hi,

RadAjaxProxy doesn't have such event and is managed from radajaxmanager. So i used the same code in the main page.
Event fired correctly, but if the control was ajaxifized from radajaxproxy the same issue happened (control updated itself also).
I should clarify that postback from the control comes in manual mode via __dopostback. This control is a grid and in every cell i have added a __dopostback onclick. Target is the grid and as argument i use a parameter needed to perform some actions. Ajax works fine. The only problem is this unnecessary update of itself...

Finally i was able to fix the issue using SamJ method. It works even with radajaxproxy.

If request is initiated from a standard asp panel and not a rad control, it doesn't work. But i was able to change target and so now it works fine!

Thank you!