I am using the Jquery UI datetimepicker (http://trentrichardson.com/examples/timepicker/ )
I need to show the seconds slider on the date time picker, dynamically based on the value of a flag.
what is the best way to enable/disable or show/hide the second's slider?
What I am looking for is a way to set "showSecond" option dynamically.
Got it with a little digging, I was able to do it as below.
Add beforeShow method while initiliazing the datetimepicker.
update the showSecond flag inside the beforeShow method.
$('#datepicker')
.datetimepicker({beforeShow: beforeShowFn});
function beforeShowFn(input, dp_inst) {
dp_inst.settings.showSecond = false
}
Not sure if there is a better way.
Related
Problem: can't trigger Vue-Select3 item dropdown selection programmatically in unit-tests.
I have tried with both vue-test-utils and #testing-library/vue as well as triggering a click event programmatically in a browser to force list item selection. However, none of these worked. The only way I managed to trigger selection is by getting a VueSelect instance and emitting 'input' event. I also tried to trigger different events on dropdown container, etc.
// Failed
// testing-library
const dropdownItem = getAllByTestId('dropdown-item')
fireEvent.click(dropdownItem[0])
// test-utils
wrapper.find('[data-testid=dropdown-item]').trigger('click')
// In browser
document.querySelectorAll('.vs__dropdown-item')[0].click()
// Success
wrapper.find(VueSelect).vm.$emit('input', payload)
Current result: When a click event is triggered nothing happens.
Expected result: When a click event is triggered Vue-Select should select the item and emit 'input' event.
I found a way of selecting an option directly. You can use the select function of the VueSelect component, like that:
const wrapper = mount(YourComponent)
const vueSelect = wrapper.find(VueSelect)
vueSelect.vm.select(yourOptionToSelect)
That will work if you just want to select a specific option.
But yes, if you want to simulate the click on one of the options, that would not be helpful. And I know that this way of changing the state of a component is not the preferred way of doing this, but it is the only solution I've found.
I have a web app in which there are two components - date picker and button.
When I select a date from date-picker, the button's title and color should change.
This is my hbs code where two components are given:
{{bootstrap-datepicker value=expiresAt todayHighlight=true todayBtn=true startDate=startDate changeDate="changeDateAction" autoclose=true}}
{{button-custom title="Previous Date" startDate=startDate status=1 id="button1"}}
The button-custom is created by me.
When I select a date, the function in datepicker named changeDateAction() will be called. I have a function in button component's controller, named changeValues() which when called will do my task.
How can I call changeValues() (which is in button-custom.js) from changeDateAction() which is in another file?
Please be as simple as possible as I'm beginner in Ember JS. Thanks in advance.
It seems like you'd like to inform a component (button-custom) about a change in a sibling component (bootstrap-datepicker). You've already set up an action handler (changeDateAction) that informs the parent component/controller about the change. In order to propagate that change to button-custom, I'd suggest to just pass the effect you'd like to achieve down to it:
{{bootstrap-datepicker changeDate="changeDateAction" (...)}}
{{button-custom title=title color=color (...)}}
Like this, you can control the appearance of the button from the outside by modifying title and color. Like that, the logic is moved to the parent component/controller, and the button component becomes a "dumb" presentational component.
The basic concept behind this is called "Data down, Actions up" (DDAU), and i'd highly recommend to read up on it (for example here if you're learning Ember!
Let's say that I have a group of radio items in a wxMenu. I know that exactly one of these will be checked at any given time.
Does the wxMenu or some other construct hold onto the index of the checked item, or do I need to call the isChecked on each radio item till I find the checked element to find it's index?
I've asked this question about how to do that, but I'd much prefer wxWidgets saved me from doing that everywhere.
No, saving the index of the last selected item (as shown in ravenspoint's answer) or using wxMenuBarBase::IsChecked() until you find the selected radio button is the only way to do it.
For wxWidgets to provide access to the currently selected button it would need not only to store it (which means not forgetting to update not only when the selected changes, but also when items are inserted into/deleted from the menu, so it's already not completely trivial), but to somehow provide access to the radio items group you're interested in, which would require being able to identify it and currently there is no way to do it and adding it isn't going to be particularly simple.
What could be done easily, however, is writing a reusable function int GetIndexOfSelectedRadioItem(int firstItem) that would start at the given item and call IsChecked() on subsequent items until it returns true and return the offset of the item. You should be able to do it in your own code, but if you'd like to include such function in wxWidgets itself (as a static wxMenuBar method, probably), please don't hesitate to send patches/pull requests doing it!
It is easy enough to roll your own.
Bind an event handler to wxEVT_COMMAND_RADIOBUTTON_SELECTED for every button. In the handler, extract the ID of the selected radio button and store it somewhere.
Like this:
ResolMenu = new wxMenu();
ResolMenu->AppendRadioItem(idRcvLoRez,"Low Resolution");
ResolMenu->AppendRadioItem(idRcvMeRez,"Medium Resolution");
ResolMenu->AppendRadioItem(idRcvHiRez,"High Resolution");
ResolMenu->Check( idRcvLoRez, true );
Bind(wxEVT_MENU,&cFrame::onRcvRez,this,idRcvLoRez);
Bind(wxEVT_MENU,&cFrame::onRcvRez,this,idRcvMeRez);
Bind(wxEVT_MENU,&cFrame::onRcvRez,this,idRcvHiRez);
void onRcvRez( wxCommandEvent& event )
{
myRezID = event.GetId();
Do Raphael sets accept event handler? When I set an event handler on a raphael set, it seems that it is instead assigned on each of the Raphael shapes inside the set and not on the set itself as you can see here if you try to click the set:
http://jsbin.com/aponen/3/edit
I'm not interested in various hacks such as chaining elements inside a set with the set itself via custom attributes or similar approaches.
Thanks
Yes, the event handler is applied to each object individually -- Raphael does not make use of the <g> element of SVG. However, you can fix your issue here with a few keystrokes:
set.push(rect);
set.push(circle);
set.attr({'fill': 'yellow'});
set.click(function(evt) {
//old
this.attr({'fill': 'red'});
//new
set.attr({'fill': 'red'});
});
The biggest difference in the way it works and the way you thought it might work is the meaning of "this" inside the handler. Changing it to "set" will fix that right up.
UPDATE, Jan. 26, 2013
Per comments, you could also attach the set to the children of the set with one line, using Raphael's "data" method:
set.push(rect);
set.push(circle);
set.data('myset', set);
set.attr({'fill': 'yellow'});
set.click(function(evt) {
this.data('myset').attr({'fill': 'red'});
});
I don't believe there is a native way to access the set from children, but I could be missing it.
I have this code, which works fine if a cell in the IgGrid control is being edited:
var verticalContainer = $("#BookLabor_scrollContainer");
var topPos = verticalContainer.scrollTop();
$("#BookLabor").igGrid("option", "dataSource", blankLaborDS);
$('#BookLabor').igGrid('dataBind');
verticalContainer.scrollTop(topPos);
However, when I use an IgDialog that I have pop open on a grid cell with a button click event, this is not scrolling back to the row being edited:
var verticalContainer = $("#BookLabor_scrollContainer");
var topPos = verticalContainer.scrollTop();
$("#BookLabor").igGrid("option", "dataSource", blankLaborDS);
$('#BookLabor').igGrid('dataBind');
verticalContainer.scrollTop(topPos);
There is a virtual scroll method for the IgGrid, but the online documentation does not explain in detail how to use it.
Any tricks, tips, hints from all you Infragistics experts out there?
The scroll related API is very basic and what you are using is pretty much comparable:
.igGrid("scrollContainer") is merely a shorthand so you don't have to use #BookLabor_scrollContainer (it's an internal id)
.igGrid("virtualScrollTo", scrollContainerTop); is just like scroll top when you are using virtual scrolling, which you might be (can't tell without more code) so you might want to try that out.
HOWEVER, is there a reason to call dataBind after cell edit? ( I'm having a hard time finding a scenario for that). It is not intended by any means and it creates a lot of overhead with bigger data. If you need to update cell values you should be using the Updating API that does not require re-bind and will not require scroll after as well..see:
http://help.infragistics.com/jQuery/2012.2/ui.iggridupdating#methods
As for the dialog, the Updating again provides a row template that internally uses the dialog and I highly recommend that if row editing is acceptable. Sample:
http://www.infragistics.com/products/jquery/sample/grid/row-edit-template