[Solved] Prevent postback on node expand

[Charles Forsyth]

I have a radTreeView and a radGrid within a radSplitter.

I have set up radAjaxManager too.

I would like to allow my users to expand nodes without making it redraw the whole radGrid every time they expand a node in the radTreeView.

Is this possible? Am I doing something wrong?

Every time I click the + to expand a tree node it posts back to the server and redraws the radGrid. That's annoying. Can I prevent that?

[Atanas Korchev]

Hi Charles Forsyth,

Expanding a node should trigger Ajax/postback only if a not is configured to perform ServerSide load on demand. In that case you can change the expand mode of the node to ServerSideCallback or client-side.

Regards,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Charles Forsyth]

Thanks for the reply. Sorry I couldn't reply sooner, I was on vacation.

Can you please elaborate on your solution? I do not understand.

What is serverside load on demand? What option do I disable/enable for this? Can you perhaps provide a link to the documentation about this?

How would I change the expand mode of a node? Can you provide a VB.Net example?

[Atanas Korchev]

Hi Charles Forsyth,

ServerSide load on demand means that clicking the +/- sign of a treeview postbacks and fires the NodeExpand event of the treeview. What I meant was that expanding a node should postback only if the node's ExpandMode property is set to ServerSide. Is that true in your case?

Providing more info about your scenario would allow us to give you more precise suggestions. How are you populating your treeview? How is the ajaxmanager configured (initiators and updated controls)? Do you use load on demand to populate the treeview?

Regards,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Charles Forsyth]

Here's the markup for the radTreeView control...

            <telerik:RadTreeView id="RadTreeView1" Runat="server"
                Width="250px"
                Height="590px"
                AccessKey="T"
                SingleExpandPath="false"
                Skin="Office2007"
                EnableDragAndDrop="True"
                AllowNodeEditing="True"
                OnClientMouseOver="onNodeMouseOver"
                OnClientMouseOut="onNodeMouseOut"
                OnClientContextMenuItemClicked="ContextMenuItemClicked"
                OnNodeEdit="RadTreeView1_NodeEdit"
                OnClientNodeEditing="onTreeEditing">
                <CollapseAnimation Duration="10" Type="OutQuint" />
                <ExpandAnimation Duration="10" />
                <ContextMenus>
                   <telerik:RadTreeViewContextMenu runat="server" ID="TreeContextMenu" ClickToOpen="True" Skin="Default">
                       <Items>
                           <telerik:RadMenuItem Text="Upload New File" Value="Upload" runat="server"></telerik:RadMenuItem>
                           <telerik:RadMenuItem Text="Rename" Value="Rename" runat="server"></telerik:RadMenuItem>
                           <telerik:RadMenuItem Text="Delete" Value="Delete" runat="server"></telerik:RadMenuItem>
                           <telerik:RadMenuItem Text="New Folder" Value="NewFolder" runat="server"></telerik:RadMenuItem>
                       </Items>
                       <CollapseAnimation Duration="200" Type="OutQuint" />
                   </telerik:RadTreeViewContextMenu>
                </ContextMenus>

            </telerik:RadTreeView>

