Problem with reloading/refreshing treeview

[Henrik Tegman]

Hello,

I have a problem with updating/reloading my treeview.
I have a TreeView that is popultated from a StoreProcedure. I then have some buttons that give a popup where you can enter some information that will update the DB that the StoreProcedure use to populate the TreeView.

When I call a WebService to update the DB everything works fine, it updates the database and everyone is happy, the problem is that after this I want to close my popup and reload/refhresh the TreeView, I have tried some diffrent tactics with window.close(), window.opener.location.reload() and similar and I don't get it to work. I can get the popup to close, but if I also do the reload then i just open up again and also it still doesn't refresh the treeview AND i get a question from IE about that I need to retry geting information.

I read somewhere that you could use window.open('', '_self', ''); to get rid of that message and the funny part is that I use that in another project and there it works but not here. I'll post some of my code but I don't think that helps so much I need to understand how to refresh my TreeView and if there is any smart way todo it.

function cancel_click() {
    window.open('', '_self', '');
    if (window.opener && !window.opener.closed) {
        window.opener.location.reload();
    }
    window.close();
}

That is my javascript for when someone either press the closebutton on the popup or after the WebService have succefully updated the database, it should in theory close the window and refresh the parent. I guess that there is some way to refresh the treeview also.
Please remeber that I want todo this from a popup window, and I need access to the treeview or in someway reload it.

EDIT: Forgot to mention that if I reload the page (just press F5) I still don't get the TreeView updated, but when I close the application and start it again then it refreshes as it should and I can see the post that I have added.

EDIT2: I have also tested having the window.close() before the reload, but this doesn't do any diffrence for me atm. the biggest problem I have is that when I do the reload it opens up my popup again (should only open when you press a button) and the TreeView doesn't get any new data.

[Nikolay Tsenkov]

Hello Henrik Tegman,

My suggestion is to use RadAjaxManager and to connect the RadWindow  to RadTreeView with it. That way whenever you trigger event for the window that is handled on the server it will cause the TreeView to update too.

Here is a nice little article on how to use RadAjaxManager: http://www.telerik.com/help/aspnet-ajax/ajxajaxmanager.html

Hope this is going to help you!

P.S. If you need help in applying RadAjaxManager in your project, please send me a project and I will adjust the RadAjaxManager for your scenario.


Regards,
Nikolay Tsenkov
the Telerik team

[Henrik Tegman]

Thank you

But I have no experience with RadWindow and connecting a RadTree to it, could you give a simple example how to connect this manager/window/tree.

Atm. I just added the window to the page atm I have all three just one after another.

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>

    <telerik:RadWindow ID="RadWindow1" runat="server">
    </telerik:RadWindow>

    <telerik:RadTreeView ID="RadTreeView1" Runat="server" DataFieldID="AccountID"
        DataFieldParentID="ParentAccountID" DataSourceID="SqlDataSource1"
        DataTextField="Name" DataValueField="AccountID" EnableDragAndDrop="True">
    </telerik:RadTreeView>

[Nikolay Tsenkov]

Hello Henrik Tegman,

Of course, here it is:

<telerik:RadAjaxManager runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadWindow1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadTreeView1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

This way the window will update the TreeView on every postback that occurs over it (the window).

Hope this is going to help you!


Regards,
Nikolay Tsenkov
the Telerik team

[Henrik Tegman]

Hello,

Still not working for me, I used this and tested it and I still don't get the tree to update. I tried use code with

    if (window.opener && !window.opener.closed) {
        window.opener.location.reload();
    }  

to reload it from its child in a parent, but I also tried to do it in a simple style and just did some changes and then pressed F5 to update the page, and it still doesn't reload. Well the page reloads and so but the TreeView is still the same old. If I then stop my application/debugging and start it again I get a new updated TreeView.

Is there something else I must do with the window? atm I simply have:

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadWindow1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadTreeView1"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadWindow ID="RadWindow1" runat="server" Behavior="Default"
        InitialBehavior="None" >
    </telerik:RadWindow>

    <telerik:RadTreeView ID="RadTreeView1" Runat="server" DataFieldID="AccountID"
        DataFieldParentID="ParentAccountID" DataSourceID="SqlDataSource1"
        DataTextField="Name" DataValueField="AccountID" EnableDragAndDrop="True">
    </telerik:RadTreeView>

And a datascouce to that. Do I need to call some speciall function in the window to update that, or should a normal F5, or page.reload() work?

[Nikolay Tsenkov]

Hi Henrik Tegman,

The markup looks just fine.
Please, post the code-behind of your page, because obviously the problem should be somewhere in there.

Once I have something that I can test, I am sure that we will resolve your issue.


