[CLOSED] Razor tabpanel tabs, gridpanels and dynamic content

**OriCoder** · Apr 09, 2013, 9:57 PM

Hi Guys

So I have looked at the partial dynamic rendering and got it working loading my content with an empty grid panel. Next challenge is getting data into each or the tabs I create.

From what I am reading I would need to dynamic generate all the object for the tab in the controller?

e.g.

http://forums.ext.net/showthread.php...dpanel-problem - which I haven't got working yet, also looking at the way to correctly add tabs as per

http://forums.ext.net/showthread.php...ab-to-TabPanel - does not seam to work

Code I have to test in my controller is called from a direct event

public void OrderTab( string containerId)
            {
                
                //var result = new PartialViewResult
                //{
                //    ViewName = "OrderTab",
                //    ContainerId = containerId,
                //    RenderMode = RenderMode.AddTo
                //};
                var result = new Ext.Net.Panel()
                {
                    ID = "tab" + this.GetCmp<TabPanel>(containerId).Items.Count + 1,
                    Title = "ServerTab" + this.GetCmp<TabPanel>(containerId).Items.Count + 1,
                    Html = "foo"
                    
                };
                result.AddTo(this.GetCmp<TabPanel>(containerId));
                this.GetCmp<TabPanel>(containerId).SetActiveTab(result.ClientID);

                //return result;
                //return new DirectResponse();
            }

when I click my button the code runs but it don't get anything.

So remember the end game here would be to click the button and have new tab created with all the stores, grids, form object etc.

**Baidaly** · Apr 10, 2013, 12:13 AM

Hello!

I would recommend to use PartialViews because it's much easier to read and fix. However, there are two examples based on this example: http://mvc.ext.net/#/Dynamic_Partial_Rendering/Add_Tab/

Using PartialView:

Controller

public class Add_TabController : Controller
{       
	public ActionResult Index()
	{
		return View();
	}

	public ActionResult AddTab(string containerId)
	{
		var result = new PartialViewResult
		{
			ViewName = "Tab",
			ContainerId = containerId,                                
			RenderMode = RenderMode.AddTo,
			Model = new object[]
			{
				new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
				new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
				new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" }
			}
		};
		
		this.GetCmp<TabPanel>(containerId).SetLastTabAsActive();
		
		return result;
	}
}

Index.cshtml

@{
    ViewBag.Title = "Add Tab";
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}

@section example
{
    <h1>Add tab</h1>
    <p>In this example, View is appended as new tab</p>
    <p>Click on the button in tab strip for adding a tab with view</p>

    @(Html.X().Window()
        .Title("Tabs")
        .Width(680)
        .Height(500)
        .Layout(LayoutType.Fit)
        .Items(Html.X().TabPanel()
            .ID("TabPanel1")
            .TabBar(Html.X().Button()
                .Icon(Icon.Add)
                .Flat(true)
                .DirectEvents(de => {
                    de.Click.Url = Url.Action("AddTab");
                    de.Click.ExtraParams.Add(new { containerId = "TabPanel1" });
                })
            )
        )
    )
        
}

PartialView

@model System.Collections.IEnumerable
@{
    MvcResourceManager.RegisterGlobalStyle(Url.Content("~/Areas/Dynamic_Partial_Rendering/Content/Tab.css"));
}

@(Html.X().GridPanel()
	.Title("Array Grid")
	.Width(600)
	.Height(350)
	.Store(Html.X().Store()
		.Model(Html.X().Model()
			.Fields(
				new ModelField("company"),
				new ModelField("price", ModelFieldType.Float),
				new ModelField("change", ModelFieldType.Float),
				new ModelField("pctChange", ModelFieldType.Float),
				new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
			)
		)
		.DataSource(Model)
	)
	.ColumnModel(
		Html.X().Column().Text("Company").DataIndex("company").Flex(1),
		Html.X().Column().Text("Price").DataIndex("price"),
		Html.X().Column().Text("Change").DataIndex("change"),
		Html.X().Column().Text("Change").DataIndex("pctChange"),
		Html.X().DateColumn().Text("Last Updated").DataIndex("lastChange")
	)
)

