Is there a bug somewhere ?

[Christophe]

Hi,

 

Not sure where to post this since I'm using several Telerik control on my page and not sure which one is causing the refresh issue below.

Basically, my WebControl contains a RadAjaxmanagerProxy, a RadSplitter with 2 panes, 1 RadTreeView and some other basic controls such as buttons, labels etc ...

What I have designed is a page that displays a list of platforms (Web / Windows / Android / IOS) all of which are html clickable tags handled with JS. When clicking on one of them, the RadTreeView is refreshed to display a tree of folders and documents.... same as a very basic file explorer except everything is stored in DB.

This scenario works perfectly fine but I experienced some refreshing issue that I was able to solve in a very weird way, hence why I'm actually wondering if this wouldn't be a bug or something.

Here's the code of my webControl code below:

001.<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="documents-manager.ascx.cs" Inherits="NRP.DataManager.usercontrols.documents_manager" %>
002.<link href="css/doc-manager.css" rel="stylesheet" />
003.<telerik:RadScriptBlock ID="rasbSysClient" runat="server">
004.    <script type="text/javascript">
005.
006.        function newFileDropped(sender, args) {
007.            var fn = args.get_file().name;
008.            var ext = fn.split('.').pop().toLowerCase();
009.            var name = args.get_file().name;
010.            sender.deleteFileInputAt(0);
011.        }
012.
013.        function validateFileExtensionExport(sender, args) {
014.            ;
015.        }
016.
017.        function submitFile(sender) {
018.            __doPostBack('btnSubmitFileItem', 'OnClick');
019.        }
020.
021.        $(document).ready(function () {
022.            dropManagerPopulated();
023.        });
024.
025.        function dropManagerPopulated() {
026.            console.log('drop Manager Populated');
027.            $(".folderItem").on('dragenter', function (e) {
028.                var path = $(this).parent().find("span.folderItem:first").text();
029.                $(this).parentsUntil("ul.rtLines", "ul.rtUL").each(function (i, elt) {
030.                    var tmp = $(elt).prev("div").find("span.folderItem").text();
031.                    path = tmp + "/" + path;
032.                });
033.                $("#<%= hfDropPath.ClientID %>").val(path);
034.                $(this).closest("li.rtLI").toggleClass("folderDragHover");
035.            });
036.
037.            $(".folderItem").on('dragleave', function (e) {
038.                $(this).closest("li.rtLI").toggleClass("folderDragHover");
039.            });
040.        }
041.
042.        function dropManager() {
043.            console.log('drop Manager');
044.            $(".folderItem").on('dragenter', function (e) {
045.                $(this).toggleClass("folderDragHover");
046.            });
047.
048.            $(".folderItem").on('dragleave', function (e) {
049.                $(this).toggleClass("folderDragHover");
050.            });
051.        }
052.
053.        function dropOnTree(args) {
054.            var text = "";
055.
056.            if (args.get_sourceNodes().length) {
057.                var i;
058.                for (i = 0; i < args.get_sourceNodes().length; i++) {
059.                    var node = args.get_sourceNodes()[i];
060.                    text = text + ', ' + node.get_text();
061.                }
062.            }
063.        }
064.
065.        window.onNodeDragging = function (sender, args) {
066.        };
067.
068.        window.onNodeDropping = function (sender, args) {
069.            var dest = args.get_destNode();
070.            if (dest) {
071.                dropOnTree(args);
072.            }
073.        };
074.
075.        function onClientContextMenuItemClicking(sender, args) {
076.            var menuItem = args.get_menuItem();
077.            var treeNode = args.get_node();
078.            menuItem.get_menu().hide();
079.
080.            switch (menuItem.get_value()) {
081.                case "rename":
082.                    treeNode.startEdit();
083.                    break;
084.                case "rmFile":
085.                    var result = confirm("Are you sure you want to delete the file: " + treeNode.get_text());
086.                    args.set_cancel(!result);
087.                    break;
088.                case "rmFolder":
089.                    var result = confirm("Are you sure you want to delete the folder '" + treeNode.get_text() + "' and all of its content ? (" + treeNode.get_nodes().get_count() + " object(s))");
090.                    args.set_cancel(!result);
091.                    break;
092.            }
093.        }
094.
095.        function contextMenuClicked(sender, args) {
096.            var tv = $find("<%= rtvClientFileList.ClientID %>");
097.            tv.unselectAllNodes();
098.            var node = args.get_node();
099.            node.set_selected(true);
100.        }
101.
102.        function onClientContextMenuShowing(sender, args) {
103.            var treenode = args.get_node();
104.            treenode.set_selected(true);
105.            setMenuItemsState(args.get_menu().get_items(), treenode);
106.        }
107.
108.        function setMenuItemsState(menuItems, treeNode) {
109.            for (var i = 0; i < menuItems.get_count() ; i++) {
110.                var menuItem = menuItems.getItem(i);
111.                switch (menuItem.get_value()) {
112.                    case "rename":
113.                        formatMenuItem(menuItem, treeNode, 'Rename "{0}"');
114.                        break;
115.                    case "rmFolder":
116.                        formatMenuItem(menuItem, treeNode, 'Delete "{0}"');
117.                        break;
118.                    case "rmFile":
119.                        formatMenuItem(menuItem, treeNode, 'Delete "{0}"');
120.                        break;
121.                    case "createFolder":
122.                        if (treeNode.get_parent() == treeNode.get_treeView()) {
123.                            //  menuItem.set_enabled(false);
124.                        }
125.                        else {
126.                            menuItem.set_enabled(true);
127.                        }
128.                        break;
129.                }
130.            }
131.        }
132.
133.        function formatMenuItem(menuItem, treeNode, formatString) {
134.            var nodeValue = treeNode.get_value();
135.            if (nodeValue && nodeValue.indexOf("_Private_") == 0) {
136.                menuItem.set_enabled(false);
137.            }
138.            else {
139.                menuItem.set_enabled(true);
140.            }
141.        }
142.
143.        function selectPlatform(sender) {
144.            $(sender).siblings('li').removeClass('selected');
145.            $(sender).toggleClass("selected");
146.            var platformId = $(sender).attr("data-pid");
147.            $("#<%= hfPlatformId.ClientID %>").val(platformId);
148.            console.log('platform = ' + platformId);
149.            __doPostBack('<%= RbtSetPlatform.UniqueID %>', platformId);
150.        }
151.
152.    </script>
153.</telerik:RadScriptBlock>
154.<telerik:RadAjaxManagerProxy ID="RampDocManager" runat="server">
155.    <AjaxSettings>
156.        <telerik:AjaxSetting AjaxControlID="rtvClientFileList">
157.            <UpdatedControls>
158.                <telerik:AjaxUpdatedControl ControlID="Pinfo" LoadingPanelID="RalpDocManager" />
159.            </UpdatedControls>
160.        </telerik:AjaxSetting>
161.        <telerik:AjaxSetting AjaxControlID="cbDisplayDeleted">
162.            <UpdatedControls>
163.                <telerik:AjaxUpdatedControl ControlID="rtvClientFileList" LoadingPanelID="RalpDocManager" />
164.            </UpdatedControls>
165.        </telerik:AjaxSetting>
166.        <telerik:AjaxSetting AjaxControlID="btnSubmitFileItem">
167.            <UpdatedControls>
168.                <telerik:AjaxUpdatedControl ControlID="rtvClientFileList" LoadingPanelID="RalpDocManager" />
169.            </UpdatedControls>
170.        </telerik:AjaxSetting>
171.        <telerik:AjaxSetting AjaxControlID="RauClientFile">
172.            <UpdatedControls>
173.                <telerik:AjaxUpdatedControl ControlID="rtvClientFileList" LoadingPanelID="RalpDocManager" />
174.            </UpdatedControls>
175.        </telerik:AjaxSetting>
176.        <telerik:AjaxSetting AjaxControlID="RbtSetPlatform">
177.            <UpdatedControls>
178.                <telerik:AjaxUpdatedControl ControlID="rtvClientFileList" LoadingPanelID="RalpDocManager" />
179.                <telerik:AjaxUpdatedControl ControlID="Pinfo" LoadingPanelID="RalpDocManager" />
180.                <telerik:AjaxUpdatedControl ControlID="hfPlatformId" />
181.            </UpdatedControls>
182.        </telerik:AjaxSetting>
183.        <telerik:AjaxSetting AjaxControlID="rbDownloadExp"></telerik:AjaxSetting>
184.    </AjaxSettings>
185.</telerik:RadAjaxManagerProxy>
186.<telerik:RadAjaxLoadingPanel ID="RalpDocManager" runat="server" />
187.<div class="ToolBar">
188.    <table style="width: 100%;">
189.        <tr>
190.            <td>
191.                <asp:CheckBox ID="cbDisplayDeleted" runat="server" CssClass="cbDisplayDeleted" AutoPostBack="true" Checked='<%# (bool)ViewState["displayDeleted"] %>' OnCheckedChanged="cbDisplayDeleted_CheckedChanged" Text="Display deleted files and folders." TextAlign="Left" />
192.            </td>
193.            <td>
194.                <span id="fileUploadInput">
195.                    <telerik:RadAsyncUpload ID="RauClientFile" runat="server" RenderMode="Lightweight" MultipleFileSelection="Disabled" OnClientFilesUploaded="submitFile" OnClientFileDropped="newFileDropped"
196.                        OnFileUploaded="RauClientFile_FileUploaded" TemporaryFolder="~/Admin/temp" DropZones=".folderItem" HideFileInput="true">
197.                    </telerik:RadAsyncUpload>
198.                    <asp:Button ID="btnSubmitFileItem" runat="server" Enabled="false" Visible="false" Text="" OnClick="btnSubmitPxDataItem_Click" />
199.                </span>
200.            </td>
201.            <td>
202.                <ul class="platforms">
203.                    <li class="selected" onclick="selectPlatform(this)" data-pid="0">
204.                        <div class="platform web"></div>
205.                        <div class="lbl">CogLab</div>
206.                    </li>
207.                    <li onclick="selectPlatform(this)" data-pid="1">
208.                        <div class="platform windows"></div>
209.                        <div class="lbl">Windows</div>
210.                    </li>
211.                    <li onclick="selectPlatform(this)" data-pid="2">
212.                        <div class="platform android"></div>
213.                        <div class="lbl">Android</div>
214.                    </li>
215.                    <li onclick="selectPlatform(this)" data-pid="3">
216.                        <div class="platform apple"></div>
217.                        <div class="lbl">IOS</div>
218.                    </li>
219.                </ul>
220.            </td>
221.        </tr>
222.    </table>
223.    <span id="feedbackMsg" class="customDisplay"></span>
224.</div>
225.<telerik:RadSplitter ID="rsDocManager" runat="server" RenderMode="Lightweight" Width="99%" Height="535px">
226.    <telerik:RadPane ID="explorerPane" runat="server">
227.        <div id="fileExplorer">
228.            <telerik:RadTreeView ID="rtvClientFileList" runat="server" RenderMode="Lightweight" OnNodeExpand="rtvClientFileList_NodeExpand" OnNodeClick="rtvClientFileList_NodeClick"
229.                EnableDragAndDrop="true" MultipleSelect="true" EnableDragAndDropBetweenNodes="true" OnContextMenuItemClick="rtvClientFileList_ContextMenuItemClick"
230.                OnClientContextMenuItemClicking="onClientContextMenuItemClicking" OnClientContextMenuShowing="onClientContextMenuShowing"
231.                OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" OnNodeDrop="rtvClientFileList_NodeDrop" OnClientNodePopulated="dropManagerPopulated" OnClientTreePopulated="dropManagerPopulated"
232.                AllowNodeEditing="true" OnNodeEdit="rtvClientFileList_NodeEdit">
233.                <ContextMenus>
234.                    <telerik:RadTreeViewContextMenu ID="rootContextMenu" runat="server" RenderMode="Lightweight">
235.                        <Items>
236.                            <telerik:RadMenuItem Text="Download" Value="dlFolder" ImageUrl="../icons/cmd-download-all.png" CssClass="contextMenuIcon"></telerik:RadMenuItem>
237.                            <telerik:RadMenuItem Text="New folder" Value="createFolder" ImageUrl="../icons/cmd-add.png" CssClass="contextMenuIcon"></telerik:RadMenuItem>
238.                        </Items>
239.                        <CollapseAnimation Type="None" />
240.                    </telerik:RadTreeViewContextMenu>
241.                    <telerik:RadTreeViewContextMenu ID="folderContextMenu" runat="server" RenderMode="Lightweight">
242.                        <Items>
243.                            <telerik:RadMenuItem Text="Download" Value="dlFolder" ImageUrl="../icons/cmd-download-all.png" CssClass="contextMenuIcon"></telerik:RadMenuItem>
244.                            <telerik:RadMenuItem Text="New folder" Value="createFolder" ImageUrl="../icons/cmd-add.png" CssClass="contextMenuIcon"></telerik:RadMenuItem>
245.                            <telerik:RadMenuItem Text="Rename" Value="rename" ImageUrl="../icons/cmd-edit-pencil.png" CssClass="contextMenuIcon" PostBack="false"></telerik:RadMenuItem>
246.                            <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
247.                            <telerik:RadMenuItem Text="Delete" Value="rmFolder" ImageUrl="../icons/cmd-delete.png" CssClass="contextMenuIcon"></telerik:RadMenuItem>
248.                        </Items>
249.                        <CollapseAnimation Type="None" />
250.                    </telerik:RadTreeViewContextMenu>
251.                    <telerik:RadTreeViewContextMenu ID="folderContextMenuDeleted" runat="server" RenderMode="Lightweight">
252.                        <Items>
253.                            <telerik:RadMenuItem Text="Download" Value="dlFolder" ImageUrl="../icons/cmd-download-all.png" CssClass="contextMenuIcon"></telerik:RadMenuItem>
254.                            <telerik:RadMenuItem Text="Rename" Value="rename" ImageUrl="../icons/cmd-edit-pencil.png" CssClass="contextMenuIcon" PostBack="false"></telerik:RadMenuItem>
255.                            <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
256.                            <telerik:RadMenuItem Text="Restore" Value="restoreFolder" ImageUrl="../icons/cmd-reset.png" CssClass="contextMenuIcon"></telerik:RadMenuItem>
257.                        </Items>
258.                        <CollapseAnimation Type="None" />
259.                    </telerik:RadTreeViewContextMenu>
260.                    <telerik:RadTreeViewContextMenu ID="fileContextMenu" runat="server" RenderMode="Lightweight">
261.                        <Items>
262.                            <telerik:RadMenuItem Text="Download" Value="dlFile" ImageUrl="../icons/cmd-download.png" CssClass="contextMenuIcon"></telerik:RadMenuItem>
263.                            <telerik:RadMenuItem Text="Rename" Value="rename" ImageUrl="../icons/cmd-edit-pencil.png" CssClass="contextMenuIcon" PostBack="false"></telerik:RadMenuItem>
264.                            <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
265.                            <telerik:RadMenuItem Text="Delete" Value="rmFile" ImageUrl="../icons/cmd-delete.png" CssClass="contextMenuIcon"></telerik:RadMenuItem>
266.                        </Items>
267.                        <CollapseAnimation Type="None" />
268.                    </telerik:RadTreeViewContextMenu>
269.                    <telerik:RadTreeViewContextMenu ID="fileContextMenuDeleted" runat="server" RenderMode="Lightweight">
270.                        <Items>
271.                            <telerik:RadMenuItem Text="Download" Value="dlFile" ImageUrl="../icons/cmd-download.png" CssClass="contextMenuIcon"></telerik:RadMenuItem>
272.                            <telerik:RadMenuItem Text="Rename" Value="rename" ImageUrl="../icons/cmd-edit-pencil.png" CssClass="contextMenuIcon" PostBack="false"></telerik:RadMenuItem>
273.                            <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
274.                            <telerik:RadMenuItem Text="Restore" Value="restoreFile" ImageUrl="../icons/cmd-reset.png" CssClass="contextMenuIcon"></telerik:RadMenuItem>
275.                        </Items>
276.                        <CollapseAnimation Type="None" />
277.                    </telerik:RadTreeViewContextMenu>
278.                </ContextMenus>
279.            </telerik:RadTreeView>
280.        </div>
281.    </telerik:RadPane>
282.    <telerik:RadSplitBar ID="rsbSplitBar" runat="server" CollapseMode="Backward"></telerik:RadSplitBar>
283.    <telerik:RadPane ID="infoPane" runat="server" Width="20%">
284.        <asp:Panel ID="Pinfo" runat="server" CssClass="explorerInfo">
285.            <asp:Image ID="ficon" runat="server" ImageUrl="null" CssClass="ficon" AlternateText="" Visible="false" />
286.            <telerik:RadBinaryImage ID="RbiFileIcon" runat="server" AlternateText=" " CssClass="ficon" Visible="false"></telerik:RadBinaryImage>
287.            <div>
288.                <asp:Label ID="lblFname" runat="server" CssClass="finfo" Text=""></asp:Label>
289.            </div>
290.            <div>
291.                <asp:Label ID="lblFversion" runat="server" CssClass="finfo" Text=""></asp:Label>
292.            </div>
293.            <div>
294.                <asp:Label ID="lblFdate" runat="server" CssClass="finfo" Text=""></asp:Label>
295.            </div>
296.            <div id="commentBox">
297.                <div id="lblcomment" runat="server" visible="false">Comment:</div>
298.                <telerik:RadTextBox ID="tbFileComment" runat="server" CssClass="fileComment" Visible="false" Width="230" MaxLength="256" TextMode="MultiLine" Rows="3" Wrap="true" OnTextChanged="tbFileComment_TextChanged" AutoPostBack="true"></telerik:RadTextBox>
299.                <asp:HiddenField ID="hffid" runat="server" Value="" />
300.            </div>
301.            <div>
302.                <telerik:RadButton ID="rbDownloadExp" runat="server" Text="Download" Icon-PrimaryIconCssClass="rbDownload" Visible="false" OnClick="rbDownloadExp_Click"></telerik:RadButton>
303.            </div>
304.        </asp:Panel>
305.    </telerik:RadPane>
306.</telerik:RadSplitter>
307.<asp:HiddenField ID="hfDropPath" runat="server" Value="" />
308.<asp:HiddenField ID="hfPlatformId" runat="server" Value="0" />
309.<telerik:RadButton ID="RbtSetPlatform" runat="server" AutoPostBack="false" CssClass="rbtPlatformChange" OnClick="RbtSetPlatform_Click"></telerik:RadButton>

 

Now, initially, the Visible property of the last control in this code (RbtSetPlatform) was set to False, since this is called by my JS __doPostBack('<%= RbtSetPlatform.UniqueID %>', platformId); Line 149

When that RadButton was displayed on the page, the RadAjaxManager was doing its job perfectly fine, but as soon as you set it to Visible=false the whole control was reloading.

I had to fix this by adding a class to my RadButton and set the display property to none.

 

What am I missing here to explain this behavior ?

 

Cheers,

 

Chris

[Eyup]

Hello Cristophe,

When setting the Visible property of a control to false, it doesn't get rendered at all, therefore, it does not have a corresponding client-side instance. While setting the display to none with CSS (or using the Display property provided by some Telerik controls) hides the control only visually and its respective HTML element is still present in the DOM tree.

I hope this clarification will prove helpful. Generally, with similar scenarios you can also check for script errors:
https://www.telerik.com/support/kb/aspnet-ajax/ajaxmanager/details/get-more-descriptive-errors-by-disabling-ajax

Regards,
Eyup
Progress Telerik