Updating the ColumnModel for a GridPanel on a tab that is not shown?

[Travis]

Hi,

I?m putting together an app where a ViewPort has a TabPanel in the south region. 2 of the tabs contain GridPanels that have the ColumnModels changed when the user changes some settings in the main region. I?ve followed the example here (http://forums.ext.net/showthread.php...n-BorderLayout) on how to refresh a GridPanel?s ColumnModel from the code behind.

When the user changes data on the page, I make a DirectMethod call to update both GridPanels. My issue is that whenever I call gridPanel.render() at the end of the refresh, the GridPanel that is currently in view will redraw itself with the new data/columns as expected, however the GridPanel that was in a TabPanel that is not visible will disappear when I navigate to it afterwards. If I take the .render() call out for the refresh for the hidden grid, then the grid is still there, however the data/columns have not been updated.

How can I go about updating the ColumnModel/Data for a GridPanel that is on an unselected tab?

Any help would be greatly appreciated. Thanks!

Please see below for code samples:

South region definition:

<ext:Panel ID="PanelFooter" runat="server" Collapsible="true" Height="350" Region="South"
                            Split="true" Title="Information" Layout="FitLayout" >
                            <Items>
                                <ext:TabPanel ID="TabPanelFooter" runat="server" TabPosition="Bottom" Title="InformationTabs" >
                                    <Listeners>
                                        <TabChange Fn="InfoTabChange" />
                                    </Listeners>
                                    <Items>
                                        <ext:Panel ID="PanelDemand" runat="server" Title="Demand" Layout="FitLayout" >
                                            <Items>
                                            <ext:GridPanel ID="GridPanelDemand" runat="server" Cls="demand-grid" TrackMouseOver="true" >
                                                <Store>
                                                    <ext:Store ID="StoreDemand" runat="server">
                                                    </ext:Store>
                                                </Store>
                                            </ext:GridPanel>
                                            </Items>
                                        </ext:Panel>
                                        <ext:Panel ID="PanelRealizedDemand" runat="server" Title="Realized Demand" Layout="FitLayout" >
                                            <TopBar>
                                                <ext:Toolbar ID="Toolbar1" runat="server" >
                                                    <Items>
                                                        <ext:Button ID="ButtonRefreshRealizedDemand" runat="server" Text="Refresh" Icon="Reload" Visible="true" Disabled="true" >
                                                            <Listeners>
                                                                <Click Handler="refreshRealizedDemand()" />
                                                            </Listeners>
                                                        </ext:Button>
                                                    </Items>
                                                </ext:Toolbar>
                                            </TopBar>

                                            <Items>
                                                <ext:GridPanel ID="GridPanelRealizedDemand" runat="server" Cls="demand-grid" TrackMouseOver="true" >
                                                    <Store>
                                                        <ext:Store ID="StoreRealizedDemand" runat="server">
                                                        </ext:Store>
                                                    </Store>
                                                </ext:GridPanel>
                                            </Items>
                                        </ext:Panel>
</Items>
                                </ext:TabPanel>
                            </Items>
                        </ext:Panel>

Code behind direct methods to recreate the GridPanels. There are different methods for each grid, I?ll only post 1 though as they are next to identical:

/// <summary>
        /// Function to populate the Realized Demand gridPanel.
        /// </summary>
        /// <param name="initialLoad"></param>
        /// <param name="start">Starting Date</param>
        /// <param name="end">Ending Date</param>
        [DirectMethod]
        public void populateRealizedDemandGrid(DateTime newStart, DateTime newEnd)
        {
                DataTable RealizedDemandTable = (DataTable)Session["RealizedDemandTable"];

                //get the gridPanel
                GridPanel gridRealizedDemand = this.GridPanelRealizedDemand;
                //get the store
                Store storeRealizedDemand = this.StoreRealizedDemand;

                //clear any previous data
                storeRealizedDemand.Reader.Clear();
                gridRealizedDemand.ColumnModel.Columns.Clear();
                gridRealizedDemand.View.Clear();

                //store parameters
                Hashtable parameters = new Hashtable();

                //add parameters
                parameters.Add("start", newStart);
                parameters.Add("end", newEnd);
                parameters.Add("cid", centreID);
                RealizedDemandTable = PivotTable(GetDataTableFromDB("SELECT TID, ShiftName, Difference FROM [vUI_ScheduledDemandDifference] WHERE Date >= @start AND Date < @end AND CID = @cid ORDER BY Date, ShiftName", parameters), "ShiftName", "TID", "Difference");

                //store updated data back into session
                Session["RealizedDemandTable"] = RealizedDemandTable;

                //create a reader for the data
                JsonReader jsonDataReader = new JsonReader();


                //add a locking view to keep the first column locked
                gridRealizedDemand.View.Add(new LockingGridView());

                //gridDemand.Listeners.BodyScroll.Handler = "tryingToScroll()";

                gridRealizedDemand.DisableSelection = true;

                //loop through the demand columns
                foreach (DataColumn column in RealizedDemandTable.Columns)
                {
                    //add the column to the Json data reader
                    jsonDataReader.Fields.Add(column.ColumnName, RecordFieldType.Auto);

                    //if this is not the shiftName column
                    if (column.ColumnName != "ShiftName")
                    {
                        //get the date associated with the column
                        DateTime columnDate = lookupDateFromID(Convert.ToInt32(column.ColumnName));

                        //create a new column for this date
                        Ext.Net.Column newCol = new Ext.Net.Column
                        {
                            Header = columnDate.Day.ToString(),//set the header
                            DataIndex = column.ColumnName,
                            Width = columnWidth,//width matches DayPilot column width
                            Align = Alignment.Center,
                            Sortable = false,
                            Resizable = false,
                            Editable = false
                        };

                        //add the editor control to the column (numberfield as the demand is always number values)
                        newCol.Editor.Add(new NumberField() { AllowBlank = false });


                        //add the column to the grid
                        gridRealizedDemand.ColumnModel.Columns.Add(newCol);
                    }

                    //this is the ShiftName header column
                    else
                    {
                        //create a new column for the grid
                        gridRealizedDemand.ColumnModel.Columns.Add(new Ext.Net.Column
                        {
                            Header = "Shift Name",
                            DataIndex = column.ColumnName,
                            Width = rowHeaderWidth,
                            Locked = true,//rowheader
                            Resizable = false,
                            Editable = false
                        });
                    }
                }

                //add the reader back to the store
                storeRealizedDemand.Reader.Add(jsonDataReader);

                //update the stores data and databind it
                storeRealizedDemand.DataSource = RealizedDemandTable;
                storeRealizedDemand.DataBind();

                //disable column hiding
                gridRealizedDemand.EnableColumnHide = false;
                gridRealizedDemand.EnableColumnMove = false;
                gridRealizedDemand.EnableColumnResize = false;
               

                gridRealizedDemand.Render();
        }

[geoffrey.mcgill]

Hi Travis,

Welcome.

I think the issue here is that by default, the TabPanel will defer rendering of non-visible tabs, until that tab become the active tab.

The default behaviour is a performance optimisation which speeds the initial rendering of the Page. You might have multiple tabs, each with sometimes dozens of inner Components. By delaying the rendering of those other tabs, you push that performance cost (as small as it might be) off until the tab is viewed by the user.

You can override this behaviour by setting DeferredRender="false" on the <ext:TabPanel>

Hope this helps.

[Travis]

Hi Geoffrey.

Thanks for the feedback, I put DeferredRender="false" in the TabPanel definition as recommended, however I'm still seeing the same behaviour where the GridPanel that is on a hidden tab seems to disapear when being refreshed. Any other ideas?

Cheers,

-Travis

[geoffrey.mcgill]

Hi Geoffrey.

Thanks for the feedback, I put DeferredRender="false" in the TabPanel definition as recommended, however I'm still seeing the same behaviour where the GridPanel that is on a hidden tab seems to disapear when being refreshed. Any other ideas?

Cheers,

-Travis

Maybe remove call to gridRealizedDemand.Render();

[Travis]

Maybe remove call to gridRealizedDemand.Render();

Tried that, and while the grid now no longer will disapear, the new data isn't being loaded on the grid that isn't being shown (however the grid that is being shown updates fine).

For now I've added another parameter to the populateRealizedDemandGrid() function to indicate if the panel is visible or not. When I make a call from the client I pass in PanelRealizedDemand.isVisible() and then in the function itself I have an if statement that will only call gridRealizedDemand.Render() if the panel is visible. Finally I've added an update call to the TabChange event for the Tab Panel that calls the update when that tab has been selected. I suppose if this stops the issue than that's fine for now, but it does feel like a bit of a kludge :)

If you have any other (cleaner) ideas for how to fix this that'd be great.