Using only controller:

Controller:

public class Add_TabController : Controller
    {       
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult AddTab(string containerId)
        {
            GridPanel p = new GridPanel {Title = "test"};
			Model m = new Model();
			m.Fields.Add(new ModelField("company"));
	        Store s = new Store();
			s.Model.Add(m);
			s.Reader.Add(new ArrayReader());
			s.Data = new object[]
			{
				new object[] { "3m Co" },
				new object[] { "Alcoa Inc" },
				new object[] { "Altria Group Inc" }
			};
			p.Store.Add(s);
			p.ColumnModel.Columns.Add(new Column() { Text = "Company", DataIndex = "company" });
			p.AddTo(containerId);
			p.Render(containerId, RenderMode.AddTo);
            
            this.GetCmp<TabPanel>(containerId).SetLastTabAsActive();
            
            return this.Direct();
        }
    }

Index.cshtml:

@{
    ViewBag.Title = "Add Tab";
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}

@section example
{
    <h1>Add tab</h1>
    <p>In this example, View is appended as new tab</p>
    <p>Click on the button in tab strip for adding a tab with view</p>

    @(Html.X().Window()
        .Title("Tabs")
        .Width(680)
        .Height(500)
        .Layout(LayoutType.Fit)
        .Items(Html.X().TabPanel()
            .ID("TabPanel1")
            .TabBar(Html.X().Button()
                .Icon(Icon.Add)
                .Flat(true)
                .DirectEvents(de => {
                    de.Click.Url = Url.Action("AddTab");
                    de.Click.ExtraParams.Add(new { containerId = "TabPanel1" });
                })
            )
        )
    )
        
}

**OriCoder** · Apr 10, 2013, 8:54 AM

Originally Posted by Baidaly

Hello!

I would recommend to use PartialViews because it's much easier to read and fix. However, there are two examples based on this example: http://mvc.ext.net/#/Dynamic_Partial_Rendering/Add_Tab/

Using PartialView:

Controller

public class Add_TabController : Controller
{       
	public ActionResult Index()
	{
		return View();
	}

	public ActionResult AddTab(string containerId)
	{
		var result = new PartialViewResult
		{
			ViewName = "Tab",
			ContainerId = containerId,                                
			RenderMode = RenderMode.AddTo,
			Model = new object[]
			{
				new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
				new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
				new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" }
			}
		};
		
		this.GetCmp<TabPanel>(containerId).SetLastTabAsActive();
		
		return result;
	}
}

Index.cshtml

@{
    ViewBag.Title = "Add Tab";
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}

@section example
{
    <h1>Add tab</h1>
    <p>In this example, View is appended as new tab</p>
    <p>Click on the button in tab strip for adding a tab with view</p>

    @(Html.X().Window()
        .Title("Tabs")
        .Width(680)
        .Height(500)
        .Layout(LayoutType.Fit)
        .Items(Html.X().TabPanel()
            .ID("TabPanel1")
            .TabBar(Html.X().Button()
                .Icon(Icon.Add)
                .Flat(true)
                .DirectEvents(de => {
                    de.Click.Url = Url.Action("AddTab");
                    de.Click.ExtraParams.Add(new { containerId = "TabPanel1" });
                })
            )
        )
    )
        
}

PartialView

@model System.Collections.IEnumerable
@{
    MvcResourceManager.RegisterGlobalStyle(Url.Content("~/Areas/Dynamic_Partial_Rendering/Content/Tab.css"));
}

@(Html.X().GridPanel()
	.Title("Array Grid")
	.Width(600)
	.Height(350)
	.Store(Html.X().Store()
		.Model(Html.X().Model()
			.Fields(
				new ModelField("company"),
				new ModelField("price", ModelFieldType.Float),
				new ModelField("change", ModelFieldType.Float),
				new ModelField("pctChange", ModelFieldType.Float),
				new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
			)
		)
		.DataSource(Model)
	)
	.ColumnModel(
		Html.X().Column().Text("Company").DataIndex("company").Flex(1),
		Html.X().Column().Text("Price").DataIndex("price"),
		Html.X().Column().Text("Change").DataIndex("change"),
		Html.X().Column().Text("Change").DataIndex("pctChange"),
		Html.X().DateColumn().Text("Last Updated").DataIndex("lastChange")
	)
)

