TreeView inside UpdatePanel issue - postbacks on check and uncheck of the node's Checkbox

Wednesday, June 3, 2009


Problem: In ASP.NET TreeView control, user wish to select one or many treenodes and wish to have options for further working depending upon the selection. The selection is done using a checkbox. On checking, the server side code need to know what has been checked and provides further options for the same. The checkbox check/uncheck does not fire a postback. Though we tried to imitate the same using javascript, the page gets refreshed. We used AJAX and put the TreeView control inside an UpdatePanel


Findings:


Microsoft does not support this. An issue/request for the feature was put on Microsoft feedback site and the same has been rejected. The status of the request is “Closed (Won’t fix)”. For details see [http://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=103865]


I tried following options:

1. Add a ajvascript to do a postback: I added a onClick script to the tree as follows:

        function TreeClicked()
        {
              var curevent = event;
              if(curevent.srcElement.type=="checkbox")
                {
                  //__doPostBack('','');
                  //__doPostBack('mytree','');
                  //__doPostBack('LinkButton1','');
                }
        }


It works in normal scenario. But it refreshes/reloads the page all the time. I needed a flicker free refresh using AJAX. But could not get it. This can be used if you have no issue with the page reload.


2. Derve your own treeview: I derived the treeview and created my own treeview control where I added the postback event and override the render method. This behaves very weird in Visual Studio 2005. However I got partial success in Visual Studio 2008.  
 
The cod e for deriving is as follows:

 

using System;
using System.Text;
using System.Data;
using ASP = System.Web.UI.WebControls;
using System.Web.UI;
using System.IO;

namespace MyTreeView
{
    [ToolboxData("<{0}:MyTreeView runat=server></{0}:MyTreeView>")]
    public class MyTreeView : ASP.TreeView, IPostBackEventHandler
    {
        public event EventHandler CheckClick;

        protected override void Render(HtmlTextWriter writer)
        {
            StringBuilder builder = new StringBuilder();

            using(StringWriter stringWriter = new StringWriter(builder))
            {
                HtmlTextWriter tempWriter = new HtmlTextWriter(stringWriter);
                base.Render(tempWriter);
            }

            string find = "<input type=\"checkbox\"";
            string replace = "<input type=\"checkbox\" onclick=" + getPostBack() + " \"";

            writer.Write(builder.ToString().Replace(find, replace));
        }

        protected override void RenderChildren(HtmlTextWriter writer)
        {
            StringBuilder builder = new StringBuilder();

            using (StringWriter stringWriter = new StringWriter(builder))
            {
                HtmlTextWriter tempWriter = new HtmlTextWriter(stringWriter);
                base.RenderChildren(tempWriter);
            }

            string find = "<input type=\"checkbox\"";
            string replace = "<input type=\"checkbox\" onclick=" + getPostBack() + " \"";

            writer.Write(builder.ToString().Replace(find, replace));
        }

        protected string getPostBack()
        {
            return this.Page.ClientScript.GetPostBackEventReference(this, "@CheckPostBack");
        }

        protected virtual void OnCheckClick(EventArgs e)
        {
            if (CheckClick != null) CheckClick(this, e);
        }

        void IPostBackEventHandler.RaisePostBackEvent(string eventArgument)
        {
            OnCheckClick(new EventArgs());
        }
    }
}


Work around: I thought of a work around. The user needs the checkbox only when the user needs to select more than one element. So, the user will select the element (while selecting a single one) by clicking the tree node and NOT BY CHECKING the checkbox. The options for single element selection will be provided on selection of the element by clicking the tree node. The options now being provided on multiple selection will be available all the time. If the user selects any such option where one or more check box need to be checked, the system will give a message to the user.
 

Resolution: Looking at the findings, I thought of taking up the work around as of now.

Filed Under: ASP.NET

Comments (1) -

www.slideshare.netUnited Stateswww.slideshare.net said:

Howdy! This blog post could not be written much better! Looking through this post reminds me of my previous roommate! He always kept talking about this. I will send this article to him. Fairly certain he'll have a good read. Thanks for sharing!

Have a look at my webpage;  www.slideshare.net - www.slideshare.net/.../hostgator-1-cent-coupon-how-to-save-money-with-a-hostgator-coupon-code

Add comment

biuquote
Loading