If I have loaded a tree node's child items via load on demand on the client side, is it then possible to refresh the items from the client side, for example if I know the data has changed on the server side?
Thanks
14 Answers, 1 is accepted
Yes, it's possible, you need to call the ajaxRequest client-side method like this:
$("#TreeView").data("tTreeView").ajaxRequest($(item));
... where item is the DOM element of the item (<li class="t-item">).
Alex Gyoshev
the Telerik team
Rank 1
Thanks for your help.
Rank 1
I was updating the tree like Alex was suggesting and that works fine. Although I have a problem with the icons. Lets suppose I have a node without child nodes. I refresh that node with the ajaxRequest call, now the node has child nodes and the icon which was refreshed should have a minus/plus icon. How can I achieve that ?
Rank 1
Can you please put together a example that demonstrates the use of the client side Ajax request to reload a node's children on the client side?
Thanks
There seems to be a bug in the current JavaScript, as Stefan noted. The attached build should resolve it.
Kind regards,
Alex Gyoshev
the Telerik team
Rank 1
Can you please describe the Ajax callback method in more detail for me? I.E. I am not familar with the call back syntax. I.E. I have a javascript function (OnReloadSelectedTreeItem) that will be called when I desired to refresh. The following is an extract from my page.
<head>
<script type="text/javascript">
<!--
function OnReloadSelectedTreeItem()
{ var oTree = $find("<%=cntlRadTreeView.ClientID%>");
var selectedTreeItem = oTree.get_selectedNode();
// What syntax do I use here?
// $("#TreeView").data("tTreeView").ajaxRequest($(item));
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<body>
<form id="Form1" method="post" runat="server">
<telerik:RadTreeView ID="RadTreeView" runat="server" Height="300px" Width="100%" OnClientNodeClicked="OnTreeClientNodeClicked" OnClientLoad="OnTreeClientLoad" OnClientContextMenuItemClicking="OnTreeClientMenuItemSelected" OnClientNodeDataBound="OnClientNodeDataBoundHandler" PersistLoadOnDemandNodes="false">
<WebServiceSettings Path="NWPortal2.aspx" Method="GetItems" />
</telerik:RadTreeView>
</form>
</body>
</html>
Judging from your snippet, you need the same functionality for the RadTreeView for ASP.NET AJAX. This forum is for the TreeView extension for ASP.NET MVC -- you can open a new thread in the RadTreeView forum (or a new support thread) where the other product team can help.
All the best,
Alex Gyoshev
the Telerik team
Rank 1
I tested my program with the hotfix, but unfortunately I have still the same problem. I checked the Temporary Internet Files Folder of the IE and, there is the telerik.treeview.min.js of the 2011.2.1009 Version. So I guess I have installed the correct version of Telerik.
I send you a short snipptet of my javascript function calling ajaxrequest:
function reloadTreeAfterSave() {
var treeview = $('#folderList').data('tTreeView');
if (currentDirectory != '') {
var tmpDir = currentDirectory.replace(/\\/g, "/");
var item = $("#folderList").find(".t-input[name='itemValue'][value='" + tmpDir + "']").closest("li");
treeview.ajaxRequest(item);
}
else {
var item = $("#folderList").find(".t-input[name='itemValue'][value='" + '@ViewBag.baseDir' + "']").closest("li");
treeview.ajaxRequest(item);
}
}
When a new child node is found it is displayed correctly under the current Directory. However the icons do not change. I have another problem when the current Directory had one child node and this child node has been deleted. I return a json result without nodes, but the child node is still displayed.
thanks
The attached JavaScript should behave better. If any other problems persist, please provide the specific scenario where the problem is observed.
Regards,
Alex Gyoshev
the Telerik team
Rank 1
Great, now it is working
Thank you very much
Rank 1
I am very new to Telerik. I am using a treeview control and binding the records on Ajax call.
I want to refresh the treeview on expand to display the newly added records in the server side.
@{Html.Telerik().TreeView()
.Name(
"NavigationTreeView")
.DataBinding(dataBinding => dataBinding.Ajax().Select(
"SubFolders", "Filer"))
.ClientEvents(events =>
{
events.OnLoad(
"Layout.NavigationTreeView_OnLoad");
events.OnSelect(
"Layout.NavigationTreeView_OnSelect");
events.OnExpand("Layout.NavigationTreeView_OnExpand");
events.OnDataBound(
"Layout.NavigationTreeView_OnDataBound");
})
.Render();
I have added the below script in Layout.NavigationTreeView_OnExpand. But I am still not getting the new records on expand.
$(
"#NavigationTreeView").data("tTreeView").ajaxRequest($(item));
Please guide on this.Thanks in advance.
Rank 1
Hi Alex,
I am able to refresh the nodes with the below code
Layout.NavigationTreeView_OnExpand = function (e) { $("#NavigationTreeView").data("tTreeView").ajaxRequest($(e.item)); }But the problem I am facing is that I am not able to collapsing the nodes. Please refer the screenshot.
Appreciate if you can help on this.
Did you apply the updated treeview JavaScript from this thread? If so, and the problem still persists, please send a working sample solution so that we may debug the problem.
Regards,
Alex Gyoshev
the Telerik team
Rank 1
Regards,
Guru