I have two related ComboBoxes ( continents, and countries ). When the continents ComboBox changes I request a XML from a certain URL. When I receive that XML i change the DataProvider for the countries ComboBox, like this:
public function displayCountryArray( items:XMLList ):void
{
this.resellersCountryLoader.alpha = 0;
this.resellersCountry.dataProvider = items;
this.resellersCountry.dispatchEvent( new ListEvent( ListEvent.CHANGE ) );
}
I dispatch the ListEvent.CHANGE because I use it to change another ComboBox so please ignore that (and the 1st line ).
So, my problem is this: I select "ASIA" from the first continents, then the combobox DATA get's updated ( I can see that because the first ITEM is an item with the label '23 countries' ). I click the combo then I can see the countries.
NOW, I select "Africa", the first item is displayed, with the ComboBox being closed, then when I click it, the countries are still the ones from Asia. Anyway, if I click an Item in the list, then the list updates correctly, and also, it has the correct info ( as I said it affects other ComboBoxes ). SO the only problem is that the display list does not get updated.
In this function I tried these approaches
Converting XMLList to XMLCollection and even ArrayCollection
Adding this.resellersCountry.invalidateDisplayList();
Triggering events like DATA_CHANGE and UPDATE_COMPLETE
I know they don't make much sense, but I got a little desperate.
Please note that when I used 3.0.0 SDK this did not happen.
Sorry if I'm stupid, but the flex events are killing me.
Setting the dataprovider of the comboBox' dropdown seems to fix this problem.
this.resellersCountry.dataProvider = items;
this.resellersCountry.dropdown.dataProvider = items;
this.resellersCountry.dropdown.dataProvider = items;
works (Flex SDK 3.5)
Hope this bug fixed in 4.0
In addition to Christophe´s answer:
When you are using data binding in your ComboBox you need to use the BindingUtils to set the dropdown´s dataprovider:
MXML:
<mx:ComboBox id="cb_fontFamily"
width="100%"
dataProvider="{ model.fontFamilies }" />
Script:
private function init():void
{
BindingUtils.bindSetter(updateFontFamilies, model, "fontFamilies");
}
private function updateFontFamilies(fontFamilies:ArrayCollection):void
{
if (cb_fontFamily != null) cb_fontFamily.dropdown.dataProvider = fontFamilies;
}
Thanks to Christophe for pointing in the right direction.
Another workaround, outlined in an Adobe Community forum post, is to avoid re-assigning a different ArrayCollection object to the ComboBox, and instead re-using (and re-populating) the original one instead:
items.removeAll();
for each (var item:* in newItems)
{
items.addItem(item);
}
Related
Is it possible somehow to update Vuetify v-combobox items as the user is typing? I want to change the list of available items depending on what the users started typing, to create an address input with suggestions from a geolocation API.
This is what I tried: #update:search-input='fetchAddresses'
And in fetchAddresses: this.items = newListOfItems
However, while #update:search-input fires as expected, the combobox list will only be updated after losing focus. Can I somehow trigger it to be updated? (This may very well be an X/Y problem, so any hints about other approaches are welcome)
My current, ugly, hack is to force the whole combobox component to re-render with the current value set, and then refocus on it. (There is an activateMenu() method on the combobox that I could use to make sure the list reopened:
this.$nextTick(() => {
if (this.$refs.addressCombobox) {
this.$refs.addressCombobox.focus()
this.$refs.addressCombobox.activateMenu()
}
})
I'm using Vue 2.
In my case no-filter solved this problem
<v-combobox no-filter ... >
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
Actually, I'm trying to use a combo-box in Ext.Net to select a value from its selecting list. This combo-box is editable and user can type any value he want.
On selecting list, I want to prevent user from selecting the highlighted item by pressing Enter key and let him just select it by mouse click. for this, i tried to use an listener on bound list "ItemKeyDown" but it did nothing. Other events related to mouse par example, working fine but all events related to key are not working.
I don't know if i have missed something in configurations or what.
Anyone can give me any advise to make theses listeners work?
Thanks in advance,
var combo = Html.X().ComboBox().DisplayField(mark).ValueField(type).Editable(true)
.ID(combo_id).EnableKeyEvents(true).AutoSelect(false).SelectOnFocus(true)
.QueryMode(DataLoadMode.Local).ValidateOnBlur(false).ValidateOnChange(false)
.ListcConfig(Html.X().BoundList()
.Listeners(l => l.ItemKeyDown.Handler = "console.log('ItemKeyDown');")); /// ItemKeyDown not displayed in console.
I post the solution i got from Ext.Net support team so if someone need it in future:
#(Html.X().ComboBox()
.Listeners(events => {
events.Expand.Handler = #"this.listKeyNav.map.removeBinding({
key: Ext.EventObject.ENTER
});";
events.Expand.Delay = 1;
events.Expand.Single = true;
})
)
I'm getting frustrated because my store keeps getting filtered whenever I use it to back a combofield. Is there any way I can disable this?
The Scenario
I have a Store with a data field on it; an array of objects loaded when the store is instantiated. I use this store to drive a bunch of combo's in different areas of my app. Unfortunately, my combos are applying filters on the store, causing other combos using the same store to only display the filtered values later on, not the whole list.
Workarounds
My goofy workaround is to call combo.getStore().clearFilter() after I'm done with the combo, but that's going to get old very quick, and probably introduce a bug somewhere, I'm sure.
If I remove queryMode:'local' from my combo's config, all is well, except that now the handy type-ahead feature no longer works; I'm just shown a list of items in a drop-down that I can't even navigate around my typing letters of matching items. That's worse than a regular html select tag!
Any ideas?
Thanks!
You can't do that since the filtering is applied not on the combo but on the store. You could try creating multiple instances of the same store and work with that. Though I don't know if it'll work.
Ext.create('combo', {
//other config
store : Ext.create('my.store')
});
It'll work if you make the combo non-editable since no filtering can be applied then. But, as you say, you need the type ahead feature, you'll need to create multiple instances of the store.
In light of the fact that combos will add filters on the backing store, hence affecting all combos that use the store within my application, I've opted to add an override to the combo class so it will clear the filter on the store when the combo box is destroyed.
Ext.define('MAP.override.Combo', {
override : 'Ext.form.field.ComboBox',
initComponent : function()
{
this.callParent(arguments);
this.on('beforedestroy',function(combo){
if(combo.leaveFilter === true) return;
console.log('clearing filter on store');
combo.getStore().clearFilter();
});
}
});
it's a bit of a hack, but I do allow for the escape hatch of indicating not to clear the filters, too.
The simplest way I have found to handle this solution is to add the following listener to the combo:
listeners: {
beforequery: function(queryPlan){
queryPlan.query = true;
}
}
by default queryPlan.query is the text currently in the combo field which is used for filtering. Setting it to false cancels the query, but setting it to true allows the query to go through without a filter value, therefore keeping all values in the drop down list for all combo fields.
I've had similar problem with ExtJS 4.2 and combo. Store kept being filtered but I couldn't use clearFilter() because after that combo was unusable. My solution, which worked, is this listener on combo:
listeners: {
blur: function(combo) {
if (combo.queryFilter) {
combo.queryFilter.setValue('');
combo.getStore().filter();
}
}
}
I have a Zend_Form that has 4 or more subforms.
/**
Code Snippet
**/
$bigForm = new Zend_Form();
$littleForm1 = new Form_LittleForm1();
$littleForm1->setMethod('post');
$littleForm2 = new Form_LittleForm2();
$littleForm2->setMethod('post');
$bigForm->addSubForm($littleForm1,'littleForm1',0);
$bigForm->addSubForm($littleForm2,'littleForm2',0);
On clicking the 'submit' button, I'm trying to print out the values entered into the forms, like so:
/**
Code snippet, currently not validating, just printing
**/
if($this->_request->getPost()){
$formData = array();
foreach($bigForm->getSubForms() as $subForm){
$formData = array_merge($formData, $subForm->getValues());
}
/* Testing */
echo "<pre>";
print_r($formData);
echo "</pre>";
}
The end result is that - all the elements in the form do get printed, but the values entered before posting the form don't get printed.
Any thoughts are appreciated...I have run around circles working on this!
Thanks in advance!
This is what I did -
$bigForm->addElements($littleForm1->getElements());
Then, iterated over the form elements like so:
$displayGroup1 = array();
foreach($bigForm->getElements() as $name=>$value){
array_push($displayGroup1, $name);
}
Then, add a displayGroup to $bigForm:
$bigForm->addDisplayGroup($displayGroup1, 'test',array('legend'=>'Test'));
And repeat for multiple display groups.
I'm sure there is a better way to do it, but I'm currently unable to find one out.
This is currently one way I can think of to retrieve all the form values via $_POST, if a form is made up of one or more subforms.
If any one knows of a better solution, please post it!
A Zend_Form does not automatically retrieve values from the $_POST variable. Use:
$bigform->populate($_POST)
Or alternatively:
$bigform->populate($this->_request->getPost())
Another thing to keep in mind is that if the sub forms contain elements with the same name they will clash. To check this use the option View => Page Source in your browser and look at the HTML that is generated. When you see two <input> elements with the same name attribute, then this is the problem.
The Zend solution for this is to give the sub form elements different names using setElementsBelongTo:
$littleForm1->setElementsBelongTo('littleForm1');
$littleForm2->setElementsBelongTo('littleForm2');
Furthermore you should leave out these calls as they serve no purpose (but you should set them for the $bigForm):
$littleForm->setMethod('post');