[CLOSED] Other issue with GridPanel's Menu Scroll handles

  1. #1

    [CLOSED] Other issue with GridPanel's Menu Scroll handles

    Hello,
    As per your suggestion we have migrated our code from Ext. 4.5.1 to 4.7.1 version successfully. We observed that the issue still exists in application.
    For reproduce this issue please go through below code:(.cshtml)
    
    @{
        ViewBag.Title = "JobInformation...";
    }
    @model System.Collections.IEnumerable
    @Html.X().ResourceManager().ScriptMode(Ext.Net.ScriptMode.Debug)
    <h2>JobInformation....</h2>
    
    @(Html.X().GridPanel()
                                        .ID("GridPanel1")
                                        .Title("Array Grid one")
                                        
                                        .Height(350)
                                        .AutoRender(true)
                                        .Stateful(true)
                                        .Store(Html.X().Store()
                                            .ID("Store1")
                                            .Model(Html.X().Model()
                                                .Fields(
                                                    new ModelField("company"),
                                                    new ModelField("price", ModelFieldType.Float),
                                                    new ModelField("change", ModelFieldType.Float),
                                                    new ModelField("pctChange", ModelFieldType.Float),
                                                    new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt"),
                                                     new ModelField("pctChange", ModelFieldType.Float),
                                                      new ModelField("column1"),
                                                       new ModelField("column2"),
                                                        new ModelField("column3"),
                                                         new ModelField("column4"),
                                                           new ModelField("column5"),
                                                        new ModelField("column6"),
                                                         new ModelField("column7"),
                                                             new ModelField("column8"),
                                                         new ModelField("column9"),
    
                                                            new ModelField("column10"),
                                                        new ModelField("column11"),
                                                         new ModelField("column12"),
                                                             new ModelField("column13"),
                                                         new ModelField("column14"),
    
                                                            new ModelField("column15"),
                                                        new ModelField("column16"),
                                                         new ModelField("column17"),
                                                             new ModelField("column18"),
                                                         new ModelField("column19"),
                                                         new ModelField("column20")
                                                )
                                            )
                                            .DataSource(Model)
                                        )
                                        .ColumnModel(
                                            Html.X().Column().ID("CompanyColumn").Text("Company").DataIndex("company"),
                                            Html.X().Column().ID("PriceColumn").Text("Price").DataIndex("price").Renderer(RendererFormat.UsMoney),
                                                Html.X().Column().ID("ChangeColumn").Text("Change").DataIndex("change"),
                                                Html.X().Column().ID("pctChange").Text("pctChange").DataIndex("pctChange"),
                                                Html.X().Column().ID("lastChange").Text("lastChange").DataIndex("lastChange"),
                                                    Html.X().Column().ID("column1").Text("column1").DataIndex("column1"),
                                                Html.X().Column().ID("column2").Text("column2").DataIndex("column2"),
                                                    Html.X().Column().ID("column3").Text("column3").DataIndex("column3"),
                                                Html.X().Column().ID("column4").Text("column4").DataIndex("column4"),
                                                         Html.X().Column().ID("column5").Text("column5").DataIndex("column5"),
                                                Html.X().Column().ID("column6").Text("column6").DataIndex("column6"),
                                                    Html.X().Column().ID("column7").Text("column7").DataIndex("column7"),
                                                Html.X().Column().ID("column8").Text("column8").DataIndex("column8"),
                                                Html.X().Column().ID("column9").Text("column9").DataIndex("column9"),
                                                     Html.X().Column().ID("column10").Text("column10").DataIndex("column10"),
                                                Html.X().Column().ID("column11").Text("column11").DataIndex("column11"),
                                                    Html.X().Column().ID("column12").Text("column12").DataIndex("column12"),
                                                Html.X().Column().ID("column13").Text("column13").DataIndex("column13"),
                                                Html.X().Column().ID("column14").Text("column14").DataIndex("column14"),
    
                                                Html.X().Column().ID("column15").Text("column15").DataIndex("column15"),
                                                     Html.X().Column().ID("column16").Text("column16").DataIndex("column16"),
                                                Html.X().Column().ID("column17").Text("column17").DataIndex("column17"),
                                                    Html.X().Column().ID("column18").Text("column18").DataIndex("column18"),
                                                Html.X().Column().ID("column19").Text("column19").DataIndex("column19"),
                                                Html.X().Column().ID("column20").Text("column20").DataIndex("column20")
    
                                        ))
    
    @(Html.X().GridPanel()
                                        .ID("GridPanel2")
                                        .Title("Array Grid Two")
                                       
                                        .Height(350)
                                        .AutoRender(true)
                                        .Stateful(true)
                                        .Store(Html.X().Store()
                                            .ID("Store2")
                                            .Model(Html.X().Model()
                                                .Fields(
                                                    new ModelField("company"),
                                                    new ModelField("price", ModelFieldType.Float),
                                                    new ModelField("change", ModelFieldType.Float),
                                                    new ModelField("pctChangeA", ModelFieldType.Float),
                                                    new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt"),
                                                     new ModelField("pctChange", ModelFieldType.Float),
                                                      new ModelField("column1"),
                                                       new ModelField("column2"),
                                                        new ModelField("column3"),
                                                         new ModelField("column4"),
                                                           new ModelField("column5"),
                                                        new ModelField("column6"),
                                                         new ModelField("column7"),
                                                             new ModelField("column8"),
                                                         new ModelField("column9"),
    
                                                            new ModelField("column10"),
                                                        new ModelField("column11"),
                                                         new ModelField("column12"),
                                                             new ModelField("column13"),
                                                         new ModelField("column14"),
    
                                                            new ModelField("column15"),
                                                        new ModelField("column16"),
                                                         new ModelField("column17"),
                                                             new ModelField("column18"),
                                                         new ModelField("column19"),
                                                         new ModelField("column20")
                                                )
                                            )
                                            .DataSource(Model)
                                        )
                                        .ColumnModel(
                                            Html.X().Column().ID("CompanyColumn2").Text("Company").DataIndex("company"),
                                            Html.X().Column().ID("PriceColumn2").Text("Price").DataIndex("price").Renderer(RendererFormat.UsMoney),
                                                Html.X().Column().ID("ChangeColumn2").Text("Change").DataIndex("change"),
                                                Html.X().Column().ID("pctChange2").Text("pctChange").DataIndex("pctChangeA"),
                                                Html.X().Column().ID("lastChange2").Text("lastChange").DataIndex("lastChange"),
                                                    Html.X().Column().ID("column1A").Text("column1").DataIndex("column1"),
                                                Html.X().Column().ID("column2A").Text("column2").DataIndex("column2"),
                                                    Html.X().Column().ID("column3A").Text("column3").DataIndex("column3"),
                                                Html.X().Column().ID("column4A").Text("column4").DataIndex("column4"),
                                                         Html.X().Column().ID("column5A").Text("column5").DataIndex("column5"),
                                                Html.X().Column().ID("column6A").Text("column6").DataIndex("column6"),
                                                    Html.X().Column().ID("column7A").Text("column7").DataIndex("column7"),
                                                Html.X().Column().ID("column8A").Text("column8").DataIndex("column8"),
                                                Html.X().Column().ID("column9A").Text("column9").DataIndex("column9"),
                                                     Html.X().Column().ID("column10A").Text("column10").DataIndex("column10"),
                                                Html.X().Column().ID("column11A").Text("column11").DataIndex("column11"),
                                                    Html.X().Column().ID("column12A").Text("column12").DataIndex("column12"),
                                                Html.X().Column().ID("column13A").Text("column13").DataIndex("column13"),
                                                Html.X().Column().ID("column14A").Text("column14").DataIndex("column14"),
    
                                                Html.X().Column().ID("column15A").Text("column15").DataIndex("column15"),
                                                     Html.X().Column().ID("column16A").Text("column16").DataIndex("column16"),
                                                Html.X().Column().ID("column17A").Text("column17").DataIndex("column17"),
                                                    Html.X().Column().ID("column18A").Text("column18").DataIndex("column18"),
                                                Html.X().Column().ID("column19A").Text("column19").DataIndex("column19"),
                                                Html.X().Column().ID("column20A").Text("column20").DataIndex("column20")
    
                                        ))
    controller code:
    using System.Web.Mvc;
    using Ext.Net;
    using Ext.Net.MVC;
    
    using TestApplication.Models;
    
    namespace TestApplication.Controllers
    {
        public class ExtNetController : Controller
        {
            public ActionResult Index()
            {
    
                return this.View("JobInformation", SampleData.GetAllJobs());
            }
    
            
        }
    }
    Model code:
    using System.Collections;
    
    using System;
    
    namespace TestApplication.Models
    
    {
    
        public class SampleData
    
        {
    
            public static IEnumerable GetAllJobs()
    
            {
    
                return new object[]
    
                    {
    
                        new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" ,"column1","column2","column3","column4", "column5","column6","column7","column8","column9","column15","column16","column17","column18","column19","column20"},
    
                        new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am","column1","column2","column3","column4", "column5","column6","column7","column8","column9","column15","column16","column17","column18","column19","column20" },
    
                        new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am","column1","column2","column3","column4", "column5","column6","column7","column8","column9","column15","column16","column17","column18","column19","column20" },
    
                        new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am","column1","column2","column3","column4", "column5","column6","column7","column8","column9" ,"column15","column16","column17","column18","column19","column20"},
    
                        new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am","column1","column2","column3","column4", "column5","column6","column7","column8","column9","column10","column11","column12","column13","column14","column15","column16","column17","column18","column19","column20" },
    
                        new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am","column1","column2","column3","column4", "column5","column6","column7","column8","column9" ,"column10","column11","column12","column13","column14","column15","column16","column17","column18","column19","column20"},
    
                        new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" ,"column1","column2","column3","column4", "column5","column6","column7","column8","column9","column10","column11","column12","column13","column14","column15","column16","column17","column18","column19","column20"},
    
                        new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am","column1","column2","column3","column4", "column5","column6","column7","column8","column9" ,"column10","column11","column12","column13","column14","column15","column16","column17","column18","column19","column20"},
    
                        new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am","column1","column2","column3","column4", "column5","column6","column7","column8","column9" ,"column10","column11","column12","column13","column14","column15","column16","column17","column18","column19","column20"},
    
                        new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" ,"column1","column2","column3","column4", "column5","column6","column7","column8","column9","column10","column11","column12","column13","column14","column15","column16","column17","column18","column19","column20"},
    
                        new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am","column1","column2","column3","column4", "column5","column6","column7","column8","column9","column10","column11","column12","column13","column14" ,"column15","column16","column17","column18","column19","column20"},
    
                        new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am","column1","column2","column3","column4", "column5","column6","column7","column8","column9","column10","column11","column12","column13","column14" ,"column15","column16","column17","column18","column19","column20"},
    
                        new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" ,"column1","column2","column3","column4", "column5","column6","column7","column8","column9","column10","column11","column12","column13","column14","column15","column16","column17","column18","column19","column20"},
    
                        new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am", "column1", "column2", "column3", "column4", "column5", "column6", "column7", "column8", "column9", "column10", "column11", "column12", "column13", "column14", "column15", "column16", "column17", "column18", "column19", "column20" }
    
                         
                    };
    
            }
    }   }
    Adding reproduced image as attachmentClick image for larger version. 

