PDA

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



alscg
Jul 24, 2014, 9:57 AM
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(ResourceLoc ationType.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.BtnTalentSea rch).Cls("search-textbox")
.Listeners(ls => ls.Change.Handler = "var dataview = App.WidgetPanel.down('dataview'),store = dataview.store;store.suspendEvents();store.clearFi lter();dataview.getSelectionModel().clearSelection s();store.resumeEvents();"
+ "store.filter({"
+ "property: 'Widget_Name',"
+ "anyMatch: true,"
+ "value : newValue"
+ "});store.load();")
,
Html.X().ComboBox().ID("ddlSort").LabelAlign(LabelAlign.Right).LabelWidth(50).Fiel dLabel(Resource.Dashboard.DashboardInfo.SortBy).Ed itable(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.g etValue());")
)

)
.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.EmptyW idgetGrid)
.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
Jul 24, 2014, 1:40 PM
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
Jul 24, 2014, 5:54 PM
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
Jul 25, 2014, 9:36 AM
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_Paging_and_Sorting/Remote/

There is also a local paging example:
http://mvc.ext.net/#/GridPanel_ArrayGrid/ArrayWithPaging/

alscg
Jul 25, 2014, 11:43 AM
Added remote reloading in my code. It worked.
Thanks.