PDA

View Full Version : [CLOSED] Hierarchical Grids RowExpander



alscg
Nov 11, 2013, 12:37 PM
Hi,

We have generated hierarchical grids using RowExpander.
It is getting rendered successfully on RowExpand.
If first row is expanded and collapsed and second row is expanded, after this the first row won't get expand again.

Steps to reproduce the problem :
1. Expand first row
2. Collapse first row
3. Expand second row
4. Expand first row again (Its not getting opened)

State grid is a parent and Insurer grid is a child.

Can you please suggest?

Here is the code :

1) State.cshtml


@model object[]

@(Html.X().ResourceManager())

@(Html.X().GridPanel()
.ID("stateGrid")
.Store(
Html.X().Store()
.RemotePaging(true)
.DataSource(Model)
.Model(
Html.X().Model()
.IDProperty("ID")
.Fields(
new ModelField("ID"),
new ModelField("company"),
new ModelField("price"),
new ModelField("change"),
new ModelField("pctChange"),
new ModelField("lastChange")
)
)
.ServerProxy(
Html.X().AjaxProxy()
.Url(Url.Action("StateView"))
)
)
.ColumnModel(
Html.X().Column().Cls("custom-header").Text(StateView.GridHeader_KeyState).DataIndex("company").Flex(2),
Html.X().Column().Cls("custom-header").Text(StateView.GridHeader_ExEnrollPotential).Dat aIndex("price").Flex(2),
Html.X().Column().Cls("custom-header").Text(StateView.GridHeader_BenchmarkPlan).DataInd ex("change").Flex(2),
Html.X().Column().Cls("custom-header").Text(StateView.GridHeader_InsurerMarketShare).Da taIndex("pctChange").Flex(2),
Html.X().Column().Cls("custom-header").Text(StateView.GridHeader_PlansFillingToParticip ate).DataIndex("lastChange").Flex(2)
).HeaderPosition(Direction.Top)
.Plugins(Html.X().RowExpander()
.Loader(Html.X().ComponentLoader()
.Url(Url.Action("Insurer", "Insurer"))
.Mode(LoadMode.Component)
.LoadMask(mask => mask.ShowMask = true)
.Params(ps => ps.Add(new Parameter("id", "this.record.getId()", ParameterMode.Raw)))
)
.Listeners(events =>
{
events.Expand.Handler = "this.grid.doLayout();";
events.Collapse.Handler = "this.grid.doLayout();";
})
)
)


2) StateController.cs :


public ActionResult State()
{
return View(new object[]
{
new object[] { "1", "California", "aaa", "aaa", "aaa", "aaa" },
new object[] { "2", "New York", "bbb", "bbb", "bbb", "bbb" },
new object[] { "3", "Texas", "ccc", "ccc", "ccc", "ccc" },
new object[] { "4", "Florida", "ddd", "ddd", "ddd", "ddd" },
new object[] { "5", "Illinois", "eee", "eee", "eee", "eee" },
new object[] { "6", "Michigan", "fff", "fff", "fff", "fff" },
new object[] { "7", "North Carolina", "ggg", "ggg", "ggg", "ggg" },
new object[] { "8", "Virginia", "hhh", "hhh", "hhh", "hhh" },
new object[] { "9", "New Jersey", "iii", "iii", "iii", "iii" },
new object[] { "10", "Georgia", "jjj", "jjj", "jjj", "jjj" },
new object[] { "11", "San Diego", "kkk", "kkk", "kkk", "kkk" },
new object[] { "12", "Dallas", "lll", "lll", "lll", "lll" },
new object[] { "13", "San Jose", "mmm", "mmm", "mmm", "mmm" },
new object[] { "14", "Indianapolis", "nnn", "nnn", "nnn", "nnn" },
new object[] { "15", "San Francisco", "ooo", "ooo", "ooo", "ooo" },
new object[] { "16", "Columbus", "ppp", "ppp", "ppp", "ppp" },
new object[] { "17", "Houston", "qqq", "qqq", "qqq", "qqq" },
new object[] { "18", "Detroit", "rrr", "rrr", "rrr", "rrr" }
});
}


3) Insurer.cshtml :


@model object[]

