PDA

View Full Version : [CLOSED] ComponentColumn with PartialViewResult, Replace Mode



UnifyEducation
Oct 11, 2013, 3:19 PM
Hi,

I have a GridPanel with ComponentColumn, and I need to replace this GridPanel each times I click the button.
But the problem is: the ComponentColumn disappears in the first click and all GridPanel disappears in the second click.

The test code:


public class TestController : Controller
{
public ActionResult Index()
{
var model = new TimeSpan(14, 14, 14);
return View(model);
}

public ActionResult ReLoad()
{
return new PartialViewResult
{
ContainerId = "MyPanel",
RenderMode = RenderMode.Replace
};
}
}

Index.cshtml

@model dynamic

@{
Layout = null;
var datasource = new object[]
{
new { Column1 = "Text 1", Column2 = true },
new { Column1 = "Text 2", Column2 = false },
new { Column1 = "Text 3", Column2 = true },
new { Column1 = "Text 4", Column2 = false },
new { Column1 = "Text 5", Column2 = true },
new { Column1 = "Text 6", Column2 = false },
new { Column1 = "Text 7", Column2 = true },
new { Column1 = "Text 8", Column2 = false },
new { Column1 = "Text 9", Column2 = true }
};

}
@(Html.X().ResourceManager())
@(Html.X().Button().Text("ReLoad")
.DirectEvents(d =>
{
d.Click.Url = Url.Action("ReLoad");
}))

@(Html.X().Panel().Width(400).ID("MyPanel").Layout(LayoutType.Fit)
.Items(Html.X().GridPanel().Border(false)
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(Html.X().ModelField().Name("Column1").SortType(SortTypeMethod.AsText),
Html.X().ModelField().Name("Column2").Type(ModelFieldType.Boolean)))
.DataSource(datasource)
)
.ColumnModel(c =>
{
c.Add(Html.X().Column().DataIndex("Column1")
.Text("Column1").Flex(1).Sortable(true));
c.Add(Html.X().ComponentColumn().DataIndex("Column2").Editor(true).Sortable(false)
.Align(Alignment.Center).Component(Html.X().Checkb ox()));
}
)))


Reload.cshtml:

@model dynamic

@{
Layout = null;
var datasource = new object[]
{
new { Column1 = "Text 1", Column2 = true },
new { Column1 = "Text 2", Column2 = false },
new { Column1 = "Text 3", Column2 = true },
new { Column1 = "Text 4", Column2 = false },
new { Column1 = "Text 5", Column2 = true },
new { Column1 = "Text 6", Column2 = false },
new { Column1 = "Text 7", Column2 = true },
new { Column1 = "Text 8", Column2 = false },
new { Column1 = "Text 9", Column2 = true }
};

}
@(Html.X().Panel().Width(400).ID("MyPanel").Layout(LayoutType.Fit)
.Items(Html.X().GridPanel().Border(false)
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(Html.X().ModelField().Name("Column1").SortType(SortTypeMethod.AsText),
Html.X().ModelField().Name("Column2").Type(ModelFieldType.Boolean)))
.DataSource(datasource)
)
.ColumnModel(c =>
{
c.Add(Html.X().Column().DataIndex("Column1")
.Text("Column1").Flex(1).Sortable(true));
c.Add(Html.X().ComponentColumn().DataIndex("Column2").Editor(true).Sortable(false)
.Align(Alignment.Center).Component(Html.X().Checkb ox()));
}
)))


Do you have any idea to resolve this problem?
Thank you in advance.

Baidaly
Oct 11, 2013, 10:18 PM
Hello!

Try to add the following overriding to Index.cshtml



@Html.X().ResourceManager().ScriptMode(ScriptMode. Debug)

<script>
Ext.override(Ext.grid.column.ComponentColumn, {
destroy: function () {
var view = this.grid.getView(),
me = this;

this.removeComponents();

if (this.overComponent) {
this.overComponent.destroy();
delete this.overComponent;
}

if (me.overOnly) {
me.view.un("beforerefresh", me.onBeforeRefresh, me);
me.view.un("beforeitemupdate", me.moveComponent, me);
me.view.un("beforeitemremove", me.moveComponent, me);
me.view.un("itemmouseenter", me.onItemMouseEnter, me);
me.view.un("itemmouseleave", me.onItemMouseLeave, me);
} else {
me.view.un("beforerefresh", me.removeComponents, me);
me.view.un("refresh", me.insertComponents, me);
me.view.un("beforeitemupdate", me.removeComponent, me);
me.view.un("beforeitemremove", me.removeComponent, me);
me.view.un("itemadd", me.itemAdded, me);
me.view.un("itemupdate", me.itemUpdated, me);
}

if (me.grid.isTree || me.grid.ownerLockable && me.grid.ownerLockable.isTree) {
me.grid.un("beforeitemcollapse", me.removeNodeComponents, me._cnrScope);
me.grid.un("beforeitemmove", me.removeNodeComponents, me._crScope);
}

me.view.un("cellfocus", this.onFocusCell, this);
}
});

