[CLOSED] Infinite Scrolling with MVC

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Infinite Scrolling with MVC

    Hi folks, im trying to implement a Grid with infinite scrolling using mvc. I tried to do it using https://examples2.ext.net/#/GridPane.../Forum_topics/ as example but i was not able to accomplish this task

    The function LoadRecords is called but the records are loaded in the grid.

    Could someone give me directions to overcome this problem?

    Thanks in advance

    View
    <ext:Panel ID="Panel1" runat="server" PreventHeader="true" Border="false">
        <Loader ID="Loader1" runat="server" Mode="Component" AutoLoad="true" Url="/Example/Internal/">
            <Params>
                <ext:Parameter Name="containerId" Value="Panel1" Mode="Value" />
            </Params>
            <LoadMask ShowMask="true" />
        </Loader>
    </ext:Panel>
    Interface Generator
    public ContentResult Internal(string containerId)
    {
        //Grid
        GridPanel grd = new GridPanel { ID = "_grd", Title = "example", Height = 200 };
        grd.Listeners.AfterRender.Handler = "alert('Saldanha'); var me = this; me.store.prefetch({start: 0, limit: 99, callback: function() { me.store.guaranteeRange(0, 49); }});";
        grd.Listeners.AfterRender.Delay = 100;
                      
        //Proxy
        JsonPProxy proxy = new JsonPProxy();
        proxy.Reader.Add(new JsonReader { Root = "data", TotalProperty = "total" });
        proxy.Url = "/Example/Test/";
    
        //Store
        Store str = new Store { ID = "_str", AutoLoad = false, Buffered = true };
        str.Proxy.Add(proxy);
        grd.Store.Add(str);
    
        //Model
        Model mdl = new Model { IDProperty = "ID" };
        addColumn("ID", grd, mdl);
        addColumn("Name", grd, mdl);
        str.Model.Add(mdl);
    
        //Result
        ContentResult r = new ContentResult();
    
        r.Content = ComponentLoader.ToJson(grd);
    
        return r;
    }
    
    private void addColumn(string id, GridPanel grd, Model mdl)
    {
        ModelField mdf = new ModelField(id);
    
        Column cln = new Column { ID = id, DataIndex = id, Sortable = true, Text = string.Format("_cln{0}", id) };
    
        if (id == "ID")
        {
            mdl.IDProperty = id;
        }
    
        mdl.Fields.Add(mdf);
    
        grd.ColumnModel.Columns.Add(cln);
    }
    Data Load
    public StoreResult Test(int start, int limit)
    {
        List<Person> lst = new List<Person>();
    
        for (int index = 0; index < limit; index++)
        {
            lst.Add(new Person { ID = index, Name = "Ext" + (start + index) });
        }
        return new StoreResult(lst, limit);
    }
    Entity
    public class Person
    {
        public int ID { get; set; }
    
        public string Name { get; set; }
    }
    Last edited by Daniil; Apr 12, 2012 at 6:29 PM. Reason: [CLOSED]
  2. #2
    It works if i use AjaxProxy istead of JsonPProxy.

    The examples provided at examples.ext.net show the usage of JsonPProxy and PageProxy, but both do not work in my example.

    In my post i use the JsonPProxy and as you can see it does not work. I also tried to use PageProxy but i get the following error "The control with ID '_str' not found". If i remove the ID of the store i get the following error:
    Click image for larger version. 

