Using .Store() in .GridPanel() to show a panel below the grid

I am trying to get a .Panel() element to display just below my .GridPanel() element, all on the same tab. Here is my current code:

Code:

---

                                Html.X().TabPanel()
                                    .TabPosition(TabPosition.Left)
                                    .TabRotation(0)
                                    .Width(1500)
                                    .Height(800)
                                    .MarginSpec("10 10 -10 10")
                                    .Items(
                                        Html.X().GridPanel()
                                            .Title("Request Priorities")
                                            .ID("reqPrioritiesGrid")
                                            .ColumnWidth(1)
                                            .MarginSpec("0 0 0 0")
                                            .Width(1000)
                                            .Height(400)
                                            .Border(true)
                                            .Store(
                                                Html.X().Store()
                                                    .ID("reqPrioritiesStore")
                                                    .AutoLoad(true)
                                                    .DataSource(Model.RequestPriorities)
                                                    .Model(
                                                        Html.X().Model()
                                                            .Fields(f =>
                                                            {
                                                                f.Add(Html.X().ModelField().Name("RequestPriorityName").Type(ModelFieldType.String));
                                                                f.Add(Html.X().ModelField().Name("RequestPriorityDescription").Type(ModelFieldType.String));
                                                                f.Add(Html.X().ModelField().Name("SortOrder").Type(ModelFieldType.Int));
                                                                f.Add(Html.X().ModelField().Name("ResponseTarget").Type(ModelFieldType.String));
                                                                f.Add(Html.X().ModelField().Name("ResponseFormat").Type(ModelFieldType.String));
                                                                f.Add(Html.X().ModelField().Name("ResponseSLA").Type(ModelFieldType.String));
                                                            })
                                                )
                                    .ServerProxy(
                                        Html.X().AjaxProxy()
                                            .Url(Url.Action("ManageLists", "Admin", new { area = "Cadence" }))
                                    )
                                    )
                                .Listeners(l =>
                                {
                                    l.Select.Handler = "handleReqPopulate(record.data);" + "toggleEditRequest();";
                                })
                                    .ColumnModel(
                                        Html.X().Column().Flex(1).Text("Request Priority Name").DataIndex("RequestPriorityName"),
                                        Html.X().Column().Flex(3).Text("Request Priority Desciption").DataIndex("RequestPriorityDescription"),
                                        Html.X().Column().Flex(1).Text("Sort Order").DataIndex("SortOrder"),
                                        Html.X().Column().Flex(1).Text("Response Target").DataIndex("ResponseTarget"),
                                        Html.X().Column().Flex(1).Text("Response Format").DataIndex("ResponseFormat"),
                                        Html.X().Column().Flex(1).Text("Response SLA").DataIndex("ResponseSLA")
                                    ),
                                Html.X().Panel()
                                    .Title("Task Priorities")
                                    .ID("taskPrioritiesGrid"),
                                Html.X().Panel()
                                    .Title("Task Severities"),
                                Html.X().Panel()
                                    .Title("Request Groups"),
                                Html.X().Panel()
                                    .Title("Request Group Types")
                            )

---

I have tried adding the .Panel() element inside the .Store() scope, but I get an overload error message when I try to do that. Adding it outside of the .Store() creates a new tab. Is there a way to display the panel just below the grid while being on the same tab?

Hello @rymac!

You should wrap your grid panel in another panel. And to that panel (containing the grid panel) also add the second panel you want.

While a GridPanel is a specialization of a panel, it uses the whole panel space to show its contents. There are means to dock items around, but the best way you can do that is by properly laying out simple panels, so you can specify layout, packing, and so on.

As the GridPanel being a "specialized panel", you can use it straight in the TabPanel like any ordinary panel. But in your case you should have panel containing the grid and your inner panel.

Furthermore, a grid's store is not a "general store", it is meant to hold and dictate data and data format, the values displayed of the grid cells. That's why you can't nest general components within a grid panel's store.

This is how your code should look like, if you want all panels below the grid panel:

Code:

---

Html.X().TabPanel()
    .TabPosition(TabPosition.Left)
    .TabRotation(0)
    .Width(1500)
    .Height(800)
    .MarginSpec("10 10 -10 10")
    .Items(
        Html.X().Panel()
            .Title("Tab")
            .Items(
                Html.X().GridPanel()
                    .Title("Request Priorities")
                    .ID("reqPrioritiesGrid")
                    .ColumnWidth(1)
                    .MarginSpec("0 0 0 0")
                    .Width(1000)
                    .Height(400)
                    .Border(true)
                    .Store(
                        Html.X().Store()
                            .ID("reqPrioritiesStore")
                            .AutoLoad(true)
                            .DataSource(Model.RequestPriorities)
                            .Model(
                                Html.X().Model()
                                    .Fields(f =>
                                    {
                                        f.Add(Html.X().ModelField().Name("RequestPriorityName").Type(ModelFieldType.String));
                                        f.Add(Html.X().ModelField().Name("RequestPriorityDescription").Type(ModelFieldType.String));
                                        f.Add(Html.X().ModelField().Name("SortOrder").Type(ModelFieldType.Int));
                                        f.Add(Html.X().ModelField().Name("ResponseTarget").Type(ModelFieldType.String));
                                        f.Add(Html.X().ModelField().Name("ResponseFormat").Type(ModelFieldType.String));
                                        f.Add(Html.X().ModelField().Name("ResponseSLA").Type(ModelFieldType.String));
                                    })
                            )
                            .ServerProxy(
                                Html.X().AjaxProxy()
                                    .Url(Url.Action("ManageLists", "Admin", new { area = "Cadence" }))
                            )
                    )
                    .Listeners(l =>
                    {
                        l.Select.Handler = "handleReqPopulate(record.data);" + "toggleEditRequest();";
                    })
                    .ColumnModel(
                        Html.X().Column().Flex(1).Text("Request Priority Name").DataIndex("RequestPriorityName"),
                        Html.X().Column().Flex(3).Text("Request Priority Desciption").DataIndex("RequestPriorityDescription"),
                        Html.X().Column().Flex(1).Text("Sort Order").DataIndex("SortOrder"),
                        Html.X().Column().Flex(1).Text("Response Target").DataIndex("ResponseTarget"),
                        Html.X().Column().Flex(1).Text("Response Format").DataIndex("ResponseFormat"),
                        Html.X().Column().Flex(1).Text("Response SLA").DataIndex("ResponseSLA")
                    ),
                Html.X().Panel()
                    .Title("Task Priorities")
                    .ID("taskPrioritiesGrid"),
                Html.X().Panel()
                    .Title("Task Severities"),
                Html.X().Panel()
                    .Title("Request Groups"),
                Html.X().Panel()
                    .Title("Request Group Types")
            )
    )

---

Hope this helps!

Thank you, Fabricio!