[CLOSED] Grid Panel Inside Jquery Tab

  1. #1

    [CLOSED] Grid Panel Inside Jquery Tab

    I have multiple JQuery tabs that contain ext MVC grid panels. Each of these tabs are dynamic in data and number of tabs. These grid panels are also set to Fit Layout. The first active tab is the only tab that has the grid panel layout rendered correctly.

    If i specify a width and height, the grid panels load fine in each tab.

    If i run the function "doLayout()" on the grid panel, this will also fix the layout. However on larger tables (data and complexity), it seems they have not finished rendering and the doLayout does not function.

    Is there a way i can use the fit layout with large datasets and more complex grid panels inside the JQuery Tabs?

    @{
        var testData1 = new object[]
                            {
                                new object[] {"A", 1},
                                new object[] {"B", 2},
                                new object[] {"C", 3},
                                new object[] {"D", 4},
                                new object[] {"E", 5}
                            };
        var testData2 = new object[]
                            {
                                new object[] {"F", 6},
                                new object[] {"G", 7},
                                new object[] {"H", 8},
                                new object[] {"I", 9},
                                new object[] {"J", 10}
                            };
    
        var testDataCollection = new object[]
                                     {
                                         testData1,
                                         testData2
                                     };
                                     
    }
    
    <div>
        <div id="test-tabs" >
            <ul>
                @for (int i = 0; i < testDataCollection.Count(); i++)
                {
                    <li>
                        <a href="#test-tabs-@i-table" style="color:inherit" class="basic_tab_button">Tab @i</a>
                    </li>
                }
            </ul>
    
    
            @for (int i = 0; i < testDataCollection.Count(); i++)
            {
                <div id="test-tabs-@i-table" style="padding: 0px;">
                    @(Html.X().GridPanel()
                          .ID(i +"-table")
                          .Layout(LayoutType.Fit)
            
                          .Store(Html.X().Store()
                                     .SortOnFilter(false)
                                     .Model(Html.X().Model().Fields(
                                         new ModelField("name", ModelFieldType.String),
                                         new ModelField("number", ModelFieldType.Int))
                                     ).DataSource(testDataCollection[i])
                          )
                          .ColumnModel(
                              Html.X().Column().DataIndex("name").Text("Name"),
                              Html.X().Column().DataIndex("number").Text("Number").Flex(1)
                          ))
                </div>
            }
        </div>
    </div>
    This is the javascript to get these tabs to work with small data sets

     <script>
        $("#test-tabs").tabs({
            activate: function (event, ui) {
                var index = ui.newTab.index();
                var elm = Ext.getCmp(index + "-table");
                elm.doLayout();
            }
        });
    </script>
    Last edited by Daniil; Sep 12, 2014 at 10:16 AM. Reason: [CLOSED]
  2. #2
    Hi @maxfareday,

    Welcome to the Ext.NET forums!

    I think a GridPanel's Layout setting does nothing in your scenario. Actually, a GridPanel's Layout is not supposed to be used at all, because a GridPanel doesn't support Items. Though, a container's Items is a subject for a Layout to deal with.

    So, you put a GridPanel into a <div> and it's out of Ext.NET context to calculate a GridPanel's size to fit something. I think that you and/or jQuery are supposed to do that in your scenario.

Similar Threads

  1. [CLOSED] grid panel inside row expander
    By pawangyanwali in forum 2.x Legacy Premium Help
    Replies: 10
    Last Post: May 08, 2013, 11:47 AM
  2. Replies: 3
    Last Post: Mar 13, 2013, 8:39 AM
  3. Replies: 13
    Last Post: Feb 28, 2013, 2:06 PM
  4. Replies: 0
    Last Post: Nov 08, 2010, 9:20 AM
  5. grid panel inside a window
    By [WP]joju in forum 1.x Help
    Replies: 4
    Last Post: Feb 09, 2009, 6:11 AM

Tags for this Thread

Posting Permissions