This is how I'm populating it...

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            InitTree()
        End If
    End Sub

    Sub InitTree()
        RadTreeView1.Nodes.Clear()
        selectedPath = System.Configuration.ConfigurationManager.AppSettings("RootResourcePath")
        ViewState("selectedPath") = selectedPath
        LoadTreeView(selectedPath)
        RadTreeView1.FindNodeByText("Root").Selected = True
        DisplayPath(selectedPath)
    End Sub

    Private Sub LoadTreeView(ByVal folder As String)
        Dim rootNode As New RadTreeNode("Root")
        rootNode.ImageUrl = "~/Icons/folder.gif"
        rootNode.SelectedImageUrl = "~/Icons/folderopen.gif"
        rootNode.Expanded = True
        rootNode.ExpandMode = TreeNodeExpandMode.ClientSide
        rootNode.Category = "Folder"
        rootNode.Value = folder
        RadTreeView1.Nodes.Add(rootNode)

        CurrentDir = GetFileList(folder)

        BindDirectory(folder, rootNode.Nodes)
    End Sub

    Private Sub BindDirectory(ByVal dirPath As String, ByVal collection As RadTreeNodeCollection)
        If dirPath = String.Empty Then
            Return
        End If

        Dim dirs As String() = Directory.GetDirectories(dirPath)
        For Each path As String In dirs
            Dim parts As String() = path.Split("\"c)
            Dim name As String = parts(parts.Length - 1)
            Dim node As New RadTreeNode(name)
            node.ImageUrl = "~/Icons/folder.gif"
            node.SelectedImageUrl = "~/Icons/folderopen.gif"
            node.Value = path
            node.Category = "Folder"
            node.ExpandMode = TreeNodeExpandMode.ClientSide

            If Directory.GetDirectories(path).Length > 0 Then
                node.ExpandMode = TreeNodeExpandMode.ServerSide
            End If
            collection.Add(node)
            BindDirectory(node.Value, node.Nodes)
        Next
    End Sub

    Private Function GetFileList(ByVal directory As String) As DataTable
        Dim filesAndFolders As New DataTable()
        filesAndFolders.Columns.Add("Type")
        filesAndFolders.Columns.Add("Icon")
        filesAndFolders.Columns.Add("Name")
        filesAndFolders.Columns.Add("Path")
        filesAndFolders.Columns.Add("Size")
        filesAndFolders.Columns.Add("Modified")

        If directory <> String.Empty Then

            Dim dir As New DirectoryInfo(directory)

            For Each subDir As DirectoryInfo In dir.GetDirectories()
                Dim dr As DataRow = filesAndFolders.NewRow()
                dr("Type") = "file"
                dr("Icon") = "Icons/folder.gif"
                dr("Name") = subDir.Name
                dr("Path") = subDir.FullName
                dr("Size") = ""
                dr("Modified") = ""
                filesAndFolders.Rows.Add(dr)
            Next

            For Each file As FileInfo In dir.GetFiles()
                Dim dr As DataRow = filesAndFolders.NewRow()
                dr("Type") = "file"
                dr("Icon") = GetImageForExtension(file.Name)
                dr("Name") = file.Name
                dr("Path") = file.FullName
                dr("Size") = file.Length.ToString()
                dr("Modified") = file.LastWriteTimeUtc.ToString()
                filesAndFolders.Rows.Add(dr)
            Next
        End If

        Return filesAndFolders
    End Function

For some reason, when the + is clicked it performs an ajax callback and the gridview is replaced with the ajax loading panel for a moment and it appears that the gridview is reloaded. (this should ONLY occur on selecting, not expanding a treeview node)

    Protected Sub RadTreeView1_NodeClick(ByVal o As Object, ByVal e As RadTreeNodeEventArgs) Handles RadTreeView1.NodeClick
        Label_Status.Text = Now().ToLongTimeString()

        SelectNode(e.Node)
    End Sub

Also, there is no handler for RadTreeView1.NodeExpand in my code behind.

Another note: I'm using the radAjaxManager, here's the markup for the treeview control...

            <telerik:AjaxSetting AjaxControlID="RadTreeView1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Label_PopupTitle" />
                    <telerik:AjaxUpdatedControl ControlID="Label_PopupMessage" />
                    <telerik:AjaxUpdatedControl ControlID="RadTreeView1" />
                    <telerik:AjaxUpdatedControl ControlID="Label_CurrentPath" />
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="Label_Status" />
                </UpdatedControls>
            </telerik:AjaxSetting>

And finally, here's the markup for the radGrid that is getting loaded every time I click a + (when I don't expect that behavior)

                    <telerik:RadGrid ID="RadGrid1" runat="server"
                        AutoGenerateColumns="False"
                        OnNeedDataSource="RadGrid1_NeedDataSource1"
                        GridLines="None"
                        Skin="Office2007"
                        Width="100%" >
                        <MasterTableView clientDataKeyNames="Path">
                            <Columns>
                                <telerik:GridTemplateColumn HeaderText="Name" UniqueName="Name">
                                    <ItemTemplate>
                                        <asp:Image ID="icon" runat="server" ImageAlign="absmiddle" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "Icon") %>' AlternateText="icon" BorderWidth="0" />
                                        <asp:Label ID="name" runat="server" ToolTip='<%# DataBinder.Eval(Container.DataItem, "Path") %>' Text='<%# DataBinder.Eval(Container.DataItem, "Name") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle BorderStyle="None" Wrap="False" />
                                    <HeaderStyle Width="300px" />
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn HeaderText="Size" UniqueName="Size">
                                    <ItemTemplate>
                                        <asp:Label ID="size" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Size") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle BorderStyle="None" Width="100px" Wrap="False" />
                                    <HeaderStyle Width="100px" />
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn HeaderText="Modified" UniqueName="Modified">
                                    <ItemTemplate>
                                        <asp:Label ID="modified" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Modified") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle BorderStyle="None" Width="230px" Wrap="False" />
                                    <HeaderStyle Width="230px" />
                                </telerik:GridTemplateColumn>
                            </Columns>

                            <NoRecordsTemplate>
                                No Files or Folders.
                            </NoRecordsTemplate>
                            <ExpandCollapseColumn Visible="False" Resizable="False">
                                <HeaderStyle Width="20px" />
                            </ExpandCollapseColumn>
                            <RowIndicatorColumn Visible="False">
                                <HeaderStyle Width="20px" />
                            </RowIndicatorColumn>
                            <EditFormSettings>
                                <PopUpSettings ScrollBars="None" />
                            </EditFormSettings>
                        </MasterTableView>
                        <ItemStyle BorderStyle="None" />
                        <ClientSettings>
                            <Resizing AllowColumnResize="true" />
                            <Selecting AllowRowSelect="True" />
                            <ClientEvents OnRowContextMenu="RowContextMenu"></ClientEvents>
                        </ClientSettings>
                    </telerik:RadGrid>

[Atanas Korchev]

Hi Charles Forsyth,

Thank you for providing the extra details. I've noticed the following code which I think is causing the postback on expand:

    If Directory.GetDirectories(path).Length > 0 Then
        node.ExpandMode = TreeNodeExpandMode.ServerSide 
    End If

Do you need that? Setting the ExpandMode of a node to ServerSide will trigger postbacks on node expanding (regardless you have not subscribed to the NodeExpand event).

Regards,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Charles Forsyth]

Thanks so much Albert! That was it.

Sometimes all it takes is fresh eyes to spot the culprit. :)

You rock! I'm very happy now.