WebDataTree Taking to much of time to load nodes

showkath posted over 14 years ago

I have created WeBdate Tree from sample which pouplate nodes from xml.Taking 20 minutes to populate from xml.system also become slow after that.

Plz find

1.aspx and aspx.cs

2.SampleXML25.xml file

--------------------------------------------aspx-------------------------------------------------------------------------------------------------------

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AonWrap</title>
    <style type="text/css">
        .BackgroundImage
        {
            background-image: url(images/TreeBg.jpg);
            background-repeat: no-repeat;
            height:400px;

        }
          .TreeBackgroundImage
        {
            background-image: url(images/DragImageA.png);
            background-repeat: no-repeat;
            background-position:top-left;

        }
            .TreeTopBackgroundImage
        {
            background-image: url(images/DragImageC.png);
            background-repeat: no-repeat;
            background-position:top;
            width:510px;
            padding-left:10px;
            height:40px;
            margin-top:20px;
        }

      .boxBackground
            {
                background-color: #F7F7F7;
                border: 1px solid #EEEEEE;
                padding: 10px;
                line-height: 12px;
                text-align:center;
                width:636px;
                margin-left:40px;
                clear:both;
              }

       .boxBackground2
            {
                background-color: #F7F7F7;
                border: 1px solid #EEEEEE;
                padding: 10px;
                line-height: 12px;
                text-align:left;
                width:274px;
                float:left;
                margin-left:10px;
                display:inline;
                margin-bottom:10px;
             }
    </style>

    <script type="text/javascript">
        function isNullorUndefined(val) {
            var u;
            return ((u === val) || (val == null));
        }
        function onDragEnter(sender, args) {
            if (args.get_destNode().get_valueString() == "File") {
                args.set_cancel(true);
            }
        }

        function onClientNodeDropping(sender, args) {
            if (!isNullorUndefined(args.get_destNode())) {
                if (args.get_destNode().get_valueString() == "File") {
                    args.set_cancel(true);
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <div id="Center" class="TreeTopBackgroundImage">
         </div>

    <div class="BackgroundImage" >
        <div id="Left" style="display: inline; float: left; padding-left: 30px; height: auto;"
            class="TreeBackgroundImage">
            <b>WebDataTree1</b>
            <ig:WebDataTree ID="DDWebDataTree1" runat="server" StyleSetName="Default" CheckBoxMode="BiState"
                EnableConnectorLines="true" SelectionType="Single" Width="330px">
                <ClientEvents DragEnter="onDragEnter" NodeDropping="onClientNodeDropping" />
                <DragDropSettings AllowDrop="true" DragDropMode="Default" EnableDragDrop="true" />
                <DataBindings>
                    <ig:DataTreeNodeBinding DataMember="Folder" ValueField="Value" TextField="Text" ImageUrlField="ImageUrl" />
                    <ig:DataTreeNodeBinding DataMember="Folder" ValueField="Value" TextField="Text" ImageUrlField="ImageUrl" />
                </DataBindings>
            </ig:WebDataTree>
                      <div class="boxBackground2">
                <asp:CheckBox Text="Connector Lines" ID="WebDataTree1ConnLinesCheckBox" runat="server"
                    AutoPostBack="true" OnCheckedChanged="dataTreeConnLinesChecked" Checked="true" />
                <br />
                <asp:CheckBox Text="CheckBox" ID="WebDataTree1CheckBox" runat="server" AutoPostBack="true"
                    Checked="true" OnCheckedChanged="dataTree1checkBoxChecked" />
                <br />
                <asp:CheckBox Text="Clear images" ID="LeftTreeClearImagesCheckBox" AutoPostBack="true"
                    Checked="false" OnCheckedChanged="onLeftTreeClearImages" runat="server" />
            </div>
        </div>
        <div id="right" style="display: inline; float: left; height: auto; padding-left: 30px;"
            class="TreeBackgroundImage">
            <b>WebDataTree2</b>
            <ig:WebDataTree ID="DDWebDataTree2" runat="server" StyleSetName="Default" EnableConnectorLines="true"
                Width="330px" SelectionType="Single">
                <ClientEvents DragEnter="onDragEnter" NodeDropping="onClientNodeDropping" />
                <DragDropSettings AllowDrop="true" DragDropMode="Default" EnableDragDrop="True" />
                <DataBindings>
                    <ig:DataTreeNodeBinding DataMember="Folder" ValueField="Value" TextField="Text" ImageUrlField="ImageUrl" />
                    <ig:DataTreeNodeBinding DataMember="Folder" ValueField="Value" TextField="Text" ImageUrlField="ImageUrl" />
                </DataBindings>
            </ig:WebDataTree>
            <div class="boxBackground2">
                <asp:CheckBox Text="Connector Lines" ID="WebDataTree2ConnLinesCheckBox" runat="server"
                    AutoPostBack="true" OnCheckedChanged="dataTreeConnLinesChecked" Checked="true" />
                <br />
                <asp:CheckBox Text="CheckBox" ID="WebDataTree2CheckBox" runat="server" AutoPostBack="true"
                    Checked="false" OnCheckedChanged="dataTree2checkBoxChecked" />
                <br />
                <asp:CheckBox Text="Clear images" ID="RightTreeClearImagesCheckBox" AutoPostBack="true"
                    Checked="false" OnCheckedChanged="onRightTreeClearImages" runat="server" />
            </div>
        </div>
         <br />
           <br />
              <div class="boxBackground">
           <asp:CheckBox ID="AllowDropCheckBox" runat="server" Checked="true" AutoPostBack="true" OnCheckedChanged="allowDropCheckChanged"/>Allow Drop &nbsp
             <asp:CheckBox ID="EnableDragDropCheckBox" runat="server" Checked="true" AutoPostBack="true" OnCheckedChanged="enableDragDropChanged" />Enable Drag & Drop &nbsp
           </div>
    </div>
    </form>
</body>
</html>

------------------------------------------------------------------------------------------------------------------------

cs

--------------------------------------------------------------------------------------------

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Data.SqlClient;
using System.Xml;
using Infragistics.Web.UI.NavigationControls;

public partial class AonWrapFromDb : System.Web.UI.Page
{

    #region Constants

    private const string DATA_SOURCE = "DataSource";

    #endregion

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataSet ds = new DataSet();
            ds.DataSetName = "TreeDataSet";
            //string filename = Server.MapPath("xml\\AonWrapXML" + DateTime.Now.Day + ".xml");

            ds.ReadXml(HttpContext.Current.Server.MapPath("~/xml/SampleXML25.xml"));
            Page.Session[DATA_SOURCE] = ds;
            this.DDWebDataTree1.DataSource = ds;
            this.DDWebDataTree2.DataSource = ds;
            this.DDWebDataTree1.DataBind();
            this.DDWebDataTree2.DataBind();
            this.InitTree(this.DDWebDataTree1, false);
            this.InitTree(this.DDWebDataTree2, false);



            // Load_WrapUpLevels();
        }
    }

    protected void allowDropCheckChanged(object sender, EventArgs e)
    {
        this.DDWebDataTree1.DragDropSettings.AllowDrop = this.AllowDropCheckBox.Checked;
        this.DDWebDataTree2.DragDropSettings.AllowDrop = this.AllowDropCheckBox.Checked;
    }

    protected void enableDragDropChanged(object sender, EventArgs e)
    {
        this.DDWebDataTree1.DragDropSettings.EnableDragDrop = this.EnableDragDropCheckBox.Checked;
        this.DDWebDataTree2.DragDropSettings.EnableDragDrop = this.EnableDragDropCheckBox.Checked;
    }

    protected void dataTreeConnLinesChecked(object sender, EventArgs e)
    {
        this.DDWebDataTree1.EnableConnectorLines = this.WebDataTree1ConnLinesCheckBox.Checked;
        this.DDWebDataTree2.EnableConnectorLines = this.WebDataTree2ConnLinesCheckBox.Checked;
    }

    protected void dataTree1checkBoxChecked(object sender, EventArgs e)
    {
        if (this.WebDataTree1CheckBox.Checked)
        {
            this.DDWebDataTree1.CheckBoxMode = Infragistics.Web.UI.CheckBoxMode.BiState;
        }
        else
        {
            this.DDWebDataTree1.CheckBoxMode = Infragistics.Web.UI.CheckBoxMode.Off;
        }
    }

    protected void dataTree2checkBoxChecked(object sender, EventArgs e)
    {
        if (this.WebDataTree2CheckBox.Checked)
        {
            this.DDWebDataTree2.CheckBoxMode = Infragistics.Web.UI.CheckBoxMode.BiState;
        }
        else
        {
            this.DDWebDataTree2.CheckBoxMode = Infragistics.Web.UI.CheckBoxMode.Off;
        }
    }

    protected void onLeftTreeClearImages(object sender, EventArgs e)
    {
        this.DDWebDataTree1.DataSource = ((DataSet)Page.Session[DATA_SOURCE]);
        this.DDWebDataTree1.DataBind();
        this.InitTree(this.DDWebDataTree1, this.LeftTreeClearImagesCheckBox.Checked);
    }

    protected void onRightTreeClearImages(object sender, EventArgs e)
    {
        this.DDWebDataTree2.DataSource = ((DataSet)Page.Session[DATA_SOURCE]);
        this.DDWebDataTree2.DataBind();
        this.InitTree(this.DDWebDataTree2, this.RightTreeClearImagesCheckBox.Checked);
    }

    protected void InitTree(WebDataTree tree, bool clearImages)
    {
        foreach (DataTreeNode item in tree.AllNodes)
        {
            if (clearImages)
            {
                item.ImageUrl = string.Empty;
            }

            if (item.Text == "CSG Prod/Test")
            {
                item.Expanded = true;
            }
        }
    }

}

//-----------------------------------------------------------

//--------------------------SampleXML25-----------------------------------------

10000 records(with hierarchical structure)

49378

[Infragistics] Petar Ivanov posted over 13 years ago

Hi showkath,

It has been a while since you opened this thread but in case you are still in need of assistance I would be glad to help.

After investigating your case and it appears that you are trying to populate the WebDataTree with too many records for it to be able to display them in a reasonable timeframe. While the WebDataTree is optimized to be able to display a substantial amount of data, your xml file may contain too many records.

As far as I can see, you are reading your XML into a DataSet first and then binding it to your tree. A more practical approach in your situation would be to use an XmlDataSource instead.

In order to optimize the performance of the WebDataTree you can try employing a load on demand approach. You can find illustrative examples of how to enable automatic or manual load on demand on the WebDataTree in our samples collection:

http://samples.infragistics.local/aspnet/Samples/WebDataTree/Performance/ManualLoadOnDemand/Default.aspx?cn=data-tree&sid=c257cd9c-1c5a-4159-aa51-ff8ea8386395

However, keep in mind that even with load on demand if you have a lot of records on a single "level" of the tree, their loading would still be time consuming.

Please contact me if I can be of further assistance.

Petar Ivanov
Developer Support Engineer
Infragistics, Inc.
http://ko.infragistics.com/support
Cancel
Reply

Verify Answer

Cancel