[CLOSED] Switching between partial views on a tree panel

**rbarr** · Nov 24, 2011, 10:41 AM

hey guys I have two partials which both contain grids whose stores are filtered so only data for that node is displayed. The problem I have is I can't switch between the partial views so when I click on a different child node (this is case Test1 -> Test3) it doesn't render on screen. I used to use a panel.update() but this cause issues with my grid which Daniil helped me fix heres a sample of my code.

Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net;

namespace TestTemplate.Controllers
{
    public class TestController : Controller
    {
        public ActionResult Save(string containerId, string parentNode, string node)
        {
            switch (parentNode)
            {
                case "Test":
                    {
                        Ext.Net.MVC.PartialViewResult p = new Ext.Net.MVC.PartialViewResult(containerId, RenderMode.AddTo);
                        p.ViewName = "TestPartial";
                        p.SingleControl = true;
                        p.ViewData.Model = new TestTemplate.ViewModel.TestViewModel();
                        return p;

                    }
                case "Test3":
                    {
                        Ext.Net.MVC.PartialViewResult p = new Ext.Net.MVC.PartialViewResult(containerId, RenderMode.AddTo);
                        p.ViewName = "TestPartial2";
                        p.SingleControl = true;
                        p.ViewData.Model = new TestTemplate.ViewModel.TestViewModel();
                        return p;

                    }
                default: return null;
            }

        }

    }
}

MainView

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {

                this.Store1.DataSource = this.Data;
                this.Store2.DataSource = this.Data;
                this.Store1.DataBind();
                this.Store2.DataBind();


                Ext.Net.TreeNode root = new Ext.Net.TreeNode("Fact Find");
                root.Expanded = true;
                this.FactFindTreePanel.Root.Add(root);

                var Test = new Ext.Net.TreeNode("Test");
                Test.AllowChildren = true;
                Test.NodeID = "Test";
                root.Nodes.Add(Test);


                var Test3 = new Ext.Net.TreeNode("Test3");
                Test3.AllowChildren = true;
                Test3.NodeID = "Test3";
                root.Nodes.Add(Test3);

                var Test1 = new Ext.Net.TreeNode("Test1");
                Test1.AllowChildren = false;
                Test1.Listeners.Click.Handler = "treeNodeSelect(node);";
                Test1.NodeID = "Test1";
                Test.Nodes.Add(Test1);
                Test3.Nodes.Add(Test1);
                
                var Test2 = new Ext.Net.TreeNode("Test2");
                Test2.Listeners.Click.Handler = "treeNodeSelect(node);";
                Test2.AllowChildren = false;
                Test2.NodeID = "3m Co";
                Test.Nodes.Add(Test2);
                Test3.Nodes.Add(Test2);




            }

        }
        private object[] Data
        {
            get
            {
                return new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
            
            };
            }
        }

      
        
        
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
       <ext:Store ID="Store2" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="company" />
                    <ext:RecordField Name="price" Type="Float" />
                    <ext:RecordField Name="change" Type="Float" />
                    <ext:RecordField Name="pctChange" Type="Float" />
                    <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="company" />
                    <ext:RecordField Name="price" Type="Float" />
                    <ext:RecordField Name="change" Type="Float" />
                    <ext:RecordField Name="pctChange" Type="Float" />
                    <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:Viewport ID="FactFindViewport" runat="server" Layout="BorderLayout">
        <Items>
            <ext:TreePanel ID="FactFindTreePanel" runat="server" Title="Fact Find" Region="West"
                Width="200">
                <DirectEvents>
                    <Click CleanRequest="true" Url="~/Test/Save">
                        <ExtraParams>
                            <ext:Parameter Name="containerId" Value="#{mainPanel}.id" Mode="Raw" />
                            <ext:Parameter Name="node" Value="node.id" Mode="Raw" />
                            <ext:Parameter Name="parentNode" Value="node.parentNode.id" Mode="Raw" />
                        </ExtraParams>
                    </Click>
                </DirectEvents>
            </ext:TreePanel>
            <ext:Panel runat="server" Width="700" Region="Center" ID="mainPanel" Layout="FitLayout">
            <BottomBar>
              <ext:Toolbar runat="server">
                <Items>
                  <ext:Button runat="server" Icon="Bug">
                     <Listeners>
                        <Click Handler="debugger" />

                     </Listeners>
                  </ext:Button>

                </Items>
              </ext:Toolbar>
            </BottomBar>
            </ext:Panel>
        </Items>

    </ext:Viewport>
    <script src="<%=Url.Content("~/Scripts/view/Test.js") %>" type="text/javascript">
    
       
     
    </script>
    