Name:	002.png 
Views:	91 
Size:	7.2 KB 
ID:	4099

    are these behaviours expected?

    i would like to know whether there is some documentation about the proxy classes (AjaxProxy, DirectProxy, JsonPProxy, LocalStorageProxy, PageProxy, RestProxy, SessionStorageProxy) available in ext.net and when use each one of them.
  3. #3
    I think we have an ASP.NET MVC Razor sample demonstrating an Infinite Scrolling sample. I will find.
    Geoffrey McGill
    Founder
  4. #4
    We have two Razor samples demonstrating Infinite Scrolling. The first uses an AjaxProxy, the other a JsonPProxy. I'll post the JsonPProxy in the next forum post.

    Example (View)

    @{    Layout = "";        
    }
    
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Infinite Scrolling - Ext.NET Examples</title>
    
    
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>    
        @Html.X().ResourceManager()
    
    
        <h1>Infinite Scrolling</h1>
    
    
        <p>The brand new GridPanel supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>
            
        <p>The GridPanel uses a new virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>
        
        <br />
    
    
        @(Html.X().GridPanel()
            .Title("Stock Price")
            .Height(500)
            .Width(500)
            .InvalidateScrollerOnRefresh(false)
            .DisableSelection(true)
            .Store(store => store.Add(Html.X().Store()
                .PageSize(100)
                .Buffered(true)
                .AutoLoad(false)
                .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                            .Url("/Data/GetData/")
                            .Reader(reader => reader.Add(Html.X().JsonReader()
                                        .Root("data")
                                    ))
                            ))
                .Model(model => model.Add(Html.X().Model()
                            .Fields(fields => {
                                fields.Add(Html.X().ModelField().Name("Company")); 
                                fields.Add(Html.X().ModelField().Name("Price"));
                                fields.Add(Html.X().ModelField().Name("LastUpdate").Type(ModelFieldType.Date));
                            })
                        ))
                ))
            .VerticalScroller(scroller => scroller.Add(Html.X().GridPagingScroller()))      
            .ColumnModel(columnModel => {
                columnModel.Columns.Add(Html.X().RowNumbererColumn().Width(50).Sortable(false));
                columnModel.Columns.Add(Html.X().Column()
                                                .Text("Company")
                                                .DataIndex("Company")
                                                .Flex(1));
                columnModel.Columns.Add(Html.X().Column()
                                                .Text("Price")
                                                .DataIndex("Price")
                                                .Width(70));
                columnModel.Columns.Add(Html.X().DateColumn()
                                                .Text("LastUpdate")
                                                .DataIndex("LastUpdate")
                                                .Width(140)
                                                .Format("HH:mm:ss"));
            })
            .View(view => view.Add(Html.X().GridView().TrackOver(false)))
            .Listeners(listeners => {
                listeners.AfterRender.Handler = "this.store.guaranteeRange(0, 99);";
                listeners.AfterRender.Delay = 100; 
            })
        )
    </body>
    </html>
    Example (Controller)

    public class DataController : System.Web.Mvc.Controller{
        public StoreResult GetData(int start, int limit, int page)
        {
            StoreResult response = new StoreResult();
    
    
            List<StockQuotation> data = new List<StockQuotation>();
    
    
            Random randow = new Random();
            DateTime now = DateTime.Now;
    
    
            for (int i = start + 1; i <= start + limit; i++)
            {
                StockQuotation qoute = new StockQuotation()
                {
                    Company = "Company " + i,
                    Price = randow.Next(0, 200),
                    LastUpdate = now
                };
                
                data.Add(qoute);
            }
    
    
            response.Data = data;
            response.Total = 50000;
                
            return response;
        }
    }
    Geoffrey McGill
    Founder
  5. #5
    Here's the JsonPProxy sample of GridPanel with Infinite Scrolling. No 'data' Controller is required, because the data is loaded from a remote domain.

    Example (View)

    @{    Layout = "";        
    }
    
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Infinite Scrolling - Ext.NET Examples</title>
    
    
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
    
    
        <script type="text/javascript">
            var renderTopic = function(value, p, record) {
                return Ext.String.format(
                    '<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
                    value,
                    record.data.forumtitle,
                    record.getId(),
                    record.data.forumid
                );
            };
        </script>
    </head>
    <body>    
        @Html.X().ResourceManager()
    
    
        <h1>Infinite Scrolling</h1>
    
    
        <p>Ext.Net 2's brand new grid supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>
            
        <p>The new grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>
        
        <br />
    
    
        @(Html.X().GridPanel()
            .Title("ExtJS.com - Browse Forums")
            .Height(500)
            .Width(700)
            .InvalidateScrollerOnRefresh(false)
            .DisableSelection(true)
            .Store(store => store.Add(Html.X().Store()
                .RemoteSort(true)
                .PageSize(200)
                .Buffered(true)
                .AutoLoad(false)
                .Proxy(proxy => proxy.Add(Html.X().JsonPProxy()
                            .Url("http://www.sencha.com/forum/remote_topics/index.php")
                            .SimpleSortMode(true)
                            .Reader(r => r.Add(Html.X().JsonReader()
                                        .Root("topics")
                                        .TotalProperty("totalCount")
                                        ))
                            .ExtraParams(xparams => xparams.Add(Html.X().Parameter()
                                                                   .Name("total")
                                                                   .Value("100")
                                                                   .Mode(ParameterMode.Raw)
                                                                   ))
                            ))
                .Model(model => model.Add(Html.X().Model()
                            .IDProperty("threadid")
                            .Fields(fields => {
                                fields.Add(Html.X().ModelField().Name("title")); 
                                fields.Add(Html.X().ModelField().Name("forumtitle"));
                                fields.Add(Html.X().ModelField().Name("forumid"));
                                fields.Add(Html.X().ModelField().Name("author"));
                                fields.Add(Html.X().ModelField().Name("replycount").Type(ModelFieldType.Int));
                                fields.Add(Html.X().ModelField().Name("lastpost").Type(ModelFieldType.Date).DateFormat("timestamp"));
                                fields.Add(Html.X().ModelField().Name("lastposter"));
                                fields.Add(Html.X().ModelField().Name("excerpt"));
                                fields.Add(Html.X().ModelField().Name("threadid")); 
                            })
                            ))
                .Sorters(sort => sort.Add(Html.X().DataSorter().Property("lastpost").Direction(Ext.Net.SortDirection.DESC)))
                ))
            .VerticalScroller(scroller => scroller.Add(Html.X().GridPagingScroller()))      
            .ColumnModel(colModel => {
                colModel.Columns.Add(Html.X().RowNumbererColumn().Width(50).Sortable(false));
                colModel.Columns.Add(Html.X().Column()
                                                .ID("topic")
                                                .Text("topic")
                                                .DataIndex("title")
                                                .Flex(1)
                                                .Sortable(false)
                                                .Renderer(new Renderer { Fn = "renderTopic" })
                                                );
                colModel.Columns.Add(Html.X().Column()
                                                .Text("Author")
                                                .DataIndex("author")
                                                .Width(100)
                                                .Hidden(true)
                                                .Sortable(true)
                                                );
                colModel.Columns.Add(Html.X().Column()
                                                .Text("Replies")
                                                .DataIndex("replycount")
                                                .Width(70)
                                                .Align(Alignment.Center)
                                                .Sortable(false)
                                                );
                colModel.Columns.Add(Html.X().DateColumn()
                                                .Text("Last Post")
                                                .DataIndex("lastpost")
                                                .Width(130)
                                                .Sortable(true)
                                                .Format("HH:mm:ss")
                                                );
            })
            .View(view => view.Add(Html.X().GridView().TrackOver(false)))
            .Listeners(listeners => { 
                listeners.AfterRender.Handler = "this.store.guaranteeRange(0, 199);"; 
                listeners.AfterRender.Delay = 100; })
        )
    </body>
    </html>
    Geoffrey McGill
    Founder
  6. #6
    Quote Originally Posted by RCN View Post
    i would like to know whether there is some documentation about the proxy classes (AjaxProxy, DirectProxy, JsonPProxy, LocalStorageProxy, PageProxy, RestProxy, SessionStorageProxy) available in ext.net and when use each one of them.
    All apart from PageProxy you can find in ExtJS docs. For example,
    http://docs.sencha.com/ext-js/4-0/#!...ata.proxy.Ajax


    PageProxy

    Briefly, it can be used with code behind only.

    Here are more details about PageProxy.
    http://forums.ext.net/showthread.php...ll=1#post70797

    It's Ext.NET v1 description, but there is the same in Ext.NET v2 apart from:

    1. OnRefreshData has been renamed to OnReadData.

    2. StoreRefreshDataEventArgs has been renamed to StoreReadDataEventArgs.
  7. #7
    Hi folks, i would like to thank you for helping me to accomplish this task. Unfortunately, ive not got yet.

    I have not mentioned but im implementing using version 2 beta of Ext.Net.

    The frist example provided by Geoffrey does not work in the second version of Ext.Net. To make it work PARTIALLY i have to do the following:

    1. use
      var me = this; me.store.prefetch({start: 0, limit: 99, callback: function() { me.store.guaranteeRange(0, 49); }});
      instead of
      this.store.guaranteeRange(0, 99);
    2. Remove the parameter "page" from the method "/Data/GetData/"


    But these changes break the pagination when i perform a large scroll. For saying the truth i dont know whether it was due the changes or a problem in the component itself

    About Daniils post, unfortunately it does not fit my needs because im implementing an MVC application.

    I just would like to know a way to implement this functionality in a mvc app using ext.net 2.0.
    Last edited by Daniil; Apr 12, 2012 at 1:16 PM.
  8. #8
    I've just checked it up the first Geoffrey's example with the latest Ext.NET sources - works as expected.

    So, you should update from SVN or wait the next release.
  9. #9
    Does it work on version 2? ill try to update from svn
  10. #10
    Yes, with the last sources from SVN.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Infinite Scrolling
    By rnachman in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 09, 2012, 5:03 PM
  2. [CLOSED] Infinite Scrolling Grid with GridFilter feature - JavaScript Error
    By MacGarnicle in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 04, 2012, 2:06 PM
  3. [CLOSED] Infinite Scrolling
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 09, 2011, 6:15 PM
  4. [CLOSED] Tab Content Scrolling
    By rcaunt in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 02, 2009, 1:21 PM
  5. [CLOSED] Tab Scrolling
    By Immobilmente in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Dec 23, 2008, 5:09 PM

Posting Permissions