I am trying to implement an autocomplete field. The results are to be shown in a list. But everytime I make a search the new result is appended to the previous results. I tried clearing out the store attached to the list but it didn't work.
In debugger the store shows 2 items while the list shows many items (2 new + the items from previous search results)
Here is the fix:
list.refresh()
After removing the items from the attached store you need to refresh the list to tell it to load itself again.
try calling removeAll() on your store.
Eg.: Just to be sure check before removing
var isStoreLoaded =Ext.getStore("theStore").isLoaded( );
if(isStoreLoaded)
{
Ext.getStore("storeBomSearch").removeAll();
}
I hope this is a normal store, not a treeStore.
Related
Here Select2.vue comp source: https://pastebin.com/zKvaaDS9
Here ItemDetail.vue page source: https://pastebin.com/gL7a75hH
I use select2 in VueJS, which I created based on VueJS documentation and other resource. Everything seems work fine. But, sometimes tag or selected is not selecting correct which after I debug I found it sometimes undefined, [], or ''(empty).
I highly suspect this because async. Here what I want to archive: I want to show all units that support an item.
AJAX: api for get units
AJAX: api for get an item detail. Data item, include current units that support for this item.
Load select2 units based on item.units and units. Sometimes is workfine but sometimes is not.
Here some explaination what I do
// Calling item detail(ASYNC)
// api/item/detail/:id
var item = getItemDetail()
// Calling ajax units(ASYNC)
// api/category?group_by=units
var units = getUnits();
Hopely would arrange select2 type=tags would render correctly based on item.units(for v-model) and units for available in dropdown menu.
It seems not render correctly when:
Select2 render without options and value(ajax not complete for item and units)
AJAX Item finish first
AJAX Units finish last
When I debug, it seems select2 updated v-model with empty value because nothing match in select items with v-model value. So for example:
item.units = [1,2,3];
units = []; // Because not ready yet
$(this.$el).val(); // Return empty array or something
I tried correct the order something like this:
Select2 render without options and value(ajax not complete for item and units)
AJAX Units finish last, wait until finish and go to step 3
AJAX Item finish first
This work perfectly.
The question is: Is it possible to run async and render select2 perfectly without thinking about ajax order or wait to complate first?
I think you could solve this in two ways.
You could store the value in a separate property of your select2 wrapper component, when the options changed, make sure to reapply your value to select2. This way, even if select2 sets value to empty, you will reset the original value after ajax finishes loading.
When the value changes and select 2 have no options loaded, create one option just so it won't set the value to empty. When your options finish loading, it will replace all items from select2 with ajax loaded ones.
// Option 2: this would go inside Watch for value property
// Note that this works for a single select, for tags, the idea is the same
// but you will have to create all the tags.
const select = $(this.$refs.select2);
if (select.find(`option[value="${value}"]`).length === 0) {
select.append(
$("<option>")
.val(value)
.text(this.displayText || "")
);
}
I've used option 2 at work (sorry, can't share the full code) and it worked. If it is unclear for you with just the snipped above, I can try and provide more details.
Using Vuetify Data Tables, I'm trying to figure out if there's a way to determine what page the current selected item is on, then jump to that page. My use case for this is, I'm pulling data out of the route to determine which item was selected in a Data Table so when a user follows that URL or refreshes the page that same item is automatically selected for them. This is working just fine, however, I can't figure out how to get the Data Table to display the correct page of the selection.
For example, user visits mysite.com/11
The Data Table shows 10 items per page.
When the user enters the site, item #11 is currently auto-selected, but it is on the 2nd page of items. How can I get this to show items 11-20 on page load?
I ended up using a solution similar to what #ExcessJudgement posted. Thank you for putting that code pen together, BTW! I created this function:
jumpToSelection: function(){
this.$nextTick(() => {
let selected = this.selected[0];
let page = Math.ceil((this.products.indexOf(selected) + 1) / this.pagination.rowsPerPage);
this.pagination.sortBy = "id";
this.$nextTick(() => {
this.pagination.page = page;
});
});
}
I'm not sure why I needed to put this into a $nextTick(), but it would not work otherwise. If anybody has any insight into this, it would be useful to know why this is the case.
The second $nextTick() was needed because updating the sortBy, then the page was causing the page to not update, and since I'm finding the page based on the ID, I need to make sure it's sorted properly before jumping pages. A bit convoluted, but it's working.
I wrapped my gridview with Pjax widget like this
\yii\widgets\Pjax::begin();
gridview
\yii\widgets\Pjax::end();
in order to make the gridview make ajax request when I click on each pagination.
I also use ['class' => 'yii\grid\CheckboxColumn'], in column as well.
and I find that when I'm on first pagination I checked some rows and then go to second page and check some rows but when I go back to first page what I've checked is gone.
My question is how can I keep all checkedrow for all pagination
With current conditions (Pjax, multiple pages, yii\grid\CheckboxColumn) it's impossible because of the way it works.
When you click on the pagination links all GridView html content is replaced by new one that comes from the AJAX response.
So obviously all selected checkboxes on the previous page are gone.
Few possible ways to solve that:
1) Write custom javascript and server side logic.
As one of the options, you can send AJAX request to server with parameter meaning that user has chosen to select all data for the bulk delete operation (or use separate controller action for bulk deletion). In this case actually we don't need to get the selected data from user, because we can simply get them from database (credits - Seng).
2) Increase number of displayed rows per page.
3) Use infinite scroll extension, for example this.
4) Break desired action in several iterations:
select needed rows on first page, do action (for example, delete).
repeat this again for other pages.
You can get selected rows like that:
$('#your-grid-view').yiiGridView('getSelectedRows');
[infinite scroll] : http://kop.github.io/yii2-scroll-pager/ will work good if you do not have any pjax filters. If you have filters also in play, do not use this plugin as it does not support pjax filters with it. For rest of the applications it is perfect to use.
Update1 : it seems to be straight forward than expected, here is the how I accomplished it
Add following lines to the checkbox column
'checkboxOptions' => function($data){
return ['id' => $data->id, 'onClick' => 'selectedRow(this)'];
}
Now add following JS to the common js file you will have in your project of the page where this datagrid resides
var selectedItems=[]; //global variable
/**
* Store the value of the selected row or delete it if it is unselected
*
* #param {checkbox} ele
*/
function selectedRow(ele){
if($(ele).is(':checked')) {
//push the element
if(!selectedItems.includes($(ele).attr('id'))) {
selectedItems.push($(ele).attr('id'));
}
} else {
//pop the element
if(selectedItems.includes($(ele).attr('id'))) {
selectedItems.pop($(ele).attr('id'));
}
}
}
Above function will store the selected row ids in the global variable array
Now add following lines to pjax:end event handler
$(document).on('pjax:end', function () {
//Select the already selected items on the grid view
if(!empty(selectedItems)){
$.each(selectedItems, function (index,value) {
$("#"+value).attr('checked',true);
});
}
});
Hope it helps.
I just solved this problem and it works properly with Pjax.
You may use my CheckboxColumn. I hope this can help. The checked items are recorded with cookies.
You can read the part with //add by hezll to understand how to fix it, because I didn't provide a complete general one.
Hope it works for you.
https://owncloud.xiwangkt.com/index.php/s/dGH3fezC5MGCx4H
I have a grouped Checkbox, and it has 4 checkboxes in it.
When the user selects a checkbox I need to filter a data store based on the value of the text box. When i select 2 textboxes, I get the output of ["Albert","Francis"], and when I select only the 1st textbox I get ["Albert"] and so forth.
Now, i need to know how to filter this ?
onCheckBoxGroupChange : function (field,newValue,oldValue,options) {
var chkv=newValue.chb;
console.log (chkv);
var st= Ext.getStore('People');
st.on('load', function() {
st.filter({
filterFn: function(rec) {
return rec.get('name') == chkv;
The problem I am having is, when I select both the CheckBoxes, chkv becomes ["Albert","Francis"] (Like an array), therefore I am unable to return the value since rec.get('name') == chkv; doesn't look for an array.
Can someone help me?
what about:
filterFn: function(rec) {
return Ext.Array.contains(chkv, rec.get('name'));
}
I want to make sure you know that you do not have to reload the store if you want to filter it. It looks like that is what you are doing in the snippet you provided above.
There are other problems actually, what your onCheckBoxGroupChange handler will actually do (if you leave it the way you have it above), is the following:
Every time a user clicks a checkbox it will first reload the store from the server, and then add the selected filter to the store's filters and then filter the store by the filters it has saved.
E.g.:
User clicks "Albert" checkbox
Store reloads
Store adds `["Albert"]` filter function
Store performs filtering with `["Albert"]` filter function
User clicks "Francis" checkbox
Store reloads
Store adds `["Albert", "Francis"]` filter function
Store performs filtering with `["Albert"]` filter function
Store performs filtering with `["Albert", "Francis"]` filter function
User unclicks "Albert" checkbox
Store reloads
Store adds `["Francis"]` filter function
Store performs filtering with `["Albert"]` filter function
Store performs filtering with `["Albert", "Francis"]` filter function
Store performs filtering with `["Francis"]` filter function
You would just progressively get more and more filters. Plus unnecessarily reloading the store many times. I don't think that is what you are going for.
You should review the docs on datastore filtering for more data on how to go about this.
Also, in your question you said that you had this problem when you selected two checkboxes because it returned an array. According to the text of your question you are also getting an array when you select one checkbox (["Albert"]). It only has one item in it but it is an array.
That is why my solution (which requires your chkv variable to be an array) would work.
I'm using a NestedList with a underlying TreeStore. Now I want to add items to the NestedList as leafs.
How can I do this?
Currently my code (Controller, onAddButtonTapped) looks like this:
var store = Ext.getStore('menuStore');
var customerAreaNode = store.getRoot().getChildAt(1);
customerAreaNode.appendChild({name: "text", leaf:true});
customerAreaNode.expand();
store.sync();
This code results in two new empty listentries on leaf level (behind the correct node) and one new listentry on node level.
Every new entry has no names shown in the NestedList but every item contains "text" in their name field. Curiously one of the new entries at leaf level is not typed to the underlying Model. So the model-corresponding methods could't be found:
Uncaught TypeError: Cannot call method 'getSelectedName' of undefined
Does anybody know a easy tutorial how to add data into NestedList/TreeStore? I could not find one good example in the sencha touch docs.
The default display field for leaf items is "text". You can get the information from here. If you want to use "text" as display field, then you need to change this line to
customerAreaNode.appendChild({text: "text", leaf:true});
Or you can change your nested list's display field, so your model do not need to change for this time.
yournestedlist.setDisplayField('name');
Hope this helps.
In my case i used to update root and child nodes like the following way
Ext.getStore('Contactsstore').getAt(1).getChildAt(0).set('Email',contactemail);
Ext.getStore('Contactsstore').getAt(1).set('ContactTitle',contacttitle);