Using only controller:

Controller:

public class Add_TabController : Controller
    {       
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult AddTab(string containerId)
        {
            GridPanel p = new GridPanel {Title = "test"};
			Model m = new Model();
			m.Fields.Add(new ModelField("company"));
	        Store s = new Store();
			s.Model.Add(m);
			s.Reader.Add(new ArrayReader());
			s.Data = new object[]
			{
				new object[] { "3m Co" },
				new object[] { "Alcoa Inc" },
				new object[] { "Altria Group Inc" }
			};
			p.Store.Add(s);
			p.ColumnModel.Columns.Add(new Column() { Text = "Company", DataIndex = "company" });
			p.AddTo(containerId);
			p.Render(containerId, RenderMode.AddTo);
            
            this.GetCmp<TabPanel>(containerId).SetLastTabAsActive();
            
            return this.Direct();
        }
    }

Index.cshtml:

@{
    ViewBag.Title = "Add Tab";
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}

@section example
{
    <h1>Add tab</h1>
    <p>In this example, View is appended as new tab</p>
    <p>Click on the button in tab strip for adding a tab with view</p>

    @(Html.X().Window()
        .Title("Tabs")
        .Width(680)
        .Height(500)
        .Layout(LayoutType.Fit)
        .Items(Html.X().TabPanel()
            .ID("TabPanel1")
            .TabBar(Html.X().Button()
                .Icon(Icon.Add)
                .Flat(true)
                .DirectEvents(de => {
                    de.Click.Url = Url.Action("AddTab");
                    de.Click.ExtraParams.Add(new { containerId = "TabPanel1" });
                })
            )
        )
    )
        
}

I too would prefer to use the partial views, and have that working that I can add a tab and I get my view with all the bit I want. Its just that I can't see how to load diffrent data in to the diffrent tab. e.g.

I have an event that gets the data from the db for grid panel etc, I want to load this on to tab A, then load a record on to tab B etc, etc...

Whats the best way of doing this I've tried using the partial view and trying to rename stores etc from the controller but with no luck.

**Vladimir** · Apr 10, 2013, 11:07 AM

PartialViewResult has Model property, that property is passed to partial view (you can use Model in partial view, also you can specify type of model via @model)

**OriCoder** · Apr 10, 2013, 11:38 AM

ah.. I see, so if I build my girds and data in the "ModelFor" style then I should be able to set unique Id etc for all the components?

... sorry that was a question :D

**Baidaly** · Apr 10, 2013, 5:52 PM

Yes, you can manually set IDs for items in PartialViews. However, you should control that all items have unique IDs.

**OriCoder** · Apr 10, 2013, 6:30 PM

Originally Posted by Baidaly

Yes, you can manually set IDs for items in PartialViews. However, you should control that all items have unique IDs.

That's what I am trying and failing to do.

So in my Partial View hit my plus button and and get new tabs with the girds I want etc all fine. So check I have working partial views the way I want

Next to load different data in to each of the tab. My Idea was to "rename" the the components by the defined ID in the partialView e.g.

                X.GetCmp<Store>("OrderLegs").ID = "OrderRef" + tabId;
                X.GetCmp<Store>("OrderRef" + tabId).LoadData(vw_LegsForOrder);

But just get OrderRef1 etc not defined.

Just feel I am almost there but not quiet getting it.

**Baidaly** · Apr 10, 2013, 9:13 PM

You should use another approach:

Controller:

