[CLOSED] ComponentColumn with PartialViewResult, Replace Mode

[UnifyEducation]

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().Checkbox()));
                     }
                 )))

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().Checkbox()));
                     }
                 )))

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

[Baidaly]

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]

Thank you for your help. It works now

[Daniil]

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]

Thank you for your suggestion. You can close this thread.