@(Html.X().GridPanel()
.ID("insurerGrid")
.Store(
Html.X().Store()
.DataSource(Model[0])
.Model(
Html.X().Model()
.IDProperty("insID")
.Fields(
new ModelField("insID"),
new ModelField("insCompany"),
new ModelField("insPrice"),
new ModelField("insChange"),
new ModelField("insPctChange"),
new ModelField("insLastChange")
)
)
)
.ColumnModel(
Html.X().Column().Cls("custom-header").ID("insCompany").Text("Company").DataIndex("insCompany").Flex(2),
Html.X().Column().Cls("custom-header").ID("insPrice").Text("Price").DataIndex("insPrice").Flex(2),
Html.X().Column().Cls("custom-header").ID("insBenchmarkPlan").Text("Benchmark Plan").DataIndex("insChange").Flex(2),
Html.X().Column().Cls("custom-header").ID("insMarketShare").Text("Insurer Market Share").DataIndex("insPctChange").Flex(2),
Html.X().Column().Cls("custom-header").ID("insPlans").Text("Plans Filling To Participate").DataIndex("insLastChange").Flex(2)
).HeaderPosition(Direction.Top)
.Plugins(Html.X().RowExpander()
.Loader(Html.X().ComponentLoader()
.Url(Url.Action("Benefit", "Benefit"))
.Mode(LoadMode.Component)
.LoadMask(mask => mask.ShowMask = true)
.Params(ps => ps.Add(new Parameter("id", "this.record.getId()", ParameterMode.Raw)))
)
.Listeners(events =>
{
events.Expand.Handler = "this.grid.doLayout();";
events.Collapse.Handler = "this.grid.doLayout();";
})
)
.Listeners(events => events.ViewReady.Handler = " this.up('gridpanel').doLayout();")
)



4) InsurerController.cs :


public ActionResult Insurer(string id)
{
List<object> data = new List<object>();

data.Add(new { insID = "1", insCompany = "Insurer 1", insPrice = "aaa", insChange = "aaa", insPctChange = "aaa", insLastChange = "aaa" });
data.Add(new { insID = "2", insCompany = "Insurer 2", insPrice = "bbb", insChange = "bbb", insPctChange = "bbb", insLastChange = "bbb" });
data.Add(new { insID = "3", insCompany = "Insurer 3", insPrice = "ccc", insChange = "ccc", insPctChange = "ccc", insLastChange = "ccc" });
data.Add(new { insID = "4", insCompany = "Insurer 4", insPrice = "ddd", insChange = "ddd", insPctChange = "ddd", insLastChange = "ddd" });
data.Add(new { insID = "5", insCompany = "Insurer 5", insPrice = "eee", insChange = "eee", insPctChange = "eee", insLastChange = "eee" });
data.Add(new { insID = "6", insCompany = "Insurer 6", insPrice = "fff", insChange = "fff", insPctChange = "fff", insLastChange = "fff" });
data.Add(new { insID = "7", insCompany = "Insurer 7", insPrice = "ggg", insChange = "ggg", insPctChange = "ggg", insLastChange = "ggg" });
data.Add(new { insID = "8", insCompany = "Insurer 8", insPrice = "hhh", insChange = "hhh", insPctChange = "hhh", insLastChange = "hhh" });
data.Add(new { insID = "9", insCompany = "Insurer 9", insPrice = "iii", insChange = "iii", insPctChange = "iii", insLastChange = "iii" });
data.Add(new { insID = "10", insCompany = "Insurer 10", insPrice = "jjj", insChange = "jjj", insPctChange = "jjj", insLastChange = "jjj" });
data.Add(new { insID = "11", insCompany = "Insurer 11", insPrice = "kkk", insChange = "kkk", insPctChange = "kkk", insLastChange = "kkk" });
data.Add(new { insID = "12", insCompany = "Insurer 12", insPrice = "lll", insChange = "lll", insPctChange = "lll", insLastChange = "lll" });
data.Add(new { insID = "13", insCompany = "Insurer 13", insPrice = "mmm", insChange = "mmm", insPctChange = "mmm", insLastChange = "mmm" });
data.Add(new { insID = "14", insCompany = "Insurer 14", insPrice = "nnn", insChange = "nnn", insPctChange = "nnn", insLastChange = "nnn" });
data.Add(new { insID = "15", insCompany = "Insurer 15", insPrice = "ooo", insChange = "ooo", insPctChange = "ooo", insLastChange = "ooo" });
data.Add(new { insID = "16", insCompany = "Insurer 16", insPrice = "ppp", insChange = "ppp", insPctChange = "ppp", insLastChange = "ppp" });
data.Add(new { insID = "17", insCompany = "Insurer 17", insPrice = "qqq", insChange = "qqq", insPctChange = "qqq", insLastChange = "qqq" });
data.Add(new { insID = "18", insCompany = "Insurer 18", insPrice = "rrr", insChange = "rrr", insPctChange = "rrr", insLastChange = "rrr" });

return this.ComponentConfig("Insurer", new object[] { data });

}



Thanks.

Daniil
Nov 11, 2013, 3:26 PM
Hi @alscg,

I think all the inner grids are rendered with the same ids due to:

.ID("insurerGrid")

The ids should be unique. I think it is better to remove that ID as well.

It is actual for the Columns' IDs as well. You could use ItemIDs instead.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-cfg-itemId

alscg
Nov 12, 2013, 5:17 AM
Hi @alscg,

I think all the inner grids are rendered with the same ids due to:

.ID("insurerGrid")

The ids should be unique. I think it is better to remove that ID as well.

It is actual for the Columns' IDs as well. You could use ItemIDs instead.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-cfg-itemId


It worked.

Thank you Daniil.