[CLOSED] EXT .NET GridView with ForceFit=true not resizing without scroll bars

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] EXT .NET GridView with ForceFit=true not resizing without scroll bars

    I am trying to get a grid panel to resize when the browser window is resized. I can get this to work perfectly if the grid panel has too many rows to fit in the browser window, and therefore has a vertical scroll bar. However, if the panel does not have enough rows to require a vertical scroll bar, the grid contents do not resize when the window is resized (they do resize on reload). There are multiple panels on the form, each is nested to the same level, and I've verified that all the settings on the containers as well as the grid panels themselves match between the one that resizes on window resize (the one with scroll bar) and the one that does not resize on window resize (the one without the scroll bar).

    Is this a known problem? Is there a workaround?

    Here is the applicable (partial) source code as rendered by EXT.NET from the view source of the page in question:

    (the grids in question are ContentPH_gpMessageTypeSettings and ContentPH_gpClientDefaultSkills)


    new Ext.net.Viewport({
      id: "MasterVP",
      renderTo: "MasterForm1",
      items: [{
            id: "divToolbar",
            style: "z-index: 900; position: relative;",
            xtype: "container",
            contentEl: "divToolbar_Content",
            region: "north",
            margins: "-1 15 -1 15",
            boxMinWidth: 978
           },
           {
            id: "cntCenter",
            xtype: "container",
            region: "center",
            margins: "-1 15 -1 15",
            cls: "CenterArea",
            boxMinWidth: 978,
            items: [{
                    id: "divHeader",
                    contentEl: "divHeader_Content",
                    region: "north",
                    cls: "PageHeader",
                    height: 110,
                    bodyStyle: "background-color:transparent;"
                   },
                   {
                     id: "divContent",
                    xtype: "container",
                    region: "center",
                    cls: "Content",
                    items: {
                          id: "ContentPH_frmMain",
                          xtype: "form",
                          autoScroll: true,
                          items: [{
                                id: "ContentPH_pnlMessageTypeSettings",
                                cls: " PanelFrame",
                                autoWidth: true,
                                items: {
                                      id: "ContentPH_gpMessageTypeSettings",
                                      setViewMode: function(viewMode){if(this.topToolbar) this.topToolbar.setVisible(viewMode); if(this.hasActions) this.colModel.setHidden(0,!viewMode)},
                                      commitChanges: function(){this.store.commitChanges()},
                                      rejectChanges: function(){this.store.data.each(function(r){if(r.phantom) this.store.remove(r)});this.store.rejectChanges();this.store.rejectDeleting();},
                                      xtype: "netgrid",
                                      ctCls: "x-grid-custom",
                                      style: ";font-family:Arial; font-size:12px;",
                                      enableColumnHide: false,
                                      enableColumnMove: false,
                                      enableHdMenu: false,
                                      sm: this.ContentPH_rsmGPMessageTypeSettings=new Ext.grid.RowSelectionModel({
                                                                            proxyId: "ContentPH_rsmGPMessageTypeSettings",
                                                                            singleSelect: true
                                                                              }),
    
                                      store: ContentPH_stoMessageTypeSettings,
                                      stripeRows: true,
                                      view: this.ContentPH_gvGPMessageTypeSettings=new Ext.grid.GridView({
                                                                        proxyId: "ContentPH_gvGPMessageTypeSettings",
                                                                        forceFit: true,
                                                                        scrollOffset: 1
                                                                          }),
                                      clicksToEdit: 1,
                                      selectionMemory: false,
                                      cm: this.ContentPH_ColumnModel1=new Ext.grid.ColumnModel({
                                                                    proxyId: "ContentPH_ColumnModel1",
                                                                    defaults: { "sortable":false },
                                                                    columns: [{
                                                                            dataIndex: "MessageTypeID",
                                                                            header: "Message Type",
                                                                            renderer: messageRenderer,
                                                                            width: 180
                                                                           },
                                                                           {
                                                                            dataIndex: "MessageText",
                                                                            editor: new Ext.grid.GridEditor(Ext.apply({field:{
                                                                                                        id: "ContentPH_TextField1",
                                                                                                       xtype: "textarea",
                                                                                                       height: 45,
                                                                                                       maxLength: 800
                                                                                                          }}, {})),
                                                                             header: "Message",
                                                                            renderer: rdrEditableTextArea,
                                                                            width: 600
                                                                           },
                                                                           {
                                                                            dataIndex: "MessageID",
                                                                            width: 80
                                                                           }]
                                                                   }),
                                    listeners: { beforeedit: { fn: isEditable } } },
                                    layout: "fit",
                                    collapsedCls: " PanelCollapse",
                                    collapsible: true,
                                    frame: true,
                                    padding: 10,
                                    title: "Message Type Settings",
                                    listeners: { afterrender: { fn: function(item){stylePanel(this);} } } 
                                     },
                                     {
                                    id: "ContentPH_pnlGlobalCandidateRequirements",
                                    cls: " PanelFrame",
                                    items: {
                                          id: "ContentPH_gpClientDefaultSkills",
                                          setViewMode: function(viewMode){if(this.topToolbar) this.topToolbar.setVisible(viewMode); if(this.hasActions) this.colModel.setHidden(0,!viewMode)},
                                          commitChanges: function(){this.store.commitChanges()},
                                          rejectChanges: function(){this.store.data.each(function(r){if(r.phantom) this.store.remove(r)});this.store.rejectChanges();this.store.rejectDeleting();},
                                          xtype: "netgrid",
                                          style: ";font-family:Arial; font-size:12px;",
                                          autoHeight: true,
                                          tbar: { 
                                                id: "ContentPH_tbClientDefaultSkills",
                                                xtype: "toolbar",
                                                items: [{
                                                        id: "ContentPH_btnAddSkill",
                                                        style: ";font-family:Arial; font-size:12px;",
                                                        iconCls: "icon-add",
                                                        text: "Add",
                                                        listeners: { click: { fn: function(item,e){gpClientDefaultSkillsAddRecord();} } } },
                                                         {
                                                            id: "ContentPH_btnDeleteSkill",
                                                            style: ";font-family:Arial; font-size:12px;",
                                                            iconCls: "icon-delete",
                                                            text: "Delete",
                                                            listeners: { click: { fn: function(item,e){ContentPH_gpClientDefaultSkills.deleteSelected();} } } 
                                                    }]
                                            },
                                          enableColumnHide: false,
                                          enableColumnMove: false,
                                          enableHdMenu: false,
                                          sm: this.ContentPH_rsmGPClientDefaultSkills=new Ext.grid.RowSelectionModel({
                                                                                proxyId: "ContentPH_rsmGPClientDefaultSkills",
                                                                                singleSelect: true
                                                                                  }),
                                          store: ContentPH_stoDefaultOrgReqSkills,
                                          stripeRows: true,
                                          view: this.ContentPH_gvGPClientDefaultSkills=new Ext.grid.GridView({
                                                                            proxyId: "ContentPH_gvGPClientDefaultSkills",
                                                                            forceFit: true,
                                                                            scrollOffset: 1
                                                                              }),
                                          clicksToEdit: 1,
                                          selectionMemory: false,
                                          cm: this.ContentPH_ColumnModel9=new Ext.grid.ColumnModel({
                                                                        proxyId: "ContentPH_ColumnModel9",
                                                                        defaults: { "sortable":false },
                                                                        columns: [{
                                                                                dataIndex: "Description",
                                                                                editor: new Ext.grid.GridEditor(Ext.apply({field:{
                                                                                                            id: "ContentPH_TextField3",
                                                                                                            xtype: "textfield",
                                                                                                            isFormField: true,
                                                                                                            allowBlank: false,
                                                                                                            selectOnFocus: true
                                                                                                           }}, {})),
                                                                        header: "   Requisition Description",
                                                                        renderer: rdrEditableField,
                                                                        width: 600
                                                                        },
                                                                        {
                                                                        dataIndex: "SkillType",
                                                                        editor: new Ext.grid.GridEditor(Ext.apply({field:{
                                                                                                    id: "ContentPH_lstSkillType",
                                                                                                    viewMode: "Edit",
                                                                                                    xtype: "selectbox",
                                                                                                    allowBlank: false,
                                                                                                    displayField: "Description",
                                                                                                    hiddenName: "ContentPH_lstSkillType_Value",
                                                                                                    triggerAction: "all",
                                                                                                    valueField: "SkillTypeId",
                                                                                                    store: ContentPH_stoSklType,
                                                                                                    submitValue: true,
                                                                                                    listeners: {
                                                                                                            show: { fn: function(item){if (lstSkillTypeDropped) { this.onTriggerClick(); }} },
                                                                                                            focus: { fn: function(item){if (!lstSkillTypeDropped) { this.onTriggerClick(); lstSkillTypeDropped=true; }} }
                                                                                                           } }, {})),
                                                                         header: "   Required/Desired",
                                                                        id: "SkillType",
                                                                        renderer: sklRenderer,
                                                                        width: 150
                                                                       },
                                                                       {
                                                                        dataIndex: "Duration",
                                                                        editor: new Ext.grid.GridEditor(Ext.apply({field:{
                                                                                                    id: "ContentPH_TextField4",
                                                                                                    xtype: "numberfield",
                                                                                                    selectOnFocus: true,
                                                                                                    allowDecimals: false,
                                                                                                    decimalSeparator: ".",
                                                                                                    minValue: 0.0
                                                                                                  }}, {})),
                                                                        header: "Duration",
                                                                        renderer: rdrEditableField
                                                                       },
                                                                       {
                                                                        dataIndex: "DurationType",
                                                                        editor: new Ext.grid.GridEditor(Ext.apply({field:{ 
                                                                                                    id: "ContentPH_lstDurationType",
                                                                                                    viewMode: "Edit",
                                                                                                    xtype: "selectbox",
                                                                                                    displayField: "Description",
                                                                                                    hiddenName: "ContentPH_lstDurationType_Value",
                                                                                                    triggerAction: "all",
                                                                                                    valueField: "DrtnTypeId",
                                                                                                    store: ContentPH_stoDurationType,
                                                                                                    submitValue: true,
                                                                                                    listeners: {
                                                                                                            show: { fn: function(item){if (lstDurationTypeDropped) { this.onTriggerClick(); }} },
                                                                                                            focus: { fn: function(item){if (!lstDurationTypeDropped) { this.onTriggerClick(); lstDurationTypeDropped=true; }}
                                                                                                           } }}}, {})),
                                                                        header: "Months/Years",
                                                                        renderer: durationRenderer
                                                                       },
                                                                       {
                                                                        dataIndex: "CandidateDisplay",
                                                                        editor: new Ext.grid.GridEditor(Ext.apply({field:{
                                                                                                    id: "ContentPH_lstCandidateDisplay",
                                                                                                    viewMode: "Edit",
                                                                                                    xtype: "selectbox",
                                                                                                    displayField: "text",
                                                                                                    hiddenName: "ContentPH_lstCandidateDisplay_Value",
                                                                                                    triggerAction: "all",
                                                                                                    valueField: "value",
                                                                                                    store: ContentPH_stoYesNo,
                                                                                                    submitValue: true,
                                                                                                    listeners: {
                                                                                                            show: { fn: function(item){if (lstCandidateDisplayDropped) { this.onTriggerClick(); }} },
                                                                                                            focus: { fn: function(item){if (!lstCandidateDisplayDropped) { this.onTriggerClick(); lstCandidateDisplayDropped=true; }} 
                                                                                                           } } }}, {})),
                                                                        header: "&nbsp;&nbsp;&nbsp;Display on<br/>&nbsp;&nbsp;&nbsp;Candidate Detail",
                                                                        id: "CandidateDisplay",
                                                                        renderer: function(value,metadata,record,rowIndex,colIndex,store){return rdrYesNo(value, metadata, ContentPH_stoYesNo);},
                                                                        width: 150
                                                                        },
                                                                       {
                                                                        dataIndex: "Sequence",
                                                                        editor: new Ext.grid.GridEditor(Ext.apply({field:{
                                                                                                    id: "ContentPH_TextField5",
                                                                                                    xtype: "numberfield",
                                                                                                    allowBlank: false,
                                                                                                    selectOnFocus: true,
                                                                                                    allowDecimals: false,
                                                                                                    decimalSeparator: ".",
                                                                                                    minValue: 1.0
                                                                                                  }}, {})),
                                                                        header: "&nbsp;&nbsp;&nbsp;Sequence",
                                                                        id: "Sequence",
                                                                        renderer: rdrEditableField
                                                                       }]
                                            }),
                                        listeners: { beforeedit: { fn: isEditable } } },
                                        layout: "fit",
                                        collapsedCls: " PanelCollapse",
                                        collapsible: true,
                                        frame: true,
                                        padding: 10,
                                        title: "Global Candidate Requirements",
                                        listeners: { afterrender: { fn: function(item){stylePanel(this);} } } 
                                    },
    
    (...)
    Last edited by Daniil; Sep 19, 2011 at 7:18 PM. Reason: [CLOSED]
  2. #2
    Please post test sample which can be test localy. Just I am not sure that correctly understood the issue.
    Why do you add the grid to the FormPanel?
    Vladimir Shcheglov
    Sr. Developer
  3. #3

    Grid Automatic Resizing

    Hi!
    I'm trying to do my best to make a simplified sample of this code, but I can't even get any of these grids to auto-size without them having any data in them.
    We are trying to have grids auto-size their width according to the width of the containing panel (there aren't any problems getting the panels to auto-size to the browser window).
    Each grid panel is nested inside a panel, which in turn are nested inside a form panel, this is the standard for our project.
    The grid panels each have a gridview with forcefit=true, and I've tried putting both Layout="FitLayout" as well as AutoWidth="true" on all of the parents, and any combination of them, with no luck.
    I have been looking on the forums as well as on the grid FAQ, and cannot figure out what I'm doing wrong.
    I will continue working on the simplified example and post it asap.
    Thank you,
    Meike
  4. #4
    Can you provide more details about expecting grid auto size?
    Do you want to have auto height for the grid (autoheight based on rows count)?
    And autowidth depends from columns width?
    AutoWidth is not supported but autoheight is supported
    Vladimir Shcheglov
    Sr. Developer
  5. #5

    Grid Automatic Resizing

    The behavior we are looking for is a grid that auto-sizes its width according to the enclosing panel's width (since the enclosing panel already auto-sizes correctly with the browser window). The height should just accomodate all rows without a scrollbar, the whole browser window should have a scroll bar to move down a given grid, or between grids, since the page will have several grids, and each can have 1 to n rows. The grids do not have a menu (columns cannot be hidden or shown by users). I have set the width of each grid column, and put forcefit=true on the gridview. Whenever I resize the browser window, the enclosing panel resizes correctly, but the grid does not - *unless* it is the first grid on the page, and has to many rows to fit in the initial browser window, in this case, the grid gets a vertical scrollbar and resizes upon window resize. Whenever I refresh the page, the grids do resize correctly.
  6. #6
    Set Layout="Anchor" and DefaultAnchor="100%" for enclosing panel
    Vladimir Shcheglov
    Sr. Developer
  7. #7

    Resizing Grid

    That's not working for me. I've got a simple EXT.NET sample app ready to share with you - please let me know how I can post it for you to pick up. In the sample app, the first panel doesn't resize at all, the second panel resizes, but the grid does not, despite both being configured identically, and the panels being configured with AnchorLayout and DefaultAnchor per your instructions above.
  8. #8
    Post the sample in this thread
    Vladimir Shcheglov
    Sr. Developer
  9. #9

    Sample

    I really appreciate your quick replies!!!
    Since this is a .NET solution, it consists of multiple files ... I was hoping there's a FTP site or something I could drop it off on ...
  10. #10
    Are multiple files required for simple sample? Do you able to mount a sample in one aspx file like examples from Examples Explorer?
    Vladimir Shcheglov
    Sr. Developer
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Gridpanel gridview Forcefit and column width
    By ljankowski in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 12, 2010, 5:56 PM
  2. [CLOSED] Show scroll bars on Multiselect control
    By Shanti in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 03, 2010, 7:54 AM
  3. [CLOSED] Vertical Scroll bars for the Accordion Panels
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 20, 2009, 10:06 AM
  4. GridPanel - Tab load - Scroll bars appear on Grid
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Jun 23, 2009, 4:41 PM
  5. Replies: 0
    Last Post: Jun 04, 2009, 8:24 PM

Posting Permissions