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

  1. #1

    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:

                                    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?
  2. #2
    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:

    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!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you, Fabricio!

Similar Threads

  1. Grid -in Panel which has layout- couldnt show records
    By unicorn64 in forum Mobile Help
    Replies: 3
    Last Post: Mar 24, 2017, 2:32 PM
  2. Replies: 1
    Last Post: Jan 17, 2014, 3:43 PM
  3. [CLOSED] Show Hide Grid Panel from runtime
    By rnachman in forum 1.x Premium Help
    Replies: 4
    Last Post: Feb 23, 2011, 6:32 PM
  4. Replies: 2
    Last Post: Nov 11, 2010, 4:43 PM
  5. Replies: 1
    Last Post: Nov 25, 2009, 9:09 AM

Tags for this Thread

Posting Permissions