update a listview from a tree onpopulate event

7 posts, 0 answers
  1. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 22 Jan 2015 Link to this post

    im trying to update a radlistview control from an treenodepopulate event. when I click on the tree the event handler fires and tree node is expanded but the radlistview display is not updated and i'm trying to figure out why. I have create a single simple file that shows the issue i'm having. thanks

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
     
    <!DOCTYPE html>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack) {
                PopulateTopNodes();
            }
        }
     
        private void PopulateTopNodes()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("id");
            dt.Columns.Add("parent");
            dt.Columns.Add("value");
            dt.Columns.Add("haschild");
     
            dt.Rows.Add(new object[] { 1, "C:", "Documents", "Yes" });
            dt.Rows.Add(new object[] { 2, "D:", "Files", "No" });
     
            foreach (DataRow row in dt.Rows)
            {
                string parent = row["value"].ToString();
                TreeNode newNode = new TreeNode(row["value"].ToString(), parent);
                newNode.PopulateOnDemand = true;
                newNode.Expanded = false;
                newNode.SelectAction = TreeNodeSelectAction.Expand;
                TreeView1.Nodes.Add(newNode);
            }
        }
     
     
        protected void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e)
        {
            if (e.Node.NavigateUrl == "")
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("id");
                dt.Columns.Add("parent");
                dt.Columns.Add("value");
                dt.Columns.Add("haschild");
     
                dt.Rows.Add(new object[] { 1, "Documents", "Music", "Yes" });
                dt.Rows.Add(new object[] { 2, "Files", "Folder", "No" });
     
                foreach (DataRow row in dt.Rows)
                {
     
                    string parent = row["parent"].ToString() + @"\" + row["value"].ToString();
                    TreeNode newNode = new TreeNode(row["value"].ToString(), parent);
                    newNode.SelectAction = TreeNodeSelectAction.Select;
                    newNode.Expand();
                    newNode.NavigateUrl = "page2.aspx";
                    newNode.Expanded = true;
                    e.Node.ChildNodes.Add(newNode);
                }
     
                //Populate the RadListView
                DataTable dt2 = new DataTable();
                dt2.Columns.Add("file");
                dt2.Columns.Add("size");
                dt2.Rows.Add(new object[] { "file1.txt", "4kb" });
                dt2.Rows.Add(new object[] { "anotherfile.log", "3mb" });
                this.RadListView1.DataSource = dt2;
                this.RadListView1.Rebind();
            }
        }
    </script>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
         
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableTheming="True">
        </telerik:RadScriptManager>
     
        <telerik:RadSplitter runat="server" ID="RadSplitter1" Orientation="Vertical" Width="100%" BorderWidth="0" BorderColor="White" Height="760px" BorderSize="0">
             <telerik:RadPane runat="server" ID="MidPane" Scrolling="None" Width="49%" >
                  <telerik:RadTabStrip ID="RadTabStrip1" ShowBaseLine="True" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0">
                      <Tabs>
                          <telerik:RadTab runat="server" Text="Directory Tree" PageViewID="PageView1" Font-Bold="true" ScrollChildren="true" Selected="True">
                          </telerik:RadTab>
                      </Tabs>
                  </telerik:RadTabStrip>
                  <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0"  Width="99%">
              
                     <telerik:RadPageView ID="PageView1" runat="server" width="100%" height="660px">                     
             
                            <asp:TreeView ID="TreeView1" runat="server" OnTreeNodePopulate="TreeView1_TreeNodePopulate"
                                ImageSet="XPFileExplorer" NodeIndent="15" ShowLines="false">
                                <ParentNodeStyle Font-Bold="False" />
                                <HoverNodeStyle Font-Underline="False" ForeColor="Black" />
                                <SelectedNodeStyle Font-Underline="False" Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black"
                                    HorizontalPadding="2px" NodeSpacing="0px" VerticalPadding="2px" />
                                <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px"
                                    NodeSpacing="0px" VerticalPadding="2px" />
                            </asp:TreeView>
                         
                     </telerik:RadPageView>
                    </telerik:RadMultiPage>
     
            </telerik:RadPane>
     
            <telerik:RadPane runat="server" ID="RadPane1" Scrolling="None" Width="49%">
                     
                  <telerik:RadTabStrip ID="RadTabStrip2" ShowBaseLine="True" runat="server" MultiPageID="RadMultiPage1" Skin="Office2007" SelectedIndex="0">
                      <Tabs>
                          <telerik:RadTab runat="server" Text="Details" PageViewID="PageView1" Font-Bold="true" ScrollChildren="true" Selected="True">
                          </telerik:RadTab>
                      </Tabs>
                  </telerik:RadTabStrip>
     
                  <telerik:RadMultiPage ID="RadMultiPage2" runat="server" SelectedIndex="0"  Width="99%">
                     <telerik:RadPageView ID="RadPageView1" runat="server" width="100%" height="660px">
                             
                         <telerik:RadListView ID="RadListView1" runat="server" AllowPaging="false" ItemPlaceholderID="itemPlaceholder">
                             <LayoutTemplate>
                                <table style="width: 730px; background-color: #D9DFDF;">
                                    <tr>
                                        <th id="Th1" runat="server">
                                            Name
                                        </th>
                                        <th id="Th2" runat="server">
                                            Size
                                        </th>
                                    </tr>
                                    <tr runat="server" id="itemPlaceholder" />
                                </table>
                            </LayoutTemplate>
                            <EmptyDataTemplate>
                                No files in this folder.
                            </EmptyDataTemplate>
                            <ItemTemplate>
                                <tr id="Tr2" runat="server" >
                                    <td>
                                        <asp:Label ID="Name" runat="Server" Text='<%#Eval("file") %>' />
                                    </td>
                                    <td>
                                        <asp:Label ID="Size" runat="Server" Text='<%#Eval("size") %>' />
                                    </td>
                                </tr>
                            </ItemTemplate>
                        </telerik:RadListView>
                     </telerik:RadPageView>
                    </telerik:RadMultiPage>
            </telerik:RadPane>
        </telerik:RadSplitter>
         
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="TreeView1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadListView1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
     
        </form>
    </body>
    </html>
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 27 Jan 2015 Link to this post

    Hi Jason,

    The behavior that you are observing is not related to RadListView in any way, but is due to the way that TreeView is implemented. When you expand a node, a partial postback will be initiated and only the TreeView will be updated. This limitation is preventing the other controls to be updated within the OnTreeNodePopulate event.

    You could test the above with the following basic example:
    <asp:TreeView ID="TreeView1" runat="server"  OnTreeNodePopulate="TreeView1_TreeNodePopulate"
        ImageSet="XPFileExplorer" NodeIndent="15" ShowLines="false">
        <ParentNodeStyle Font-Bold="False" />
        <HoverNodeStyle Font-Underline="False" ForeColor="Black" />
        <SelectedNodeStyle Font-Underline="False" Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black"
            HorizontalPadding="2px" NodeSpacing="0px" VerticalPadding="2px" />
        <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px"
            NodeSpacing="0px" VerticalPadding="2px" />
    </asp:TreeView>
     
    <asp:Label runat="server" ID="TestLabel1"></asp:Label>

    And the code-behind:
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack) {
            PopulateTopNodes();
        }
    }
     
    private void PopulateTopNodes()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("id");
        dt.Columns.Add("parent");
        dt.Columns.Add("value");
        dt.Columns.Add("haschild");
     
        dt.Rows.Add(new object[] { 1, "C:", "Documents", "Yes" });
        dt.Rows.Add(new object[] { 2, "D:", "Files", "No" });
     
        foreach (DataRow row in dt.Rows)
        {
            string parent = row["value"].ToString();
            TreeNode newNode = new TreeNode(row["value"].ToString(), parent);
            newNode.PopulateOnDemand = true;
            newNode.Expanded = false;
            newNode.SelectAction = TreeNodeSelectAction.Expand;
            TreeView1.Nodes.Add(newNode);
        }
    }
     
     
    protected void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e)
    {
        if (e.Node.NavigateUrl == "")
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("id");
            dt.Columns.Add("parent");
            dt.Columns.Add("value");
            dt.Columns.Add("haschild");
     
            dt.Rows.Add(new object[] { 1, "Documents", "Music", "Yes" });
            dt.Rows.Add(new object[] { 2, "Files", "Folder", "No" });
     
            foreach (DataRow row in dt.Rows)
            {
     
                string parent = row["parent"].ToString() + @"\" + row["value"].ToString();
                TreeNode newNode = new TreeNode(row["value"].ToString(), parent);
                newNode.SelectAction = TreeNodeSelectAction.Select;
                newNode.Expand();
                newNode.NavigateUrl = "page2.aspx";
                newNode.Expanded = true;
                e.Node.ChildNodes.Add(newNode);
            }
     
            TestLabel1.Text = "Test";
        }
    }

    Having in mind the above, you will have to chose another way for providing the data to the RadListView.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 27 Jan 2015 in reply to Konstantin Dikov Link to this post

    Any suggestions for possible ways to update the RadListView? Is there any way to force an update of other controls from the partial postback? If I switched to using a RadTreeView control would i be facing the same issue?

    Thanks
    Jason
  5. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 29 Jan 2015 Link to this post

    I have been trying to convert my code to using a RadTreeView with some success. In another forum post i saw someone suggested set the listview needsdatasource so i tried that, but it looks like NodeExpand fires after RadListView1_NeedDataSource so in RadListView1_NeedDataSource i need to know what the tree node is that is being expanded but it hasnt been set yet b/c NodeExpand hasnt fired yet. Any help would be great. Thanks!


    <%@ Page Language="C#" AutoEventWireup="true" %>
    <%@ Import Namespace="System.Data" %>
     
    <!DOCTYPE html>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                PopulateTopNodes();
            }
        }
     
        private void PopulateTopNodes()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("id");
            dt.Columns.Add("parent");
            dt.Columns.Add("value");
            dt.Columns.Add("haschild");
     
            dt.Rows.Add(new object[] { 1, "C:", "Documents", "Yes" });
            dt.Rows.Add(new object[] { 2, "D:", "Files", "No" });
     
            foreach (DataRow row in dt.Rows)
            {
                string parent = row["value"].ToString();
                RadTreeNode newNode = new RadTreeNode(row["value"].ToString(), parent);
                newNode.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;
                RadTreeView1.Nodes.Add(newNode);
            }
        }
     
     
        protected void RadTreeView1_NodeExpand(object sender, RadTreeNodeEventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("id");
            dt.Columns.Add("parent");
            dt.Columns.Add("value");
            dt.Columns.Add("haschild");
     
            dt.Rows.Add(new object[] { 1, "Documents", "Music", "Yes" });
            dt.Rows.Add(new object[] { 2, "Files", "Folder", "No" });
     
            foreach (DataRow row in dt.Rows)
            {
                string parent = row["parent"].ToString() + @"\" + row["value"].ToString();
                RadTreeNode newNode = new RadTreeNode(row["value"].ToString(), parent);
                newNode.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;
                newNode.NavigateUrl = "page2.aspx";
                e.Node.Nodes.Add(newNode);
            }
             
            e.Node.Expanded = true;
            e.Node.Selected = true;
        }
     
        protected void RadListView1_NeedDataSource(object sender, Telerik.Web.UI.RadListViewNeedDataSourceEventArgs e)
        {
            if (this.RadTreeView1.SelectedValue == "Files")
            {
                //Populate the RadListView
                DataTable dt2 = new DataTable();
                dt2.Columns.Add("file");
                dt2.Columns.Add("size");
                dt2.Rows.Add(new object[] { "file1.txt", "4kb" });
                dt2.Rows.Add(new object[] { "anotherfile.log", "3mb" });
                this.RadListView1.DataSource = dt2;
            }
        }
    </script>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableTheming="True">
        </telerik:RadScriptManager>
     
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTreeView1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadListView1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
     
     
        <telerik:RadTreeView ID="RadTreeView1" runat="server" LoadingStatusPosition="AfterNodeText" LoadingMessage="Loading..." OnNodeExpand="RadTreeView1_NodeExpand" >
        </telerik:RadTreeView>
     
     
              <telerik:RadListView ID="RadListView1" runat="server" AllowPaging="false" ItemPlaceholderID="itemPlaceholder" OnNeedDataSource="RadListView1_NeedDataSource" >
                             <LayoutTemplate>
                                <table style="width: 730px; background-color: #D9DFDF;">
                                    <tr>
                                        <th id="Th1" runat="server">
                                            Name
                                        </th>
                                        <th id="Th2" runat="server">
                                            Size
                                        </th>
                                    </tr>
                                    <tr runat="server" id="itemPlaceholder" />
                                </table>
                            </LayoutTemplate>
                            <EmptyDataTemplate>
                                No files in this folder.
                            </EmptyDataTemplate>
                            <ItemTemplate>
                                <tr id="Tr2" runat="server" >
                                    <td>
                                        <asp:Label ID="Name" runat="Server" Text='<%#Eval("file") %>' />
                                    </td>
                                    <td>
                                        <asp:Label ID="Size" runat="Server" Text='<%#Eval("size") %>' />
                                    </td>
                                </tr>
                            </ItemTemplate>
                        </telerik:RadListView>
             
        </form>
    </body>
    </html>
     
  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 30 Jan 2015 Link to this post

    Hello Jason,

    Your observations are correct and indeed, the OnNeedDataSource event will fire after the NodeExpand event. What you could do in your scenario is to manually rebind the RadListView within the NodeExpand event handler by first setting the DataSource to null and then, calling the Rebind method.

    Another option would be to retrieve the necessary information on client-side, store it in a HiddenField control and then retrieve the value from the HiddenField within the OnNeedDataSource event.

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 30 Jan 2015 in reply to Konstantin Dikov Link to this post

    I guess i'm still missing something. I added RadListView1.Rebind(); to the end of the RadTreeView1_NodeExpand function and when debugging in VS it breaks twice in the RadListView1_NeedDataSource. The first time of course nothing happens, the second time in the SelectedValue does = "Files" so it gets some data for the listview and sets the datasource but on the web page the data is not displayed. The listview does not seem to be getting updated?

    Thanks!!
    Jason
  8. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 30 Jan 2015 in reply to Jason Bourdette Link to this post

    you can disregard my last post. I changed to TreeNodeExpandMode.ServerSide  and now the listview is displaying content as expected
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017