Ext.net._renderTo = function (cfg, cmp) {
if (cfg.mode == "item") {
cfg.ct.insert(cfg.index, cmp);
} else if (cfg.mode == "el") {
if (Ext.isArray(cmp)) {
Ext.each(cmp, function (c) {
Ext.net._renderTo(cfg, c);
});
}
cmp = Ext.ComponentManager.create(cmp);
cmp.render(cfg.ct, cfg.position);
}
};
</script>


We are investigating this issue.

UnifyEducation
Oct 21, 2013, 2:25 PM
Thank you for your help. It works now

Daniil
Oct 22, 2013, 5:36 AM
Here is a slightly corrected fix.

Ext.net._renderTo = function (cfg, cmp) {
if (cfg.mode == "item") {
cfg.ct.insert(cfg.index, cmp);
} else if (cfg.mode == "el") {
if (Ext.isArray(cmp)) {
Ext.each(cmp, function (c) {
Ext.net._renderTo(cfg, c);
});
} else {
cmp = Ext.ComponentManager.create(cmp);
cmp.render(cfg.ct, cfg.position);
}
}
};

Committed to the trunk.

Here I am demonstrating a bit different approaches. With this approaches you can avoid copying stuff in the main and partial views.

1. ItemsFromPartial

Main View

<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@Html.X().ResourceManager()

@Html.X().Button().Text("Reload").DirectClickAction("Reload")

@(Html.X().Panel()
.ID("MyPanel")
.Width(400)
.Layout(LayoutType.Fit)
.ItemsFromPartial("Reload")
)
</body>
</html>

Partial View

@{
var datasource = new object[]
{
new { Column1 = "Text 1 " + DateTime.Now.Second, Column2 = true },
new { Column1 = "Text 2", Column2 = false },
new { Column1 = "Text 3", Column2 = true },
new { Column1 = "Text 4", Column2 = false },
new { Column1 = "Text 5", Column2 = true },
new { Column1 = "Text 6", Column2 = false },
new { Column1 = "Text 7", Column2 = true },
new { Column1 = "Text 8", Column2 = false },
new { Column1 = "Text 9", Column2 = true }
};
}


@(Html.X().GridPanel()
.Border(false)
.Store(Html.X().Store()
.Fields(new string[] { "Column1", "Column2" })
.DataSource(datasource)
)
.ColumnModel(
Html.X().Column()
.DataIndex("Column1")
.Text("Column1")
.Flex(1),
Html.X().ComponentColumn()
.DataIndex("Column2")
.Editor(true)
.Align(Alignment.Center)
.Component(Html.X().Checkbox())

)
)


Controller

public ActionResult Index()
{
return View();
}

public ActionResult ReLoad(string containerId)
{
return new Ext.Net.MVC.PartialViewResult
{
ContainerId = "MyPanel",
RenderMode = RenderMode.AddTo,
ClearContainer = true
};
}

2. Using Loader

Main View

<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@Html.X().ResourceManager()

@Html.X().Button().Text("Reload").Handler("App.MyPanel.reload();")

@(Html.X().Panel()
.ID("MyPanel")
.Width(400)
.Layout(LayoutType.Fit)
.Loader(Html.X().ComponentLoader()
.Url(Url.Action("Reload"))
.Mode(LoadMode.Script)
.Params(new Parameter()
{
Name = "containerId",
Value = "this.id",
Mode = ParameterMode.Raw
})
)
)
</body>
</html>


Partial View

@{
var datasource = new object[]
{
new { Column1 = "Text 1 " + DateTime.Now.Second, Column2 = true },
new { Column1 = "Text 2", Column2 = false },
new { Column1 = "Text 3", Column2 = true },
new { Column1 = "Text 4", Column2 = false },
new { Column1 = "Text 5", Column2 = true },
new { Column1 = "Text 6", Column2 = false },
new { Column1 = "Text 7", Column2 = true },
new { Column1 = "Text 8", Column2 = false },
new { Column1 = "Text 9", Column2 = true }
};
}


@(Html.X().GridPanel()
.Border(false)
.Store(Html.X().Store()
.Fields(new string[] { "Column1", "Column2" })
.DataSource(datasource)
)
.ColumnModel(
Html.X().Column()
.DataIndex("Column1")
.Text("Column1")
.Flex(1),
Html.X().ComponentColumn()
.DataIndex("Column2")
.Editor(true)
.Align(Alignment.Center)
.Component(Html.X().Checkbox())

)
)


Controller

public ActionResult Index()
{
return View();
}

public ActionResult ReLoad(string containerId)
{
return new Ext.Net.MVC.PartialViewResult
{
ContainerId = containerId,
RenderMode = RenderMode.AddTo,
ClearContainer = true,
WrapByScriptTag = false
};
}

UnifyEducation
Oct 24, 2013, 8:58 AM
Thank you for your suggestion. You can close this thread.