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
Related
I have form with many textbox and select tags. When i click the select tag its not opening the dropdown menu instead it move focus to next control that i have not selected.
This issue occurs only in iPhone.
Please anyone help me to solve this.one.
To Stop automatically closing dropdown issue or stop switching to other element issue use
preventDefault() method in touch event of the select element.
Example
$("#dropDownID").on('touchstart', function (e) {
e.preventDefault();
});
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 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 have a jqGrid which when a row is selected, a jQuery UI modal form will popup which I would like to contain the data for the selected row. The form would ideally contain the row data, a confirm button and a cancel button. Is this possible? I have tried to find an answer and haven't had any luck as of yet. The data will be carried through to another form where the values will be editable.
Thanks in advance.
I think you can use the following
onSelectRow: function (id) {
$(this).jqGrid('viewGridRow', id);
}
See the demo from the answer as an example.
I have an image that opens the jQuery UI Slider div on click and allows users to set a value by dragging the handle. What I'm trying to do now is hide that handle when the user clicks anywhere else on the page, but the regular .blur event doesn't seem to work.
$("#openPriceToSliderGif").click(function(){
$("#slider-vertical").show();
$("#slider-vertical").focus();
});
$("#slider-vertical").blur(function () {
$("#slider-vertical").hide();
});
Probably you will have a better luck on defining global onclick handler and there you need to check if source of event is not your slider. If not - do your magic.
Basically - if you spinner doesn't include element such as text field or link it will not support focus/blur
Ok, this is what I have put together to make this work.
Thanx DroidIn.net for your help.
$(document).bind("click", function(e){
if(e.target.id != "openPriceToSliderGif")
$("#slider-vertical").hide();
return false;
});
$("#openPriceToSliderGif").click(function(){
$("#slider-vertical").toggle();
});