Nodes get removed from RadTreeView when binding RadGrid from RadTreeView

[Marc]

Greetings,

I'm currently trying to revamp one of my pages from server side binding to a web service binding and encountered a hickup.

The page is as follows (see picture attached):

The Outside is a RadSplitter.
On the left side of the RadSplitter is an update panel, where inside is the RadTreeView.
On the right side, also inside an update panel, is a RadGrid.

The RadTreeView gets a basic set of nodes ("stations") on creation, but everything after that is loaded on demand by webservice. If a "station" is expaned, and the webservice is triggered and supplies nodes to the radgrid. This works correctly.
If I click on a "station", a client side event is triggered, which expands the node (therefore triggering the webservice and supplying nodes) and also calling the RadGrid to rebind (by client side). The Rebind triggers the OnNeedDataSource event of the RadGrid, where it loads its data server side. 

The problem is with the click & expand, as the nodes are then only briefly visible in the RadTreeView and immediately removed again.

Is this a know problem? What can I do? I need the nodes in the tree but also the data in the RadGrid.
I made a video of the error, but it seems I cannot upload the video here. I also created a very basic test project.

I'm using Telerik 2023.1.117.45.

Thank you in advance!

[Vasko]

Hello Marc,

Thank you for the provided sample project.

The reason you're experiencing this behavior is due to the TreeView being in an UpdatePanel, even though it's not making a PostBack request.

To fix the issue, move the TreeView outside the UpdatePanel: 

<telerik:RadSplitter runat="server" ID="radSplitter" Width="100%" Height="100%" LiveResize="true" Orientation="Vertical">
    <telerik:RadPane ID="RadPane1" runat="server" Width="300px">
        <telerik:RadTreeView ID="RadTreeView1" runat="server" TriStateCheckBoxes="true"
            CheckChildNodes="false" CausesValidation="false" CheckBoxes="false" PersistLoadOnDemandNodes="true"
            OnClientNodeClicked="onClientNodeClicked" OnClientNodePopulating="nodePopulating" OnClientNodePopulated="nodePopulated">
            <WebServiceSettings Path="WebService.asmx" Method="GetPVsToStation" />
        </telerik:RadTreeView>
    </telerik:RadPane>
    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
    <telerik:RadPane ID="RadPane2" runat="server">
       // Omitted for clearance
    </telerik:RadPane>
</telerik:RadSplitter>

The result after moving the TreeView out of the panel:

Additionally, I noticed that the DataBind() method of the Grid is being used. While this is an example project, please know that that is not correct and may lead to future problems with the Grid if it is still in use.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        rgPvs.DataSource = new List<string>();  //This is wrong, don't do that
        rgPvs.DataBind();
    }
}

Do this instead: 

protected void rgPvs_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    var rand = new Random();

    if (!IsPostBack)
    {
        rgPvs.DataSource = new List<string>();
    }
    else
    {
      
        List<GridObject> objs = new List<GridObject>();

        for (int i = 0; i < 2; i++)
        {
            objs.Add(new GridObject()
            {
                ID = i,
                Name = "GridObj" + rand.NextDouble().ToString(),
            });
        }

        rgPvs.DataSource = objs;
    }
}

Everything related to data binding must be done with the NeedDataSource event of the Grid, otherwise more problems may arise in the future.

I hope this helps out.

Kind regards,
Vasko
Progress Telerik

[Marc]

This did indeed work. Thank you very much!