Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

update a listview from a tree onpopulate event

6 Answers 104 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Jason Bourdette
Top achievements
Rank 1
Jason Bourdette asked on 23 Jan 2015, 03:50 AM
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>

6 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 27 Jan 2015, 01:42 PM
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.

 
0
Jason Bourdette
Top achievements
Rank 1
answered on 27 Jan 2015, 08:37 PM
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
0
Jason Bourdette
Top achievements
Rank 1
answered on 30 Jan 2015, 03:05 AM
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>
 
0
Konstantin Dikov
Telerik team
answered on 30 Jan 2015, 09:35 AM
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.

 
0
Jason Bourdette
Top achievements
Rank 1
answered on 31 Jan 2015, 12:53 AM
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
0
Jason Bourdette
Top achievements
Rank 1
answered on 31 Jan 2015, 01:05 AM
you can disregard my last post. I changed to TreeNodeExpandMode.ServerSide  and now the listview is displaying content as expected
Tags
ListView
Asked by
Jason Bourdette
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Jason Bourdette
Top achievements
Rank 1
Share this question
or