Regards,
Nikolay Tsenkov
the Telerik team

[Henrik Tegman]

Hello,

I've been on vaccation for some time but now I'm here again hoping to get this solved.
My codebehind is very "boring" it only has some code for som diffrent buttons on the page.
As the page has the TreeView, the RadWindow and 3 buttons.

 

protected void Button1_Click(object sender, EventArgs e)

{

 

 

 

 

    string accountid;

 

    if (RadTreeView1.SelectedNode != null)

        accountid = RadTreeView1.SelectedNode.Value;

 

 

    else

 

        accountid =

"";

 

 

    OpenNewWindow(

 

 

"EditDialog.aspx?accountid=" + accountid + "&parent=true", 340, 400);

 

 

}

 

 

 

 

 

public void OpenNewWindow(string url, int height, int width)

{

    ClientScript.RegisterStartupScript(

 

 

this.GetType(), "newWindow", String.Format("<script>window.open('{0}','','menubar=no, height=" + height + ", width=" + width + ",resizable=yes,screenX=400,screenY=0','');</script>", url));

}

 

 

 

protected void Button2_Click(object sender, EventArgs e)

{

 

 

 

 

    string accountid;

 

    if (RadTreeView1.SelectedNode != null)

        accountid = RadTreeView1.SelectedNode.Value;

 

 

    else

 

        accountid =

"";

 

 

    OpenNewWindow(

 

 

 

"EditDialog.aspx?accountid=" + accountid + "&parent=false", 340, 400);

 

}

 

 

 

protected void Button3_Click(object sender, EventArgs e)

{

 

 

 

 

    string accountid;

 

    if (RadTreeView1.SelectedNode != null)

        accountid = RadTreeView1.SelectedNode.Value;

 

 

    else

 

        accountid =

"";

 

 

    OpenNewWindow(

 

 

 

"Inaktivate.aspx?accountid=" + accountid + "", 270, 150);

}

Simply opens diffrent popups as I've been talking about before.

 

 EDIT: I tried to fix the extreme whitespaces that was made when I copied my code, but I can't seem to remove it... I hope you can read it anyway, as I said it's very simple and more or less just opens diffrent popups.

[Nikolay Tsenkov]

Hi Henrik Tegman,

I took some time to provide you with simple example, which you can adapt for your scenario.
The scenario here is that a RadWindow, asp:Button and RadTreeView are placed in RadAjaxPanel and outside of the panel there is a asp:TextBox.  When you press the button a radConfirm window pops-up. After you press "Ok" or "Cancel" the page will post back and on the Response will be logged that you opened the windows through "Button1" (the asp:Button opening the window) and whether you pressed "Ok" or "Cancel" ("selected true/false"). After an Ajax call is made to the server in the response, the treeView is reloaded (on every Page_Load it's loaded with random number of nodes). You can make sure that the post back is made through an Ajax call with just entering some random text in the provided textBox (the one that is out of the RadAjaxPanel) and then open the window and press "Ok" or "Cancel".

Here is the markup of the page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="_DefaultCS" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server" ID="ScriptManager1" />
        <script type="text/javascript">
            function confirmOnServer(button) {
                function CallBackFn(arg) {
                    //postback the page and send the ID of the button and the argument in the eventArgument
                    //in this case we use "+" as delimiter
                    __doPostBack("RadWindow",button.getAttribute("id")+"+"+arg);
                }

                radconfirm("Postback?",CallBackFn);
            }


        </script>
        <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
            <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
            </telerik:RadWindowManager>
            <asp:Button ID="Button1" runat="server" OnClientClick="confirmOnServer(this); return false"
                Text="Button 1" />
            <telerik:RadTreeView runat="server" ID="RadTreeView1">
            </telerik:RadTreeView>
        </telerik:RadAjaxPanel>
    </div>
    </form>
</body>
</html>

Here is the code-behind:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using Telerik.Web.UI;

public partial class _DefaultCS : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ClientScript.GetPostBackEventReference(Page, "");
        if(Page.IsPostBack)
            {
                string argument = Request.Form["__EVENTARGUMENT"];
                //the argument string contains both the id of the element that invoked the postback
                //and the returned value from the radconfirm() dialog, therefore we need to split it:
                string[] args = argument.Split('+');
                //from this point on, you can build your logic depending on which button is pressed
                //and what argument was returned
                MyFunction(args[0], args[1]);

            }
        LoadTreeView(RadTreeView1);
    }

    // Reloading the treeView with random number of nodes
    private void LoadTreeView(RadTreeView tree)
    {
        tree.Nodes.Clear();

        Random rnd = new Random();

        int limit = rnd.Next(1,10);

        for (int i = 0; i < limit; i++)
        {
            var node = new RadTreeNode("Node " + i);
            tree.Nodes.Add(node);
        }
    }

    private void MyFunction(string controlId, string arg)
    {
        Response.Write("You pressed " + controlId + " and selected " + arg);
    }
}

