[CLOSED] MVC GridPanel with Infinite Scrolling and RemoteFilter/Sort/Page

[leonardm]

Hi,

We have this issue with the following code

@using Ext.Net
@using Ext.Net.MVC

@model SMS.UI.Web.Areas.App.Models.Films.Film

@{    
    Layout = null;
    var X = Html.X();
}

@(
X.GridPanel()
       .Title("Films")
       .ID("gpFilms")
       .Layout(LayoutType.Fit)
       .ForceFit(true)
       .Border(false)
       .BodyBorder(0)      
       .DirectEvents(de =>
           {
                de.ItemDblClick.Before = "return ActivateTab(Ext.String.format('pnlContainer!{0}!{1}', record.get('Title'), record.get('Id')));";
                de.ItemDblClick.Url = Url.Action("AddFilmDetails");
                de.ItemDblClick.CleanRequest = true;
                de.ItemDblClick.Method = HttpMethod.GET;
                de.ItemDblClick.ExtraParams.Add(new Parameter("id", "record.get('Id')", ParameterMode.Raw));
                de.ItemDblClick.ExtraParams.Add(new Parameter("name", "record.get('Title')", ParameterMode.Raw));
                de.ItemDblClick.Failure = "Ext.Msg.alert('ERROR', 'Oops!')";
                de.ItemDblClick.Success = "setTimeout(function() { App.MainTabPanel.setActiveTab(Ext.String.format('pnlContainer!{0}!{1}', record.get('Title'), record.get('Id'))) }, 100)";
        })
       .Store(
           X.Store()
            .ID("storeFilms")
            .PageSize(50)
            .AutoLoad(true)
            .IsPagingStore(true)
            .RemotePaging(true)
            .RemoteSort(true)
            .RemoteFilter(true)                        
            .Buffered(true)             
            .ShowWarningOnFailure(true)
            .SorterFor(Model, m => m.Title, Ext.Net.SortDirection.ASC)
            .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                                          .Url(Url.Action("GetFilms"))
                                          .SimpleSortMode(true)
                                          .IDParam("Id")
                                          .Reader(reader => reader.Add(Html.X().JsonReader().Root("data").TotalProperty("total")))))
            .Model(model => model.Add(Html.X().Model()
                                          .Fields(fields =>
                                              {
                                                  fields.Add(Html.X().ModelField().Name("Id"));
                                                  fields.Add(Html.X().ModelField().Name("Title"));
                                                  fields.Add(Html.X().ModelField().Name("Studio.Name").Mapping("Studio"));
                                                  fields.Add(Html.X().ModelField().Name("Created").Mapping("FirstReleaseDate"));
                                                  fields.Add(Html.X().ModelField().Name("DisneyFilm"));
                                                  fields.Add(Html.X().ModelField().Name("Genre.Name").Mapping("Genre"));
                                                  fields.Add(Html.X().ModelField().Name("Created"));
                                                  fields.Add(Html.X().ModelField().Name("MPMP"));
                                                  fields.Add(Html.X().ModelField().Name("RadarId"));

                                              }))))
       .ColumnModel(columnModel =>
           {
               columnModel.Columns.Add(Html.X().Column().Text("Id").DataIndex("Id").Hidden(true));
               columnModel.Columns.Add(Html.X().Column().Text("Title").DataIndex("Title").Flex(1)
                                           .HeaderItems(
                                               Html.X().TextField()
                                                   .ID("TitleFilter")
                                                   .Listeners(l =>
                                                       {
                                                           l.Change.Handler = "searchHeaderField(this);";
                                                           l.Change.Buffer = 250;
                                                       })
                                           ));
               columnModel.Columns.Add(Html.X().Column().Text("Studio").DataIndex("Studio.Name").Flex(1)
                                           .HeaderItems(
                                               Html.X().TextField()
                                                   .ID("StudioFilter")
                                                   .Listeners(l =>
                                                       {
                                                           l.Change.Handler = "searchHeaderField(this);";
                                                           l.Change.Buffer = 250;
                                                       })
                                           ));
               columnModel.Columns.Add(Html.X().Column().Text("ERD").DataIndex("Created"));
               columnModel.Columns.Add(Html.X().Column().Text("Disney Film").DataIndex("DisneyFilm").Renderer("renderYesNo"));
               columnModel.Columns.Add(Html.X().Column().Text("Genre").DataIndex("Genre.Name").Flex(1)
                                           .HeaderItems(
                                               Html.X().TextField()
                                                   .ID("GenreFilter")
                                                   .Listeners(l =>
                                                       {
                                                           l.Change.Handler = "searchHeaderField(this);";
                                                           l.Change.Buffer = 250;
                                                       })
                                           ));
               columnModel.Columns.Add(Html.X().Column().Text("Created").DataIndex("Created"));
               columnModel.Columns.Add(Html.X().Column().Text("MPM Product").DataIndex("MPMP").Flex(1)
                   .HeaderItems(
                             Html.X().TextField()
                                    .ID("MPMPFilter")
                                    .Listeners(l =>
                                    {
                                        l.Change.Handler = "searchHeaderField(this);";
                                        l.Change.Buffer = 250;
                                    })
                            ));
               columnModel.Columns.Add(Html.X().Column().Text("Radar Id").DataIndex("RadarId").Flex(1)
                   .HeaderItems(
                             Html.X().TextField()
                                    .ID("RadarIdFilter")
                                    .Listeners(l =>
                                    {
                                        l.Change.Handler = "searchHeaderField(this);";
                                        l.Change.Buffer = 250;
                                    })
                            ));                         
        })
)

This Grid is being loaded with a Partial View. Once loaded, the Grid functions normally (Sorting and Filtering and Buffering works). There is double-click handler that loads another tab as a Partial View and activate that Tab. Once this happens, when you come back to the Grid tab sorting and filter do not work. Another words, the controller is not being called. For example, when clicking on any of the Column to sort, the entire data disappears and the UI becomes unresponsive.

However, if you set the Store Buffer(false) then it works fine.

I'm suspecting that the Store Buffer gets cleared/corrupted?

Also tried using the new FilterHeader Plugin but if I put in

.Plugins(X.FilterHeader().Remote(true))

I get the following error :

Server Error in '/' Application.

The resource cannot be found.

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

Requested URL: /ux/clearbutton/clearbutton-js/ext.axd

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.17929

Can you please help?

Thanks,
Leo

[Baidaly]

Hello!

Can you provide a full sample to reproduce with view, model and controller?

[Daniil]

Also tried using the new FilterHeader Plugin but if I put in

.Plugins(X.FilterHeader().Remote(true))

I get the following error :

Server Error in '/' Application.

The resource cannot be found.

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

Requested URL: /ux/clearbutton/clearbutton-js/ext.axd

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.17929

Can you please help?

Could you, please, start another thread for this issue?

[leonardm]

You can close this. It is fixed.

Thanks,
Leo

[Daniil]

Nice, thank you for the update.

Please note that sharing solutions can help some forum member in the future. Who finds that thread searching a solution for his problem.