[CLOSED] Paging combo box giving blank error pop up in case of dataview with status code 200

[alscg]

Scenario: - Need to add paging combo box to in data view to select 10 / 20 / 50 records at a time.

Issue: - A blank error pop-up with status code 200 is coming on every selection change of this paging combo box.

Page size is also not changing. Please refer the attached image for reference.

Model: -

namespace Widgets
{
public class DummyWidgetDTO
    {

        public int Widget_Id { get; set; }
        public string Widget_Name { get; set; }
        public string Widget_Image_Url { get; set; }
        public string Widget_Desc { get; set; }

        public static List<DummyWidgetDTO> GetDummyData()
        {
            List<DummyWidgetDTO> WidgetList = new List<DummyWidgetDTO>();
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 1, Widget_Name = "Widget1", Widget_Desc = "Widget1 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 2, Widget_Name = "Widget2", Widget_Desc = "Widget2 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 3, Widget_Name = "Widget3", Widget_Desc = "Widget3 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 4, Widget_Name = "Widget4", Widget_Desc = "Widget4 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 5, Widget_Name = "Widget5", Widget_Desc = "Widget5 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 6, Widget_Name = "Widget6", Widget_Desc = "Widget6 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 7, Widget_Name = "Widget7", Widget_Desc = "Widget7 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 8, Widget_Name = "Widget8", Widget_Desc = "Widget8 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 9, Widget_Name = "Widget9", Widget_Desc = "Widget9 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 10, Widget_Name = "Widget10", Widget_Desc = "Widget10 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 11, Widget_Name = "Widget11", Widget_Desc = "Widget11 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 12, Widget_Name = "Widget12", Widget_Desc = "Widget12 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 13, Widget_Name = "Widget13", Widget_Desc = "Widget13 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 14, Widget_Name = "Widget14", Widget_Desc = "Widget14 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 15, Widget_Name = "Widget15", Widget_Desc = "Widget15 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 16, Widget_Name = "Widget16", Widget_Desc = "Widget16 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 17, Widget_Name = "Widget17", Widget_Desc = "Widget17 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 18, Widget_Name = "Widget18", Widget_Desc = "Widget18 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 19, Widget_Name = "Widget19", Widget_Desc = "Widget19 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 20, Widget_Name = "Widget20", Widget_Desc = "Widget20 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 21, Widget_Name = "Widget21", Widget_Desc = "Widget21 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 22, Widget_Name = "Widget22", Widget_Desc = "Widget22 Description" });
            WidgetList.Add(new DummyWidgetDTO() { Widget_Id = 23, Widget_Name = "Widget23", Widget_Desc = "Widget23 Description" });

            return WidgetList;
        }

    }
}

Controller: -

public ActionResult _SSDummy()
        {
            List<DummyWidgetDTO> ListData = new List<DummyWidgetDTO>();
            ListData = DummyWidgetDTO.GetDummyData();

            return View(ListData);
        }

View: -

@model List<Widgets.DummyWidgetDTO>
@{
    ViewBag.Title = "Widget Library";
}

<script type="text/javascript">
    $(document).ready(function () {
        $("#left_navigation").css("display", "none").parent().css("width", "0px");
    });

    Ext.data.PagingStore.override({
        applyPaging: function () {
            var start = (this.currentPage - 1) * this.pageSize,
                limit = this.pageSize;
            var allData = this.data,
                data = new Ext.util.MixedCollection({
                    getKey: Ext.data.Store.recordIdFn,
                    maintainIndices: true
                });

            data.pageSize = this.pageSize;
            if (start >= allData.getCount()) {
                start = this.start = 0;
            }

            data.addAll(allData.getRange(start, start + limit - 1));
            this.allData = allData;
            this.data = data;
        }
    });

    var prepareData = function (data) {
        data.shortName = Ext.util.Format.ellipsis(data.Title, 15);
        data.sizeString = Ext.util.Format.fileSize(data.size);
        data.dateString = Ext.Date.format(data.lastmod, "m/d/Y g:i a");
        return data;
    };

             Ext.onReady(function () {
                 var panel = App.WidgetPanel2;
                 var WidgetPanelBody1 = App.WidgetPanelBody;
                 panel.doLayout();
                 WidgetPanelBody1.doLayout();
                 Ext.EventManager.onWindowResize(function () {
                     panel.setSize(undefined, undefined);
                     panel.doLayout();
                     WidgetPanelBody1.doLayout();
                     WidgetPanelBody1.setSize(undefined, undefined);
                 });
             });

             var selectionChanged = function (dv, nodes) {
                 var l = nodes.length,
                     s = l != 1 ? 's' : '';
             };
</script>

<style type="text/css">
    .sort-dropdown .x-form-text {
        background: #fff !important;
        height: 20px !important;
        width: 70px !important;
    }

    .x-form-trigger-wrap {
        margin-bottom: 0px !important;
    }

    .search-textbox .x-form-text {
        height: 20px !important;
    }

    #ImageView div:nth-child(4n+1) {
        clear: left;
    }