public class Add_TabController : Controller
    {       
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Reload(string gridId)
        {
            return this.Direct(GridEmployee.GetAll2());
        }

        public ActionResult AddTab(string containerId, string tabNumber)
        {
            var result = new PartialViewResult
            {
                ViewName = "Tab",
                ContainerId = containerId,                                
                RenderMode = RenderMode.AddTo,
				Model = GridEmployee.GetAll()
            };
			result.TempData["tabNumber"] = tabNumber;
            
            this.GetCmp<TabPanel>(containerId).SetLastTabAsActive();
            
            return result;
        }
    }

	public class GridEmployee
    {
        [ModelField(IDProperty=true)]
        [Column(Order=1)]
        public int Id
        {
            get;
            set;
        }

        [Column(Order = 2)]
        public string FirstName
        {
            get;
            set;
        }

        [Column(Order = 3)]
        public string LastName
        {
            get;
            set;
        }

        public static List<GridEmployee> GetAll()
        {
            return new List<GridEmployee> { 
                new GridEmployee{ Id = 1, FirstName = "John", LastName = "Snow"},
                new GridEmployee{ Id = 2, FirstName = "Fred", LastName = "Flintstone"},
                new GridEmployee{ Id = 3, FirstName = "Andrew", LastName = "Fuller"}
            };
        }

        public static List<GridEmployee> GetAll2()
        {
            return new List<GridEmployee> { 
                new GridEmployee{ Id = 1, FirstName = "John2", LastName = "Snow2"},
                new GridEmployee{ Id = 2, FirstName = "Fred2", LastName = "Flintstone2"},
                new GridEmployee{ Id = 3, FirstName = "Andrew2", LastName = "Fuller2"}
            };
        }
    }

Index.cshtml:

@{
    ViewBag.Title = "Add Tab";
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}

@section example
{
    <h1>Add tab</h1>
    <p>In this example, View is appended as new tab</p>
    <p>Click on the button in tab strip for adding a tab with view</p>

    @(Html.X().Window()
        .Title("Tabs")
        .Width(680)
        .Height(500)
        .Layout(LayoutType.Fit)
        .Items(Html.X().TabPanel()
            .ID("TabPanel1")
            .TabBar(Html.X().Button()
                .Icon(Icon.Add)
                .Flat(true)
                .DirectEvents(de => {
                    de.Click.Url = Url.Action("AddTab");
                    de.Click.ExtraParams.Add(new { containerId = "TabPanel1" });
                    de.Click.ExtraParams.Add(new Parameter("tabNumber", "#{TabPanel1}.items.length", ParameterMode.Raw));
                })
            )
        )
    )
        
}

Tab.cshtml:

@model IEnumerable<Ext.Net.MVC.Examples.Areas.Dynamic_Partial_Rendering.Controllers.GridEmployee>
@{
    MvcResourceManager.RegisterGlobalStyle(Url.Content("~/Areas/Dynamic_Partial_Rendering/Content/Tab.css"));
}

@(
    Html.X().GridPanelFor(Model)
            .Title("Employees")
            .Width(350)
            .Height(200)
            .ForceFit(true)
            .ID("GridPanel_" + TempData["tabNumber"])
            .Buttons(Html.X().Button()
                .Text("Reload")
                .DirectEvents(de =>
                {
                    de.Click.Action = "Reload";
                    de.Click.ExtraParams.Add(new Parameter("gridId", "this.findParentByType('grid').id", ParameterMode.Raw));
                    de.Click.Success = "this.findParentByType('grid').getStore().loadData(result.result);";
                }))
    )

**OriCoder** · Apr 11, 2013, 5:52 AM

Thanks that looks more promising, ill try it out this, morning and let you guys know

**OriCoder** · Apr 11, 2013, 4:33 PM

you can close this all good stuff that helped in this thread the key that done the trick - TempData["tabNumber"]

Thread: [CLOSED] Razor tabpanel tabs, gridpanels and dynamic content

Thread Tools

Search Thread

Display

[CLOSED] Razor tabpanel tabs, gridpanels and dynamic content

Similar Threads

[CLOSED] TabPanel tabs activating differently if remove tabs

[CLOSED] MVC 3 [Razor] TabPanel Content Loading

[0.82] IsAjaxRequest and creating tabs and GridPanels in code behind problem

BUG - tabPanel with 2 gridpanels

[CLOSED] dynamic tabs do not display content

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Razor tabpanel tabs, gridpanels and dynamic content

[CLOSED] Razor tabpanel tabs, gridpanels and dynamic content

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us