Vertical scrollbar for gridpanel in panel MVC

  1. #1

    Vertical scrollbar for gridpanel in panel MVC

    Hello
    Please take a look at this sample:
    Model:
    public class MyModel
        {
            public int ID { get; set; }
            public string StringValue { get; set; }
    
    
            public static List<MyModel>GetAll()
            {
                List<MyModel> myModels = new List<MyModel>();
                for (int i = 0; i < 100; i++)
                    myModels.Add(new MyModel() { ID = i, StringValue = String.Format("String{0}", i) });
                return myModels;
            }
        }
    View:
    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_BaseLayout.cshtml";
        var X = Html.X();
    }
    @section example
    {
    <script>
        var onSuccess = function (grid, data) {
                grid.getStore().loadData(data);
            };
    </script>
        @(
            X.Panel().Items
            (
                X.FormPanel().Title("Search Form").Height(300).Layout(LayoutType.Form).AutoScroll(true).Items
                (
                    fields =>
                    {
                        for(int i=0;i<20;i++)
                        {
                            fields.Add(X.TextField().FieldLabel(String.Format("Search field {0}", i)).Width(300));
                        }
                    }
                )
                .Buttons
                (
                    X.Button().Text("Search").Icon(Icon.Find).DirectEvents(de => {
                        de.Click.Url = Url.Action("DoSearch");
                        de.Click.Success = "onSuccess(App.Grid, result.data);";
                        de.Click.EventMask.ShowMask = true;                
                    })
                )
                ,
                X.GridPanel().ID("Grid").Title("Grid").AutoScroll(true).Store(X.Store().Fields
                (
                    new ModelField("ID"),
                    new ModelField("StringValue")
                ))
                .ColumnModel
                (
                    X.Column().Text("ID").DataIndex("ID"),
                    X.Column().Text("String Value").DataIndex("StringValue")
                )
            )
         )
    }
    Controler:
    public class HomeController : Controller
        {
            // GET: Home
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult DoSearch()
            {
                return this.Store(MyModel.GetAll());
            }
        }
    Problem is that when GridPanel is filled with data (after I click search button) it does not show vertical scrollbar. FormPanel shows it correctly. I guess the problem is moment of rendering. I tried with different layout types of panel but nothing seem to help. Any suggestions?
  2. #2
    I have found out that if I have fixed height of gridpanel scrollbar will appear. Could I have not fixed height, but variable height of gridpanel (to fill entire space of parent container)?
    I can't use viewport because I already have it on the level of application and I need this to work somehow because this search form and grid panel have to be inside tabpanel. I hope you understand me.
    Last edited by ingbabic; Aug 15, 2014 at 11:14 AM.
  3. #3
    Ok, I have somehow sorted it out :)
    I used Resize event of Panel and in javascript function I have resized grid to needed height.
    Thanks anyway, it is somehow inspiring when you post a question to this forum, to give the best of you to explain what you really need, and sometimes it turns out that it is enough to solve problem on your own :).
    Cheers
  4. #4
    Hi @ingbabic,

    Nice that you were able to resolve the problem.

    Thanks anyway, it is somehow inspiring when you post a question to this forum, to give the best of you to explain what you really need, and sometimes it turns out that it is enough to solve problem on your own :)
    Yes, it happens. Formulating/posing a problem with words is half a victory.

Similar Threads

  1. [CLOSED] Grid inside a panel does not show vertical scrollbar
    By blueworld in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 27, 2012, 2:16 PM
  2. [CLOSED] How to remove GridPanel vertical scrollbar?
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 01, 2012, 10:09 AM
  3. Replies: 2
    Last Post: Mar 29, 2012, 9:00 PM
  4. Replies: 4
    Last Post: Nov 30, 2010, 9:12 PM
  5. Replies: 2
    Last Post: Nov 30, 2010, 8:30 PM

Tags for this Thread

Posting Permissions