Across boundaries - ( Cipto )

ultraweblistbar host ultrawebtree

Now for this example : it's the role management page, i would like to group based on the report path.

such as sales activity consist of 2 : sales activiy branch report ,sales activity per region. CMU consist of three reports.as you can see below

this is the role management. and i would like to use ultraweblistbar Hosting ultrawebtree

for the ultraweblist bar can host the ultrawebtree you can use:

1.internal class inherits from ITemplate(System.web.ui.ITemplate)

ex: internal class salesactivitytemplate:ITemplate
    {

        #region ITemplate Members

        public void InstantiateIn(Control container)
        {
            UltraWebTree salestree = new UltraWebTree();
            salestree.Nodes.Add("SalesActivityPerRO");
            salestree.Nodes.Add("SalesActivityperRegionBranch");
            salestree.CheckBoxes = true;
            container.Controls.Add(salestree);
        }

        #endregion
    }

and then set to this.UltraWebListbar1.Groups[0].Template = st; and so on and so on

2. Add a blank Web user control which i use this approach.. because you can retrieve the webtree control as a tree not split up to another control.

     protected void Page_Init(object sender, EventArgs e)
    {
        btnsubmit.Value = "Submit";
        btnsubmit.ServerClick += new EventHandler(btnsubmit_ServerClick);
        btnsubmit.Visible = false;
        btnreset.Visible = false;
        PlaceHolder1.Controls.Add(btnsubmit);
        PlaceHolder1.Controls.Add(btnreset);
        salesactivitytemplate st = new salesactivitytemplate();
        //this.UltraWebListbar1.Groups[0].Template = st;

        this.UltraWebListbar1.Groups[0].UserControlUrl = "MyWebUserControl.ascx";
        this.UltraWebListbar1.Groups[1].UserControlUrl = "MyWebUserControl.ascx";

        var i = this.UltraWebListbar1.Groups[0].UserControl;
        UltraWebTree salestree = new UltraWebTree();
        salestree.ID = "salestree";
        salestree.LeafNodeImageUrl = "~/images/ig_treeXPFolderClosed.gif";
        salestree.Nodes.Add("SalesActivityPerRO");
        salestree.Nodes.Add("SalesActivityperRegionBranch");
        salestree.CheckBoxes = true;
        salestree.ClientSideEvents.NodeChecked = "TreeNodeChecked";
        i.Controls.Add(salestree);

        var d = this.UltraWebListbar1.Groups[1].UserControl;
        UltraWebTree cmutree = new UltraWebTree();
        cmutree.ID = "cmu";
        cmutree.LeafNodeImageUrl = "~/images/ig_treeXPFolderClosed.gif";
        cmutree.Nodes.Add("ProductivityReport");
        cmutree.Nodes.Add("SLAperAppraisalReport");
        cmutree.Nodes.Add("TATmoreSLAReport");
        cmutree.ClientSideEvents.NodeChecked = "TreeNodeChecked";
        cmutree.CheckBoxes = true;
        d.Controls.Add(cmutree);
    }

 as for taking the webtree value, when Post or submit 

i've got to double unbox it.

  private List<UltraWebTree> GetMywebtrees()
    {
        List<UltraWebTree> mywebtrees;
        List<MyControls.MyWebUserControl> some =
            (from Group tmp in UltraWebListbar1.Groups
             select tmp.UserControl).Cast<MyControls.MyWebUserControl>().ToList();

        mywebtrees=(from MyControls.MyWebUserControl g in some select g.Controls
                    into temporary
                        from Control g in temporary
                        select g).Cast<UltraWebTree>().ToList();
        return mywebtrees;
    }

  void btnsubmit_ServerClick(object sender, EventArgs e)
    {
       
        List<UltraWebTree> mywebtrees = new List<UltraWebTree>();
        mywebtrees = GetMywebtrees();
        mywebtrees.Foreach<UltraWebTree>(new Action<UltraWebTree>(CheckEveryNodesinTree));
    }

 private void CheckEveryNodesinTree(UltraWebTree tree)
    {
        foreach (Node o in tree.Nodes)
        {
            if(o.Checked)
            {
                //o.Text
                //TODO: Add Logic like Chkmneluist.checked, check if !User.isinrole(username,role){ Roles.adduser(username,o.text)

            }
            else
            {
                //TODO: Add Logic like Chkmneluist.checked, reverse above
            }
        }
    }

 Lastly to change the Icon When User click or unclick use the javascript.

Every nodes that we got . has 3 childrens and number 2 is the image .

   function TreeNodeChecked(treeId, nodeId, bChecked) {
        var d = document.getElementById(nodeId);
        var e = d.children[2];
        try
        {
        if (bChecked) {
            e.src= '../images/ig_treeXPFolderOpen.gif';
        }
        else {
            e.src= '../images/ig_treeXPFolderClosed.gif';
        }
        }
        catch(e)
        {
        alert(e);}
    }

26/10/2008

Use JQuery, because on ie it's children but on Firefox it's childNodes

    function TreeNodeChecked(treeId, nodeId, bChecked) {
            var node = $('#' + nodeId.toString() + ' img');
            node.each(function() {
              
                    if (bChecked) {
                        this.src = '../images/ig_treeXPFolderOpen.gif';
                    }
                    else {
                            this.src = '../images/ig_treeXPFolderClosed.gif';
                    }
               
            });

Final Result UI:

 Listbar type

Share this post: | | | |