Articles in this section
Category / Section

How to refreshTreeview after editing from client and server side?

1 min read

Description

Refresh the TreeView with data bound using database based on changes made with TreeView editing. You can refresh the nodes from client and server side as follows.

Solution

Server side

The Treeview control is refreshed by the data rebinding process in server side. When any change is done in the Treeview control, it rebind the data from database.

The database is rendered in Treeview by the TreeViewdata() method, and Treeview node can be refreshed from the database using DataRefresh() method. TreeviewRefresh() method is used to refresh the TreeviewNodelist and bind the nodes to Treeview control. To update the database, you can use TreeView1_NodeRenamed() and data is added to the database from the Treeview control. You can use button as shown in the following code example to add a node in Treeview.

ASPX

<syncfusion:TreeView ID="TreeView1" runat="server" AutoPostBackOnNodeSelect="true" Width="250px" ClientObjectId="tree" AutoPostBackOnNodeRename="true" OnNodeRenamed="TreeView1_NodeRenamed" EnableCallbacks="true">
</syncfusion:TreeView>    
<syncfusion:ButtonAdv ID="ButtonAdv1" OnClick="ButtonAdv1_Click" AutoFormat="Office2010Black"   runat="server" Text="Add Record">
</syncfusion:ButtonAdv>

 

ASPX.CS

public class TreeViewdata
    {        
        public sampleEntities MainDB { get; set; }
        public List<TreeViewNode> SampleList { get; set; }
        private TreeViewNode RootNode;
        public TreeViewdata()
        {
            MainDB = new sampleEntities();
            SampleList = new List<TreeViewNode>();
            RootNode = new TreeViewNode();
            DataRefresh();
        }
        public void DataRefresh()
        {//Refreshing the Data from the database and creating the treeviewnode List .
            SampleList.Clear();
            foreach (SampleTable Record in MainDB.SampleTables)
            {
                RootNode = new TreeViewNode() { Text = Record.Sname, ID = Record.Sname };//Record Id  set as parent node 
                RootNode.Items.Add(new TreeViewNode() { Text = Record.Name, ID = Record.Name });// record Name set as  child node 
                SampleList.Add(RootNode);
            }
        }
    }
    public partial class form : System.Web.UI.Page
    {
        TreeViewdata data = new TreeViewdata();
        int Tempcount;
        protected void Page_Load(object sender, EventArgs e)
        {
            Tempcount = data.SampleList.Count+1;
            if (!IsPostBack)
                TreeviewRefresh();
        }
        public void TreeviewRefresh()
        {//Refreshing the treeviewNodelist and binding the nodes to treeview control.
            TreeView1.Items.Clear();
            data.DataRefresh();
            foreach (TreeViewNode one in data.SampleList)
                TreeView1.Items.Add(one);
        }
        protected void ButtonAdv1_Click(object Sender, Syncfusion.Web.UI.WebControls.Shared.ButtonAdvControl.ButtonAdvClickEventArgs e)
        {
            AddRow(); //for the Record insertion to the datasource.
            TreeviewRefresh(); //Data rebinding. 
        }
        private void AddRow()
        {
            data.MainDB.SampleTables.Add(new SampleTable() { Id = Tempcount, Name = string.Format("A{0}", Tempcount), Sname = string.Format("Axxx{0}", Tempcount) });
            data.MainDB.SaveChanges();
        }
        protected void TreeView1_NodeRenamed(object sender, TreeViewNodeRenamedEventArgs e)//for the database updation. 
        {
            int tempRow = 0;
            foreach (SampleTable temp in data.MainDB.SampleTables)
            {
                if (temp.Sname == e.Node.ID)
                {                    
                    data.MainDB.SampleTables.Local[tempRow].Sname = e.Node.Text;
                    break;
                }
                else if (temp.Name == e.Node.ID)
                {            
                    data.MainDB.SampleTables.Local[tempRow].Name = e.Node.Text;
                    break;
                }
                tempRow = tempRow + 1;
            }
            data.MainDB.SaveChanges();
        }
    }

Client side

The Treeview control is refreshed by the Refresh() function. EnableCallbacks property is set to true in Treeview to refresh the data. You can use the advance button to trigger Refresh() function when you click the button. Refer the following code example.

ASPX

<syncfusion:TreeView ID="TreeView6" runat="server" AutoPostBackOnNodeSelect="true" OnNodeSelected="TreeView_NodeSelected1" DataSourceID="ObjectDataSource1" AutoFormat="Office2007 Blue" ClientObjectId="tree" EnableCallbacks="true">
                            <DataBindings>
                                <syncfusion:TreeViewItemBinding DataMember="DefaultView" IDField="id" ParentIDField="parentId" TextField="Text" />
                            </DataBindings>
  </syncfusion:TreeView>
  <syncfusion:ButtonAdv Text="Refresh me " ID="button2" OnClientClick="onclick" runat="server"></syncfusion:ButtonAdv>
<script type="text/javascript">
            function onclick(evt) {
                tree.Refresh();
            }
        </script>

 

Note

A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.

The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.

You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied