PDA

View Full Version : [CLOSED] Not able to see data items in the store



sharmav1
Feb 20, 2015, 8:26 AM
Hi,

Scenario:

I am getting 500 records in my grid.
After filtering I get 50 records, and the page size of the store is 24. Then, I select all 24 records in that page and removed it from there. Now, I am loading allData()(store.loadData(store.allData().items)) records in to my store which displays remaining 26 records in allData().items.totalCount.

At the same time, I am able to 26 records in the snapshot as well, but when I try to see store.totalCount: it says 450 but there are no items inside store.data.items. Could you please tell me how can I find these remaining 450 records?

Thanks

Dimitris
Feb 20, 2015, 9:46 AM
Hello,

This kind of question will be difficult to answer without a code sample. Will you be so kind as to provide us with one?

In case you are wondering how to create a suitable example the forum guidelines (http://forums.ext.net/showthread.php?10205-More-Information-Required) are an excellent place to start.

sharmav1
Feb 20, 2015, 11:31 AM
App.myGrid.getStore().totalCount = 500; // here I have 500 total records in the grid
App.myGrid.getStore().allData.length = 50; //here I have 50 filtered records
var records = App.myGrid.selModel.getSelection(); //Here I am getting 24 records out of 50 after filtering 500 record because my store page size is 24
App.myGrid.getStore().remove(records);// Here I am removing 24 selected records from the store
App.myGrid.getStore().allData.length = 26; //here I have 26 remaining filtered records
App.myStore.loadData(App.myStore.allData.items) // now I am loading items into the store
App.myGrid.getStore().totalCount = 476;

at the final step in above code I am having
476 as store's totalcount but I am not able to see:
1) any of the data items inside App.myGrid.getStore().allData.items and also the length is coming 0
2) any of the data items inside App.myGrid.getStore().data.items and also the length is coming 0
What I can see is:
1) 26 items inside App.myGrid.getStore().snapshot.items and also the length is coming as 26
2) 500 items inside App.myGrid.getStore().proxy.items and also the length is coming as 500

No, my question is how can I get those 476 records as I am getting totalCount of myStore = 476?

Thanks

fabricio.murta
Feb 21, 2015, 3:15 AM
Hello, sharmav1!

I believe we will need a running example so we can reproduce your situation. I can't figure out your scenario with the information you provided, at least.

