[CLOSED] Grid's scroll issues

  1. #1

    [CLOSED] Grid's scroll issues

    Grid's Width = 200px
    Columns' width = 200px

    Problem: Horizontal scroll is shown


    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel Margin="10" runat="server" Title="Ext.Net" Frame="false" Width="200">
            <Store>
                <ext:Store AutoLoad="true" runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="~/Example/LoadFakeRecords/">
                            <ActionMethods Read="POST" />
                            <Reader>
                                <ext:JsonReader RootProperty="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model IDProperty="ID" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="String" />
                                <ext:ModelField Name="Name" Type="String" />
                                <ext:ModelField Name="LastName" Type="String" />
                                <ext:ModelField Name="Address" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Text="ID" DataIndex="ID" Width="100" runat="server" />
                    <ext:Column Text="Name" DataIndex="Name" Width="100" runat="server" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>


    Grid's Width = 210px
    Columns' width = 100px + Flex Column
    Problem: Vertical scroll is "reserved"


    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel runat="server" Title="Ext.Net" Frame="false" Width="210">
            <Store>
                <ext:Store AutoLoad="true" runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="~/Example/LoadFakeRecords/">
                            <ActionMethods Read="POST" />
                            <Reader>
                                <ext:JsonReader RootProperty="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model IDProperty="ID" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="String" />
                                <ext:ModelField Name="Name" Type="String" />
                                <ext:ModelField Name="LastName" Type="String" />
                                <ext:ModelField Name="Address" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Text="ID" DataIndex="ID" Width="100" runat="server" />
                    <ext:Column Text="Name" DataIndex="Name" Flex="1" runat="server" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>


    Grid's Width = 210px
    Columns' width = 200px

    Problem: Horizontal scroll is "reserved"


    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel runat="server" Title="Ext.Net" Frame="false" Width="210">
            <Store>
                <ext:Store AutoLoad="true" runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="~/Example/LoadFakeRecords/">
                            <ActionMethods Read="POST" />
                            <Reader>
                                <ext:JsonReader RootProperty="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model IDProperty="ID" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="String" />
                                <ext:ModelField Name="Name" Type="String" />
                                <ext:ModelField Name="LastName" Type="String" />
                                <ext:ModelField Name="Address" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Text="ID" DataIndex="ID" Width="100" runat="server" />
                    <ext:Column Text="Name" DataIndex="Name" Width="100" runat="server" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>
    It's necessary to set grid's width 20px wider to ""overcome"" issue #3


    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel Margin="10" runat="server" Title="Ext.Net" Frame="false" Width="220">
            <Store>
                <ext:Store AutoLoad="true" runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="~/Example/LoadFakeRecords/">
                            <ActionMethods Read="POST" />
                            <Reader>
                                <ext:JsonReader RootProperty="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model IDProperty="ID" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="String" />
                                <ext:ModelField Name="Name" Type="String" />
                                <ext:ModelField Name="LastName" Type="String" />
                                <ext:ModelField Name="Address" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Text="ID" DataIndex="ID" Width="100" runat="server" />
                    <ext:Column Text="Name" DataIndex="Name" Width="100" runat="server" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>
    namespace SandBox.Controllers
    {
        public class ExampleController : System.Web.Mvc.Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public StoreResult LoadFakeRecords()
            {
                List<Entity> lst = new List<Entity>();
    
                for (int index = 0; index < 15; index++)
                {
                    lst.Add(new Entity
                    {
                        ID = index,
                        Name = string.Format("Name - {0}", index)
                    });
                }
    
                return new StoreResult(lst, lst.Count());
            }
        }
    
        [Serializable]
        public class Entity
        {
            public int ID { get; set; }
    
            public string Name { get; set; }
        }
    }
    Attached Thumbnails Click image for larger version. 

Name:	gd001.png 
Views:	6 
Size:	3.4 KB 
ID:	19531   Click image for larger version. 

Name:	gd002.png 
Views:	5 
Size:	3.5 KB 
ID:	19541   Click image for larger version. 

Name:	gd003.png 
Views:	4 
Size:	3.4 KB 
ID:	19542   Click image for larger version. 

Name:	gd004.png 
Views:	6 
Size:	3.5 KB 
ID:	19551  
    Last edited by Daniil; Feb 04, 2015 at 3:17 PM. Reason: [CLOSED]
  2. #2
  3. #3
    FWIW, @RCN I can reproduce some of the above screenshots only if I specify a Theme (e.g. Default or Gray). Even then, the results are different, for example I get the vertical scroll reserved if I set the grid's width to 210 and the columns' width to 200 (which is ... normal?).

    I am testing with both FF 35 and IE 11 using Ext.Net 3.0.0.37796.
    Last edited by Dimitris; Jan 27, 2015 at 1:04 PM.
  4. #4
    Hi Mimisss, thanks for expanding.

    There may be other issues regarding grid's horizontal / vertical scroller. i will update this thread if a find new issues and i ask you to do the same.
  5. #5
    Hello Raphael,

    I understand all the issues are related (somehow), but each of them is probably worth an individual thread. Here I will start from the first one in the original post. If you want others to be discussed in details, please start a new thread (-s).

    Grid's Width = 200px
    Columns' width = 200px
    I guess:
    GridPanel's width = Columns' width + something.

    I am not sure, but that "something" could be borders.

    If set Width="202" for the GridPanel, then no scrollbar appears.

    Yes, it might be a little bit annoying or unexpected, but, personally, I don't consider it a bug.
  6. #6
    I understand all the issues are related (somehow), but each of them is probably worth an individual thread. Here I will start from the first one in the original post. If you want others to be discussed in details, please start a new thread (-s).
    When i refer a thread i aim to make a cross-reference. I always start a new thread even if the issue is very similar to another.
    There may be other issues regarding grid's horizontal / vertical scroller. i will update this thread if a find new issues and i ask you to do the same.
    I think i was misunderstood. I meant that i was gonna add, if necessary, links to the related threads.
    Yes, it might be a little bit annoying or unexpected, but, personally, I don't consider it a bug.
    I agree.

    Thank all of you. Please mark this thread as closed.
    Last edited by RCN; Feb 04, 2015 at 2:47 PM.

Similar Threads

  1. Grid Issues
    By jcontreras in forum 2.x Help
    Replies: 12
    Last Post: Jul 02, 2013, 11:42 AM
  2. Custom paging in grid has issues
    By getgopi1 in forum 1.x Help
    Replies: 8
    Last Post: Sep 22, 2010, 1:55 PM
  3. [CLOSED] Grid Scroll
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 18, 2009, 2:04 AM
  4. grid scroll
    By [WP]joju in forum 1.x Help
    Replies: 1
    Last Post: Nov 17, 2009, 1:47 AM
  5. [CLOSED] Grid Scroll
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 19, 2009, 10:32 AM

Posting Permissions