I hope this example will help you!


Regards,
Nikolay Tsenkov
the Telerik team

[Henrik Tegman]

Thanks for all your help, but I still can't get it to work.

I shall try and explane it even more if that helps.

I have a TreeView, this TreeView is based on a DataScoure, that is a StoredProcedure.
As I start up the page everything works fine, the TreeView loads everything form the SP and I get a nice Tree!

Then I have a simple button that is there to add Nodes to the Tree, As I press the button a popup opens where I can enter some information like who the parent is and what node I want to add (the Tree is based on products) so I could say that I want Product 10001 to be a child to 10000. When I then press "Save" in the popup I save this information to our Database where this is stored.

Then comes my problem, I now want the Tree to reread/rerun that StoreProcedure and thus refresh the Tree. Whatever method I use, from window.reload, to pressing F5, and now also when I tried your way with the __doPostback, none of them work, I always get the same result, that the Tree is there, but not with my recent changes.

The only way that I can get around it is if I "browse" to the page again, I can do this simply by placeing the cursor at the browseingfield click on the it and press Enter. This way the page seem to reload in a "good" way and the Tree gets updated and my new Node is there.

I don't know what the diffrence is from browseing to a page by typeing in the address and simply pressing F5 on a page you already are on, but there is something diffrent atleast in the way that the Telerik TreeView handel when to run a SP.

[Nikolay Tsenkov]

Hi Henrik Tegman,

This is very strange that you get the same tree. Maybe the tree doesn't bind on postBack and does it only on first load. Since I haven't seen Page_Load handler I guess this must be the reason.
Could you please, call the DataBind method of the RadTreeView server instance during Page_Load time:

protected void Page_Load(object sender, EventArgs e)
{
    RadTreeView1.DataBind();
}

Please try this one out and let me know the results.

Hope this is going to help you!


Regards,
Nikolay Tsenkov
the Telerik team

[Henrik Tegman]

Thank you!

That is something that I can atleast use, when I call that method the Tree updates as I expected it todo.
At the moment I have a button that calls is and that works, since haveing it in the page_load wont work since I open up other pages and it seems that makes postbacks so it fires and then some information get lost on the way.

Is there any easy way to run this command from another window? Like in my popup.
Atm. I have a javascript on the closebutton in the popup that simply closes the window and was supposed to reload the parent (but even if i do that I don't get the updated Tree), now with this new way to refresh the Tree maybe I have to do it in a diffrent way. Is there any easy way in c# to something similar to:

window.close();
window.parent.RadTreeView1.Databind();

(this is just psedo-code, for a c# codebehind)

Anyway, thanks for that just that little row is what have been holding me back for a long time, if nothing else I will find some way around this, but help is always welcome.

[Nikolay Tsenkov]

Hello Henrik,

I am sorry, but I am unable to understand what your current problem is. Could you, please try to clarify this for me?

For example the sentence:
"At the moment I have a button that calls is and that works, since haveing it in the page_load wont work since I open up other pages and it seems that makes postbacks so it fires and then some information get lost on the way." (the highlighted parts are the ones I have trouble to understand)

I can only guess that probably you can not run a full postback, because you redirect the navigation to somewhere else. If that's the problem, then you can place the controls needed to update in ajax panel, then on postback caused by them they will be the only updated thing on the page and there wont be a full reload of the page (therefore the navigation will not be redirected). If you wan to stick with full post back, then you can persist a flag in the viewstate, which will indicate if the current post back is caused by the closing window or not and if the window caused it you can just switch to different implementation in the page_load handler (currently it's just "RadTreeView1.DataBind();").

Please, let me know if I understood your problem correctly and if so - did my solution worked for you!
If I am on the wrong direction here, please clarify the problem for me.


Regards,
Nikolay Tsenkov
the Telerik team

[Henrik Tegman]

Sorry for the last post, it didn't come out right.

Anyway I have "solved" the problem by redesining the page. The problem was more or less as you said that I did more things on page_load so that I couldn't simply add the rebind there as it would mess up other things.

My core problem was that I had two diffrent aspx pages and one of them opened the other and I wanted the later one (the child) to call a function in it's parent to update the TreeView that was at the parent, but I also understand this can't be done since at serverside you can't know who the parent is, this is something that must be done clientside.

I simply removed the popup/child and integrated it with the mainpage and everyone is happy.