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