Instead of displaying it like the common Rangeselector display, is there a way to make it like a dropdown? Appreciate your help with this. Thank you.
You can use exporting module to generate a custom button with a dropdown feature. Inside exporting.buttons.toggle object you can create menuItems array which will contain list of the buttons. Each button has onclick event which will let you to call rangeSelector.clickButton(index, redraw) function, responsible for selecting a specific range. Lastly, you can hide original range selector, for example using CSS:
.highcharts-range-selector-buttons {
visibility: hidden;
}
API Reference:
http://api.highcharts.com/highstock/exporting.buttons
http://api.highcharts.com/highstock/rangeSelector
Example:
http://jsfiddle.net/8rrotg5a/
Related
How can I adjust the position of Select2 container so that the search box is position right over the original select element like in this website
http://www.jobnisit.com/en
It look cleaner in terms of UI in my opinion.
Ps. sorry, I can't post the image now.
There is 2 ways to do this.
1) With css:
.select2-dropdown--below {
top: -2.8rem; /*your input height*/
}
This will not affect a container (.select2-container), but will move dropdown and search field, so you will have a desired effect.
2) With js:
$('select').select2().on('select2:open', function() {
var container = .$('.select2-container').last();
/*Add some css-class to container or reposition it*/
});
This code attaches a handler to 'select2:open' event, which will be fired every time when user opens a dropdown. This method is better if you have more than one select on page.
Tested with select2 4.0.0
The proper way of positioning the dropdown is using the core feature provided by select2 plugin.
It provides us with 'dropdownParent' property to place to dropdown inside the particular element
select field: #edit-field-job-skillsets-tid
parent item: div.form-item-field-job-skillsets-tid
jQuery("#edit-field-job-skillsets-tid").select2(
{dropdownParent: jQuery('div.form-item-field-job-skillsets-tid')}
);
I have two angular ui-grids in one html page but I would like to remove row selection highlighting from one of them. How can I accomplish this? I tried removing the 'ui-grid-row-selected' class in ui-grid-unstable.js but then that removes the highlight for the other grid as well which I do not want. Any help would be greatly appreciated.
Just remove the ui-grid-selection attribute from the html and make enableRowSelection : false on the second grid. Those two will make sure selection is disabled on the rows.
Use this class with specific ID for the grid you want to remove highlighting.
#gridStyle .ui-grid-row.ui-grid-row-selected > [ui-grid-row] .ui-grid-cell {
background-color: #c9dde1; // Change to normal background-color to remove highlighting
}
I have a kendo ui grid on my page.
And I have a button too. I want when I click button, sortable property on a specify column disable, and when click the button again, sortable property enable.
How to I do this?
Thanks.
Runtime enabling/disabling the sorting feature of the Grid is not supported.
But you can find some approaches to achieve it here: http://www.telerik.com/forums/disable-or-remove-sortable-capability-on-column-with-rebuilding-entire-grid
Hope this link will help you.
There is no method for this - this is option which is set only upon initialziation. So you will need to re-initialize the whole Grid. Covered here.
The column.sortable option should be set to true/false depending on the button that was clicked.
You need to write an click event for a table header on javascript.This event will prevent click on table header.
$(".k-grid-header .k-link").click(function (e) {
e.preventDefault();
if ($(this).text() === Header Name) {
e.stopPropagation();
}
});
e.PreventDefault helps to avoid window jump to top when clicking #-links.
Give your headername into the if condition to which you want to disable sorting
I am trying to use the ShowHide effect that comes with Kevin Moore's widget package here:
http://dart-lang.github.io/widget.dart/#showhide
Not sure how to use this. Anyone got an example I can look at ?
Basically all I want is for a dropdown to show with one of those effects if a certain event happens.
Your tips appreciated.
Thanks.
You need to add a listener for an event to an element in the DOM, and then use ShowHide.toggle(element, effect) to trigger an effect. Here is an example which listens for a click on a button, and toggles FadeEffect on an image each time it is pressed:
var button = query("#fadeButton")
..onClick.listen((event) {
ShowHide.toggle(query("#fadeImage"), effect: new FadeEffect());
});
If you wanted to fade in/out a dropdown when you click on a menu bar, then substitute "fadeButton" for the menu which listens for clicks, and "fadeImage" with the dropdown element.
Also, any other effect can be substituted for FadeEffect, such as DoorEffect, ScaleEffect, ShrinkEffect, etc.
I'm trying to implement a drag and drop functionality using ui-sortable. However, of the 3 <li>'s that I have, I want only the 1st and last to be able to exchange their positions, the one in the center should maintain it's position. Is there a way to achieve this?
You can specify the appropriate selector in the items options:
$("#yourElement").sortable({
items: "li:first-child, li:last-child"
});