Name:	Reporduced image.jpg 
Views:	43 
Size:	99.3 KB 
ID:	25180.
    Please let's know if anything required.
    Last edited by fabricio.murta; Sep 17, 2018 at 2:42 PM.
  2. #2
    Hello @MOHAMMEDRAFI!

    We've split your message in a new thread, as the other was already resolving another issue (that we could find from trying to reproduce your scenario).

    We'll take a look on the provided test case and get back to you soon!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello @MOHAMMEDRAFI!

    We've just tried your code here and it works great! But, after actually reviewing it, I've noticed that you just did 20 columns; your screenshot fits exactly the 20 columns, so there's no need for scroller buttons at all...

    What would be the problem then? Well, I can see just the menu items are "off screen" to the scrollable area. You can actually see the top items if you move the mouse pointer way to the edge of the visible are, still within the menu. But I'd agree that's far from alright.

    The problem here is because you didn't define a ViewPort. Then the whole page (window.document) height is the viewport, no matter it fits or not to the window's viewport.

    To have a properly handled viewport you should wrap the whole page contents within a viewport. That is, in short, wrap your whole example (veiw) in a block like this:

    @(Html.X().Viewport()
        .Layout(LayoutType.Fit)
        .Items(
            Html.X().Container()
                .Scrollable(ScrollableOption.Both)
                .Items(
                    // Your grid definitions go here. Actually anything on the page should.
                )
        )
    )
    For you to understand more on the concept, the Viewport is a non-scrollable component that fits the whole page's visible area -- tied to the browser window's height and width. So in order to get scrollbars in the first place, you should add the viewport's single component as some kind of container. A panel, a window, or a simple "container" as shown above.

    Notice the Viewport component should always be the outmost component on the page. That is, no text, no other component outside it. The only things you can define outside it are hidden/floating components. Examples would be menus, tooltips, hotkeys, stores and info panel queue definitions.

    Giving the Viewport a Fit layout will ensure the inner component (which will be only one) will fit its size no matter how big or small the window is.

    In turn, giving the inner component the Scrollable property (to both directions) will allow scrolling its contents at will. And at this point, it will behave almost exactly as the default browser window. Now, with the difference that Ext.NET knows what exactly is the area that the user can actually see in the browser window!

    This way, even if you have "free" scroll area above or below, the menus (and other Ext.NET floating components) will be constrained to the visible area delimited by the viewport, and you'll get the proper scroll handles in the menus.

    Oh, and by the way, thanks for sharing about the smooth migration of Ext.NET from 4.5.1 to 4.7.1! We're happy to know our efforts to keep it backwards compatible with the same major version is working well! Unfortunately Sencha keeps adding some breaking changes between minor version releases and that's pretty difficult to handle at some times.

    Well, I hope the viewport concept works for you. This really is the best way to handle screen visible area with Ext.NET.

    Here's the reviewed view for your reference:

    @{
        Layout = null;
        ViewBag.Title = "JobInformation...";
    }
    @model System.Collections.IEnumerable
    @Html.X().ResourceManager().ScriptMode(Ext.Net.ScriptMode.Debug)
    
    @(Html.X().Viewport()
        .Layout(LayoutType.Fit)
        .Items(
            Html.X().Container()
                .Scrollable(ScrollableOption.Both)
                .Items(
                    Html.X().Component().Html("<h2>Job Information...</h2>"),
                    Html.X().GridPanel()
                        .ID("GridPanel1")
                        .Title("Array Grid one")
                        .Height(350)
                        .AutoRender(true)
                        .Stateful(true)
                        .Store(Html.X().Store()
                            .ID("Store1")
                            .Model(Html.X().Model()
                                .Fields(
                                    new ModelField("company"),
                                    new ModelField("price", ModelFieldType.Float),
                                    new ModelField("change", ModelFieldType.Float),
                                    new ModelField("pctChange", ModelFieldType.Float),
                                    new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt"),
                                    new ModelField("pctChange", ModelFieldType.Float),
                                    new ModelField("column1"),
                                    new ModelField("column2"),
                                    new ModelField("column3"),
                                    new ModelField("column4"),
                                    new ModelField("column5"),
                                    new ModelField("column6"),
                                    new ModelField("column7"),
                                    new ModelField("column8"),
                                    new ModelField("column9"),
                                    new ModelField("column10"),
                                    new ModelField("column11"),
                                    new ModelField("column12"),
                                    new ModelField("column13"),
                                    new ModelField("column14"),
                                    new ModelField("column15"),
                                    new ModelField("column16"),
                                    new ModelField("column17"),
                                    new ModelField("column18"),
                                    new ModelField("column19"),
                                    new ModelField("column20")
                                )
                            )
                            .DataSource(Model)
                        )
                        .ColumnModel(
                            Html.X().Column().ID("CompanyColumn").Text("Company").DataIndex("company"),
                            Html.X().Column().ID("PriceColumn").Text("Price").DataIndex("price").Renderer(RendererFormat.UsMoney),
                            Html.X().Column().ID("ChangeColumn").Text("Change").DataIndex("change"),
                            Html.X().Column().ID("pctChange").Text("pctChange").DataIndex("pctChange"),
                            Html.X().Column().ID("lastChange").Text("lastChange").DataIndex("lastChange"),
                            Html.X().Column().ID("column1").Text("column1").DataIndex("column1"),
                            Html.X().Column().ID("column2").Text("column2").DataIndex("column2"),
                            Html.X().Column().ID("column3").Text("column3").DataIndex("column3"),
                            Html.X().Column().ID("column4").Text("column4").DataIndex("column4"),
                            Html.X().Column().ID("column5").Text("column5").DataIndex("column5"),
                            Html.X().Column().ID("column6").Text("column6").DataIndex("column6"),
                            Html.X().Column().ID("column7").Text("column7").DataIndex("column7"),
                            Html.X().Column().ID("column8").Text("column8").DataIndex("column8"),
                            Html.X().Column().ID("column9").Text("column9").DataIndex("column9"),
                            Html.X().Column().ID("column10").Text("column10").DataIndex("column10"),
                            Html.X().Column().ID("column11").Text("column11").DataIndex("column11"),
                            Html.X().Column().ID("column12").Text("column12").DataIndex("column12"),
                            Html.X().Column().ID("column13").Text("column13").DataIndex("column13"),
                            Html.X().Column().ID("column14").Text("column14").DataIndex("column14"),
                            Html.X().Column().ID("column15").Text("column15").DataIndex("column15"),
                            Html.X().Column().ID("column16").Text("column16").DataIndex("column16"),
                            Html.X().Column().ID("column17").Text("column17").DataIndex("column17"),
                            Html.X().Column().ID("column18").Text("column18").DataIndex("column18"),
                            Html.X().Column().ID("column19").Text("column19").DataIndex("column19"),
                            Html.X().Column().ID("column20").Text("column20").DataIndex("column20")
                        ),
                    Html.X().GridPanel()
                        .ID("GridPanel2")
                        .Title("Array Grid Two")
                        .Height(350)
                        .AutoRender(true)
                        .Stateful(true)
                        .Store(Html.X().Store()
                            .ID("Store2")
                            .Model(Html.X().Model()
                                .Fields(
                                    new ModelField("company"),
                                    new ModelField("price", ModelFieldType.Float),
                                    new ModelField("change", ModelFieldType.Float),
                                    new ModelField("pctChangeA", ModelFieldType.Float),
                                    new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt"),
                                    new ModelField("pctChange", ModelFieldType.Float),
                                    new ModelField("column1"),
                                    new ModelField("column2"),
                                    new ModelField("column3"),
                                    new ModelField("column4"),
                                    new ModelField("column5"),
                                    new ModelField("column6"),
                                    new ModelField("column7"),
                                    new ModelField("column8"),
                                    new ModelField("column9"),
                                    new ModelField("column10"),
                                    new ModelField("column11"),
                                    new ModelField("column12"),
                                    new ModelField("column13"),
                                    new ModelField("column14"),
                                    new ModelField("column15"),
                                    new ModelField("column16"),
                                    new ModelField("column17"),
                                    new ModelField("column18"),
                                    new ModelField("column19"),
                                    new ModelField("column20")
                                )
                            )
                            .DataSource(Model)
                        )
                        .ColumnModel(
                            Html.X().Column().ID("CompanyColumn2").Text("Company").DataIndex("company"),
                            Html.X().Column().ID("PriceColumn2").Text("Price").DataIndex("price").Renderer(RendererFormat.UsMoney),
                            Html.X().Column().ID("ChangeColumn2").Text("Change").DataIndex("change"),
                            Html.X().Column().ID("pctChange2").Text("pctChange").DataIndex("pctChangeA"),
                            Html.X().Column().ID("lastChange2").Text("lastChange").DataIndex("lastChange"),
                            Html.X().Column().ID("column1A").Text("column1").DataIndex("column1"),
                            Html.X().Column().ID("column2A").Text("column2").DataIndex("column2"),
                            Html.X().Column().ID("column3A").Text("column3").DataIndex("column3"),
                            Html.X().Column().ID("column4A").Text("column4").DataIndex("column4"),
                            Html.X().Column().ID("column5A").Text("column5").DataIndex("column5"),
                            Html.X().Column().ID("column6A").Text("column6").DataIndex("column6"),
                            Html.X().Column().ID("column7A").Text("column7").DataIndex("column7"),
                            Html.X().Column().ID("column8A").Text("column8").DataIndex("column8"),
                            Html.X().Column().ID("column9A").Text("column9").DataIndex("column9"),
                            Html.X().Column().ID("column10A").Text("column10").DataIndex("column10"),
                            Html.X().Column().ID("column11A").Text("column11").DataIndex("column11"),
                            Html.X().Column().ID("column12A").Text("column12").DataIndex("column12"),
                            Html.X().Column().ID("column13A").Text("column13").DataIndex("column13"),
                            Html.X().Column().ID("column14A").Text("column14").DataIndex("column14"),
                            Html.X().Column().ID("column15A").Text("column15").DataIndex("column15"),
                            Html.X().Column().ID("column16A").Text("column16").DataIndex("column16"),
                            Html.X().Column().ID("column17A").Text("column17").DataIndex("column17"),
                            Html.X().Column().ID("column18A").Text("column18").DataIndex("column18"),
                            Html.X().Column().ID("column19A").Text("column19").DataIndex("column19"),
                            Html.X().Column().ID("column20A").Text("column20").DataIndex("column20")
                        )
                )
        )
    )
    Notice the layout is set to null or it will include extraneous contents to the page, that would surround the viewport instead of being contained within it. Layouts are okay with viewports as long as they don't add extra contents to the page that would "wrap around" and distort the viewport.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Thanks fabricio.murta.
    Given solution works for me.
    Please mark this thread as closed.
    Once again thank you very much.
    Last edited by MOHAMMEDRAFI; Sep 04, 2018 at 12:54 PM.
  5. #5
    Glad it helped, we're here to help! Thanks for the feedback, we really appreciate it!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 4
    Last Post: Jun 25, 2015, 3:04 PM
  2. [CLOSED] Resize Handles doesn't seem to be working
    By Kev in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 19, 2013, 8:55 AM
  3. [CLOSED] grid column filters - need to scroll menu!
    By ecko in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jul 16, 2013, 11:33 PM
  4. [CLOSED] Resizable control handles property problem
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 22, 2011, 5:52 PM
  5. GridPanel scroll issue in IE6
    By danielg in forum 1.x Legacy Premium Help
    Replies: 0
    Last Post: May 08, 2009, 11:18 AM

Posting Permissions