</style>

<div class="twelve columns main-content">
   
    @(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig).RenderStyles(ResourceLocationType.None))

    @( Html.X().Container()
            .ID("WidgetPanel2")
            .Cls("content_container")
            .Padding(1)
            .Items(
                Html.X().Panel().ID("WidgetPanel").Padding(0).Border(false)
                .BottomBar(Html.X().PagingToolbar().StoreID("WidgetStore").HideRefresh(true)
                    .Items(
                            Html.X().ComboBox().ID("ComboBox1").Editable(false).Cls("sort-dropdown")
                                    .Items(
                                            Html.X().ListItem().Text("10"),
                                            Html.X().ListItem().Text("20"),
                                            Html.X().ListItem().Text("50"),
                                            Html.X().ListItem().Text("100")
                                        )
                                    .SelectedItems(Html.X().ListItem().Value("10"))
                                    .Listeners(ls => ls.Select.Handler = "#{ImageView}.store.pageSize = parseInt(this.getValue(), 10); #{ImageView}.store.reload();")
                        )
                )
                .TopBar(Html.X().Toolbar().Cls("content_container_top").Items
                            (
                                Html.X().TextField().ID("searchbox").EmptyText(Resource.Users.ManageUser.BtnTalentSearch).Cls("search-textbox")
                                        .Listeners(ls => ls.Change.Handler = "var dataview = App.WidgetPanel.down('dataview'),store = dataview.store;store.suspendEvents();store.clearFilter();dataview.getSelectionModel().clearSelections();store.resumeEvents();"
                                                  + "store.filter({"
                                                    + "property: 'Widget_Name',"
                                                    + "anyMatch: true,"
                                                    + "value   : newValue"
                                                    + "});store.load();")
                                  ,
                                  Html.X().ComboBox().ID("ddlSort").LabelAlign(LabelAlign.Right).LabelWidth(50).FieldLabel(Resource.Dashboard.DashboardInfo.SortBy).Editable(false).Cls("sort-dropdown").MarginSpec("8px 0 0 0")
                                          .Items(
                                                Html.X().ListItem().Text("ID").Value("Widget_Id"),
                                                Html.X().ListItem().Text("Name").Value("Widget_Name")
                                                )
                                          .Listeners(ls => ls.Select.Handler = "App.WidgetPanel.down('dataview').store.sort(this.getValue());")
                            )

                    )
               .Items(
                        Html.X().Container().ID("WidgetPanelBody").Cls("widget_library_item").MinHeight(560).StyleSpec("overflow:auto !important")
                        .Items(
                               Html.X().DataView()
                                .ID("ImageView")
                                .Store(
                                        Html.X().Store()
                                        .ID("WidgetStore")
                                        .RemotePaging(true)
                                        .PageSize(10)   
                                        .DataSource(Model)
                                        .Model(
                                                 Html.X().Model()
                                                   .IDProperty("Id")
                                                   .Fields(
                                                            Html.X().ModelField().Name("Widget_Id"),
                                                            Html.X().ModelField().Name("Widget_Name"),
                                                            Html.X().ModelField().Name("Widget_Desc")
                                                          )
                                              )
                                        )
                                        
                                .MultiSelect(true)
                                .OverItemCls("x-item-over")
                                .ItemSelector("div.thumb-wrap")
                                .EmptyText(Resource.Dashboard.DashboardInfo.EmptyWidgetGrid)
                                .TrackOver(true)
                                .Tpl(
                                    Html.X().XTemplate()
                                        .Html(
                                            @"
                                                <tpl for=""."">
                                                    <div class='three columns mobile-two'>
                                                        <h3> {Widget_Name} </h3>       
                                                        
                                                            <p style='text-align:left'> {Widget_Desc} </p>
                                                    </div>
                                                </tpl>
                                            "
                                        )
                                    )
                                .PrepareData("prepareData")
                                .Listeners(l => { l.SelectionChange.Fn = "selectionChanged"; })
                            )
                        )
               )
    )
</div>

[Daniil]

Hi @alscg,

I see you have set up

.RemotePaging(true)

But you have not set up a Proxy (a remote one like an AjaxProxy) for the Store. I think a remote Proxy is essential for remote paging.

After configuring a Proxy, I guess your code of changing the page size might just start working.

[alscg]

Can you please elaborate what needs to be done here.
I tried putting below line of code: -

.Proxy(Html.X().PageProxy())

Now, the call to respective controller method is going twice after adding this line.
Also, now no data is displayed on page.

[Daniil]

A PageProxy is supposed to be used with WebForm only. Though, with a DirectFn it might be used in both - WebForms and MVC.

You should use an AjaxProxy if you need remote paging.
http://mvc.ext.net/#/GridPanel_Pagin...orting/Remote/

There is also a local paging example:
http://mvc.ext.net/#/GridPanel_Array...rayWithPaging/

[alscg]

Added remote reloading in my code. It worked.
Thanks.