Can you by any chance derive your example on one of our running examples in examples explorer (http://examples2.ext.net/#)? Please clean as much code as you can, to leave only the issue you are encountering.

Some examples I can think of as starting point are:
- Simple Array Grid (http://examples2.ext.net/#/GridPanel/ArrayGrid/Simple/)
- Paging and Sorting GridPanel (http://examples2.ext.net/#/GridPanel/Paging_and_Sorting/Handler/)
- Local Data Paging (http://examples2.ext.net/#/GridPanel/Paging_and_Sorting/Local_Data_Paging/)

If in doubt, please refer to our guidelines:
- Forum Guidelines For Posting New Topics (http://forums.ext.net/showthread.php?3440)
- More information required (http://forums.ext.net/showthread.php?10205)

zinduyaar
Feb 21, 2015, 6:33 AM
As I am using Simple Grid (http://mvc.ext.net/#/GridPanel_ArrayGrid/Simple/) with some of your plugins as:
1. Page Size (http://mvc.ext.net/#/GridPanel_ArrayGrid/ArrayWithPaging/)
2. Filters (http://mvc.ext.net/#/GridPanel_MultiHeader/Filter/)
3. Checkbox Selection Model (http://mvc.ext.net/#/GridPanel_Selection_Models/Checkbox_Selection/)



The situation is as follows:
As I am binding my grid's store



@model object
@{
ViewBag.Title = "GridPanel with MultiHeader Row Filters - Ext.NET MVC Examples";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
}

@section headtag
{
<script>
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};

var applyFilter = function (field) {
var store = App.GridPanel1.getStore();
store.filterBy(getRecordFilter());
};

var clearFilter = function () {
App.ComboBox1.reset();
App.PriceFilter.reset();
App.ChangeFilter.reset();
App.PctChangeFilter.reset();
App.LastChangeFilter.reset();

App.Store1.clearFilter();
}

var filterString = function (value, dataIndex, record) {
var val = record.get(dataIndex);

if (typeof val != "string") {
return value.length == 0;
}

return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
};

var filterDate = function (value, dataIndex, record) {
var val = Ext.Date.clearTime(record.get(dataIndex), true).getTime();

if (!Ext.isEmpty(value, false) && val != Ext.Date.clearTime(value, true).getTime()) {
return false;
}
return true;
};

var filterNumber = function (value, dataIndex, record) {
var val = record.get(dataIndex);

if (!Ext.isEmpty(value, false) && val != value) {
return false;
}

return true;
};

var getRecordFilter = function () {
var f = [];

f.push({
filter: function (record) {
return filterString(App.ComboBox1.getValue()||"", "company", record);
}
});

f.push({
filter: function (record) {
return filterNumber(App.PriceFilter.getValue(), "price", record);
}
});

f.push({
filter: function (record) {
return filterNumber(App.ChangeFilter.getValue(), "change", record);
}
});

f.push({
filter: function (record) {
return filterNumber(App.PctChangeFilter.getValue(), "pctChange", record);
}
});

f.push({
filter: function (record) {
return filterDate(App.LastChangeFilter.getValue(), "lastChange", record);
}
});

var len = f.length;

return function (record) {
for (var i = 0; i < len; i++) {
if (!f[i].filter(record)) {
return false;
}
}
return true;
};
};
</script>


}

@section example
{
@(
Html.X().GridPanel()
.ID("GridPanel1")
.Title("Filter Grid")
.Width(600)
.Height(350)
.ResizableConfig(new Resizer { Handles = ResizeHandle.East })
.Store(
Html.X().Store()
.ID("Store1")
.DataSource(Model)
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("company"),
Html.X().ModelField().Name("price").Type(ModelFieldType.Float),
Html.X().ModelField().Name("change").Type(ModelFieldType.Float),
Html.X().ModelField().Name("pctChange").Type(ModelFieldType.Float),
Html.X().ModelField().Name("lastChange").Type(ModelFieldType.Date).DateFormat("MM/dd/yyyy")
)
)
)
.ColumnModel(
Html.X().Column()
.Text("Company")
.DataIndex("company")
.Flex(1)
.Items(
Html.X().ComboBox()
.ID("ComboBox1")
.Icon(Icon.Magnifier)
.TriggerAction(TriggerAction.All)
.QueryMode(DataLoadMode.Local)
.DisplayField("company")
.ValueField("company")
.Store(
Html.X().Store()
.PageSize(24)
.DataSource(Model)
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("company")
)
)
)
.Listeners(l =>
{
l.Change.Handler = "applyFilter(this);";
l.Change.Buffer = 250;
})
.Plugins(Html.X().ClearButton())
),

Html.X().Column()
.Text("Price")
.DataIndex("price")
.Width(75)
.Renderer(RendererFormat.UsMoney)
.Items(
Html.X().TextField()
.ID("PriceFilter")
.Listeners(l => {
l.Change.Handler = "applyFilter(this);";
l.Change.Buffer = 250;
})
.Plugins(Html.X().ClearButton())
),

Html.X().Column()
.Text("Changes")
.Columns(
Html.X().Column()
.Text("Change")
.DataIndex("change")
.Width(75)
.HideTitleEl(true)
.Renderer("change")
.Items(
Html.X().TextField()
.ID("ChangeFilter")
.Listeners(l => {
l.Change.Handler = "applyFilter(this);";
l.Change.Buffer = 250;
})
.Plugins(Html.X().ClearButton())
),

Html.X().Column()
.Text("Change %")
.DataIndex("pctChange")
.Width(75)
.HideTitleEl(true)
.Renderer("pctChange")
.Items(
Html.X().TextField()
.ID("PctChangeFilter")
.Listeners(l => {
l.Change.Handler = "applyFilter(this);";
l.Change.Buffer = 250;
})
.Plugins(Html.X().ClearButton())
)
),

Html.X().DateColumn()
.Text("Last Updated")
.Width(95)
.DataIndex("lastChange")
.Items(
Html.X().DateField()
.ID("LastChangeFilter")
.Editable(false)
.Listeners(l => {
l.Change.Handler = "applyFilter(this);";
})
.Plugins(Html.X().ClearButton())
),

Html.X().Column()
.Width(25)
.DataIndex("company")
.Sortable(false)
.MenuDisabled(true)
.Text("&nbsp;")
.Resizable(false)
.Renderer("return '';")
.Items(
Html.X().Container()
.Items(
Html.X().Button()
.ID("ClearFilterButton")
.Icon(Icon.Cancel)
.ToolTip("Clear filter")
.Handler("clearFilter")
)
)
)
)
}



After rendering this view I am able to see total 500 records which is as expected.

Now as I mentioned above I am using column Header for each column as to filter records, when I type some text in lets say on Company Column, then I get 50 filtered records.
As in this case when I apply quick watch to see store of my grid then the results are as follows:



App.GridPanel1.getStore().totalCount = 500 // here I have 500 total records in the grid
App.GridPanel1.getStore().data.length = 24 // as I mentioned in above code my store's page size is 24
App.GridPanel1.getStore().allData.length = 50 //here I have 50 filtered records

Now as you can see my above code where I set my store's page size as 24. Also keeping in mind that I am also using Checkbox Selection Model (http://mvc.ext.net/#/GridPanel_Selection_Models/Checkbox_Selection/) to select records, now what happens in this example as follows:


<script>
/* A header Checkbox of CheckboxSelectionModel deals with the current page only.
This override demonstrates how to take into account all the pages.
It works with local paging only. It is not going to work with remote paging.
*/
Ext.selection.CheckboxModel.override({
selectAll: function (suppressEvent) {
var me = this,
selections = me.store.getAllRange(), // instead of the getRange call
i = 0,
len = selections.length,
start = me.getSelection().length;

me.suspendChanges();

for (; i < len; i++) {
me.doSelect(selections[i], true, suppressEvent);
}

me.resumeChanges();
if (!suppressEvent) {
me.maybeFireSelectionChange(me.getSelection().leng th !== start);
}
},

deselectAll: Ext.Function.createSequence(Ext.selection.Checkbox Model.prototype.deselectAll, function () {
this.view.panel.getSelectionMemory().clearMemory() ;
}),

updateHeaderState: function () {
var me = this,
store = me.store,
storeCount = store.getTotalCount(),
views = me.views,
hdSelectStatus = false,
selectedCount = 0,
selected, len, i;

if (!store.buffered && storeCount > 0) {
selected = me.view.panel.getSelectionMemory().selectedIds;
hdSelectStatus = true;
for (s in selected) {
++selectedCount;
}

hdSelectStatus = storeCount === selectedCount;
}

if (views && views.length) {
me.toggleUiHeader(hdSelectStatus);
}
}
});

Ext.grid.plugin.SelectionMemory.override({
memoryRestoreState: function (records) {
if (this.store !== null && !this.store.buffered && !this.grid.view.bufferedRenderer) {
var i = 0,
ind,
sel = [],
len,
all = true,
cm = this.headerCt;

if (!records) {
records = this.store.getAllRange(); // instead of getRange
}

if (!Ext.isArray(records)) {
records = [records];
}

if (this.selModel.isLocked()) {
this.wasLocked = true;
this.selModel.setLocked(false);
}

if (this.selModel instanceof Ext.selection.RowModel) {
for (ind = 0, len = records.length; ind < len; ind++) {
var rec = records[ind],
id = rec.getId();

if ((id || id === 0) && !Ext.isEmpty(this.selectedIds[id])) {
sel.push(rec);
} else {
all = false;
}

++i;
}

if (sel.length > 0) {
this.surpressDeselection = true;
this.selModel.select(sel, false, !this.grid.selectionMemoryEvents);
this.surpressDeselection = false;
}
} else {
for (ind = 0, len = records.length; ind < len; ind++) {
var rec = records[ind],
id = rec.getId();

if ((id || id === 0) && !Ext.isEmpty(this.selectedIds[id])) {
if (this.selectedIds[id].dataIndex) {
var colIndex = cm.getHeaderIndex(cm.down('gridcolumn[dataIndex=' + this.selectedIds[id].dataIndex + ']'))
this.selModel.setCurrentPosition({
row: i,
column: colIndex
});
}
return false;
}

++i;
}
}

if (this.selModel instanceof Ext.selection.CheckboxModel) {
if (all) {
this.selModel.toggleUiHeader(true);
} else {
this.selModel.toggleUiHeader(false);
}
}

if (this.wasLocked) {
this.selModel.setLocked(true);
}
}
}
});
</script>


A header Checkbox of CheckboxSelectionModel deals with the current page only.
This override demonstrates how to take into account all the pages.
It works with local paging only. It is not going to work with remote paging.

As in my case I just wanna deals with the current page only. So if I do so I can select only 24 records i.e the records in


App.GridPanel1.getStore().data

and after selecting I click on "Delete" button on my grid. This button handler is as follows:


var records = App.GridPanel1.selModel.getSelection();
App.GridPanel1.getStore().remove(records);
App.GridPanel1.getStore().loadData(App.GridPanel1. getStore().allData.items)

After doing so I again apply quick watch to see store of my grid then the results are as follows:


App.GridPanel1.getStore().totalCount = 476 // here I have remaining 476 total records in the grid
App.GridPanel1.getStore().data.length = 24 // as I mentioned in above code my store's page size is 24
App.GridPanel1.getStore().allData.length = 26 //here I have remaining 26 filtered records


I hope that till now you understand that this is going really very smooth and working as expected.
Now the real problem is here when I try to fetch these 476 records, there is no array where I can find these records but yes I am able to see the total count of my store as 476.
FYI
1. I understand the fact that in above code I am loading the filtered records into my store.

App.GridPanel1.getStore().loadData(App.GridPanel1. getStore().allData.items)
2. I am also aware that Ext.net uses in-built feature to store the unfiltered records into an array known as "snapshot" which by the way got vanished the time when I run the code

App.GridPanel1.getStore().loadData(App.GridPanel1. getStore().allData.items)
3. I can also find those initial 500 records in proxy array

App.GridPanel1.getStore().proxy.data.items

Knowing these facts again my question is from where I can find those unfiltered 476 records, If these records also vanished then from where my store's total count is coming as 476

I hope this time you understand the problem, as the project I am working on is confidential so I cannot give you the code, but from situation above you can do a little efforts and create an identical situation in one of your example and try to figure out some solution.


Hope this makes sense!!


Thanks and Regards

geoffrey.mcgill
Feb 21, 2015, 11:36 PM
Hello zinduyaar,

Unfortunately we were unable to get your sample working. Maybe others general members within the community will be able to provide assistance.