</asp:Content>

PartialView 1

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TestTemplate.ViewModel.TestViewModel>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {



    }


</script>
<ext:Container ID="Container1" runat="server">
    <Items>
        <ext:Checkbox ID="Checkbox1" runat="server" FieldLabel="Not Disclosed" />
        <ext:GridPanel ID="Test" BufferResize="500" Title="Bank & Building Society" runat="server"
            StoreID="Store1">
            <ColumnModel>
                <Columns>
                    <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                    <ext:Column Header="Price" DataIndex="price" />
                    <ext:Column ColumnID="Change" Header="Change" DataIndex="change" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView ForceFit="true" />
            </View>
        </ext:GridPanel>
    </Items>
</ext:Container>

PartialView 2

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TestTemplate.ViewModel.TestViewModel>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {



    }


</script>
<ext:Container ID="Container1" runat="server">
    <Items>
        <ext:Checkbox ID="Checkbox1" runat="server" FieldLabel="Not Disclosed" />
        <ext:GridPanel ID="Test" BufferResize="500" Title="Bank & Building Society" runat="server"
            StoreID="Store2">
            <ColumnModel>
                <Columns>
                    <ext:Column ColumnID="Test1" Header="Company" DataIndex="company" />
                    <ext:Column Header="Test2" DataIndex="price" />
                    <ext:Column ColumnID="Test3" Header="Change" DataIndex="change" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView ForceFit="true" />
            </View>
        </ext:GridPanel>
    </Items>
</ext:Container>

My js file

// <reference name="Ext.Net.Build.Ext.Net.extjs.adapter.ext.ext-base.js" assembly="Ext.Net" />
/// <reference name="Ext.Net.Build.Ext.Net.extjs.ext-all-debug.js" assembly="Ext.Net" />
/// <reference name="Ext.Net.Build.Ext.Net.extnet.extnet-core-debug.js" assembly="Ext.Net" />
/// <reference name="Ext.Net.Build.Ext.Net.extnet.extnet-data-debug.js" assembly="Ext.Net" />
/// <reference path="site_master.js" />


var treeNodeSelect = function (node) {
    node.select();

    if (node.parentNode.id == "Test") {

        ids = node.id;
        Store1.clearFilter();
        Store1.filter('company', ids);

    }

    if (node.parentNode.id == "Test3") {

        ids = node.id;
        Store1.clearFilter();
        Store1.filter('company', ids);

    }


}

Heres the sitemaster

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <style type="text/css">
        .my-grid .x-grid3-cell-inner { white-space: normal; }
        .ext-ie .button-fix table.x-btn, .ext-gecko .button-fix table.x-btn { top: 0px; }
        .ext-ie .button-fix .x-form-text, .ext-gecko .button-fix .x-form-text { margin-top: 1px; }
        .list-item { font: normal 11px tahoma, arial, helvetica, sans-serif; padding: 3px 10px 3px 10px; border: 1px solid #fff; border-bottom: 1px solid #eeeeee; white-space: normal; color: #555; }
        .list-item h3 { display: block; font: inherit; font-weight: bold; color: #222; }
        .ext-el-mask { filter: alpha(opacity=80) !important; width: 100% !important; -moz-opacity: 0.8 !important; opacity: 0.8 !important; }
        .x-fieldset-no-padding { padding-left: 0px !important; padding-right: 0px !important; }
    </style>
    <title>
        <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
    </title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" Theme="Default"
        GZip="true" CleanResourceUrl="true" ScriptMode="Debug" SourceFormatting="true" />
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
</html>

Thanks

**Daniil** · Nov 24, 2011, 11:16 AM

Hi,

Lets consider this piece of the code:

var Test1 = new Ext.Net.TreeNode("Test1");
Test1.AllowChildren = false;
Test1.Listeners.Click.Handler = "treeNodeSelect(node);";
Test1.NodeID = "Test1";
Test.Nodes.Add(Test1);
Test3.Nodes.Add(Test1);

You add the Test1 node to the two Test and Test3 nodes. It means that there is two nodes in a tree with the same ids. It's wrong. A NodeID must unique for each node.

**rbarr** · Nov 24, 2011, 11:41 AM

      Ext.Net.TreeNode root = new Ext.Net.TreeNode("Fact Find");
                root.Expanded = true;
                this.FactFindTreePanel.Root.Add(root);

                var Test = new Ext.Net.TreeNode("Test");
                Test.AllowChildren = true;
                Test.NodeID = "Test";
                root.Nodes.Add(Test);
                
                var Test3 = new Ext.Net.TreeNode("Test3");
                Test3.AllowChildren = true;
                Test3.NodeID = "Test3";
                root.Nodes.Add(Test3);

                var Test1 = new Ext.Net.TreeNode("Test1");
                Test1.AllowChildren = false;
                Test1.Listeners.Click.Handler = "treeNodeSelect(node);";
                Test1.NodeID = "Test1";
                Test.Nodes.Add(Test1);

                var Test2 = new Ext.Net.TreeNode("Test2");
                Test2.Listeners.Click.Handler = "treeNodeSelect(node);";
                Test2.AllowChildren = false;
                Test2.NodeID = "3m Co";
                Test.Nodes.Add(Test2);

                var Test4 = new Ext.Net.TreeNode("Test4");
                Test4.AllowChildren = false;
                Test4.Listeners.Click.Handler = "treeNodeSelect(node);";
                Test4.NodeID = "Test4";
                Test3.Nodes.Add(Test4);

                var Test5 = new Ext.Net.TreeNode("Test5");
                Test5.AllowChildren = false;
                Test5.Listeners.Click.Handler = "treeNodeSelect(node);";
                Test5.NodeID = "Test5";
                Test3.Nodes.Add(Test5);

I have also updated my js file

/// <reference name="Ext.Net.Build.Ext.Net.extjs.adapter.ext.ext-base.js" assembly="Ext.Net" />
/// <reference name="Ext.Net.Build.Ext.Net.extjs.ext-all-debug.js" assembly="Ext.Net" />
/// <reference name="Ext.Net.Build.Ext.Net.extnet.extnet-core-debug.js" assembly="Ext.Net" />
/// <reference name="Ext.Net.Build.Ext.Net.extnet.extnet-data-debug.js" assembly="Ext.Net" />
/// <reference path="site_master.js" />


var treeNodeSelect = function (node) {
    node.select();

    if (node.parentNode.id == "Test") {

        ids = node.id;
        Store1.clearFilter();
        Store1.filter('company', ids);

    }

    if (node.parentNode.id == "Test3") {

        var ids = "Bond";
        Store2.clearFilter();
        Store2.filter('company', ids);

    }


}

Daniil sorry for my mistake im pretty new at doing this. I have edited the code so they all have different Ids but I'm still getting the same switching problem any advice would be great.

**Daniil** · Nov 24, 2011, 12:04 PM

Please set up:

1. IDMode="Explicit" for the Container1 in both partial views:

<ext:Container ID="Container1" runat="server" IDMode="Explicit">

or

2. The following Before handler for the Click DirectEvent.

Before="#{mainPanel}.removeAll();"

Thread: [CLOSED] Switching between partial views on a tree panel

Thread Tools

Search Thread

Display

[CLOSED] Switching between partial views on a tree panel

Similar Threads

[CLOSED] [MVC] Cascading multi Partial views

[CLOSED] [Razor] using partial views

[CLOSED] Listeners for Tree Panel (Razor Views)

[CLOSED] Razor and Ext.Net base and partial views

The use of mulitply use rcontrols (partial views).

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Switching between partial views on a tree panel

[CLOSED] Switching between partial views on a tree panel

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us