This is similar to the question here - <select> change event not fired when using keyboard
I am looking for a KendoUI specific answer.
Using the KendoDropDownList (and KendoComboBox, KendoAutoComplete, etc.) the 'select' event only fires when a user uses the mouse to select an item from the popup list.
I find this very counter-intuitive, is there a provided fix, workaround or other solution for this?
If the list is expanded, using the Enter key fires the select event. To expand the list via keyboard use ALT+↓. If you want the arrow keys to fire it, you would have to trigger the select event as part of the change event.
var ddl, $log;
$(function () {
$log = $('#log');
ddl = $("#dropdownlist").kendoDropDownList({
change: onChange,
select: onSelect
}).data('kendoDropDownList');
});
function onChange(e) {
$log.prepend("<div>event :: change (" + this.text() + ' : ' + this.value() + ")</div>" );
ddl.trigger('select');
}
function onSelect(e) {
$log.prepend("<div>event :: select (" + this.text() + ' : ' + this.value() + ")</div>" );
}
Fiddle here
Related
I am using jqGRid with subgrid configuration to display my data. I would like to have global expand & collapse button to display or hide all subgrid information. Does jqGrid library provide this feature by any means?
jqGrid has no "Expand/Collapse all". I modified the demo from the old answer which demonstrates creating on grid with local subgrids. The resulting demo you can see here:
and it has additional "+" button in the column header of "subgrids" column. If one clicks on the button all subgrids will be expanded:
I used the following code in the demo:
var subGridOptions = $grid.jqGrid("getGridParam", "subGridOptions"),
plusIcon = subGridOptions.plusicon,
minusIcon = subGridOptions.minusicon,
expandAllTitle = "Expand all subgrids",
collapseAllTitle = "Collapse all subgrids";
$("#jqgh_" + $grid[0].id + "_subgrid")
.html('<a style="cursor: pointer;"><span class="ui-icon ' + plusIcon +
'" title="' + expandAllTitle + '"></span></a>')
.click(function () {
var $spanIcon = $(this).find(">a>span"),
$body = $(this).closest(".ui-jqgrid-view")
.find(">.ui-jqgrid-bdiv>div>.ui-jqgrid-btable>tbody");
if ($spanIcon.hasClass(plusIcon)) {
$spanIcon.removeClass(plusIcon)
.addClass(minusIcon)
.attr("title", collapseAllTitle);
$body.find(">tr.jqgrow>td.sgcollapsed")
.click();
} else {
$spanIcon.removeClass(minusIcon)
.addClass(plusIcon)
.attr("title", expandAllTitle);
$body.find(">tr.jqgrow>td.sgexpanded")
.click();
}
});
You can simply make it to behave like as toggle as follows.
Take a button.
onlick of it call the function, say toggleSubgrid();
function toggleSubgrid(){
if($('#YOURGRIDID td').hasClass('sgexpanded')){
$('.ui-icon-minus').trigger('click');
}
else if($('#YOURGRIDID td').hasClass('sgcollapsed')){
$('.ui-icon-plus').trigger('click');
}
}
This will work for all rows that are already loaded. You might need to scope the selector a bit, as fits your needs.
function expandAll () {
$( ".tree-plus" ).click();
};
function collapseAll () {
$( ".tree-minus" ).click();
};
i am trying kendo kendoColorPicker.
with change Events.
when change color and click on apply button its work.(change the font color).
but i want to set if click on cancel button then set default font color.
any idea how its done.
this is simple try.
<div id="example" class="k-content">
<label for="hsv-picker">Font:</label>
<input type="color" id="picker" value="#000000" data-role="colorpicker">
<script>
kendo.init($("#example"));
$("#picker").each(function(){
var colorPicker = $(this).data("kendoColorPicker");
colorPicker.bind({
change: function(e) {
$("#example").css("color",e.value);
console.log("Change in picker #" + this.element.attr("id") + " :: " + e.value);
}
});
});
</script>
</div>
thanks in advance.
By default, the cancel button will revert the color to the previous value so I am not sure that it is necessary for you to control cancel button clicks. You could just set the initial value of the picker to your desired default value.
However, you'll want to use the close event. Here is an example.
$('#hsv-picker').kendoColorPicker({
select: function (e) {
log("Select in picker #" + this.element.attr("id") + " :: " + e.value);
},
change: function (e) {
log("Change in picker #" + this.element.attr("id") + " :: " + e.value);
},
open: function () {
log("Open in picker #" + this.element.attr("id"));
},
close: function (e) {
log("Close in picker #" + this.element.attr("id"));
}
});
Close fires any time the control was closed, regardless of whether change occurred or not. To capture only cancel clicks you'd have to either setup a delegate click event or use some flags between the open, change, and close events. Here's an example of handling the delegate click event.
$('body').on('click', '.k-controls button.cancel', function(){
alert('Cancel clicked');
});
Here's a fiddle.
I'm trying to send data to the server via Backbone if the users writes or paste a string inside an input text element.
in the Backbone events I thought something like this but it doesn't work:
events:{
"click .close":"closeResults",
"keypress input":"fetchData",
"paste input":"fetchData"
},
fetchData:function (e) {
var $this = this;
window.setTimeout(function () {
if ($.trim(e.target.value).length >= 3) {
console.log(e.target.value);
$this.collection.fetch({data: {limit: 10, term:$.trim(e.target.value)}});
}
}, 0);
}
If you switch to using the keyup event instead of keypress and paste, it will work for pasting via the keyboard ( ⌘ + v or Ctrl + v ) and typing normally.
If you use the input event, it will work even if you right click and paste (in addition to the same expected behavior as keyup).
More info on input:
https://developer.mozilla.org/en-US/docs/Web/API/window.oninput
use keyup and mouseleave (instead of input) event handlers so that it will also work in IE
see also How to detect right mouse click + paste using JavaScript?
events:{
"keyup input":"fetchData",
"mouseleave input":"fetchData"
},
Have a look at
e.originalEvent
_paste_plain_text : function (e) {
e.preventDefault();
var text = e.originalEvent.clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, text);
}
I have been working with the jqGrid a lot and everything works (sorting, reordering of columns, adding/remove columns in the columnChooser, reordering columns in the columnChooser, ...). However there is one minor thing.
It appears, the initial list of the colModel that I pass to the grid contains the columns in the order they are displayed including a list of the possible hidden columns, e.g. columns:
Id, Name, Date(hidden), AValue, BValue, CValue(hidden)
Now when I open the columnChooser, the visible columns are shown on the left in the expected order as they appear in the grid. The not visible columns appear on the right as: Date, CValue. If I remove all columns from the grid, then the order of the unselected columns on the right of the column chooser dialog is as defined in the colModel: Id, Name, Date, ...
I would like to see the selected columns in the order as they appear on the screen for reordering, but I would like to have the unselected columns on the right always appear in alphabetical order - is that somehow possible?
I had trouble getting this to work but eventually decided to add my own event handlers to the dialog to manually sort the right side.
//Add the button to the jqGrid toolbar
$('#MyGridId').jqGrid('navButtonAdd', '#MyGridToolbar', {
buttonicon: 'ui-icon-transferthick-e-w',
caption: 'Select Columns',
title: 'Select Columns',
onClickButton: function () {
$(this).jqGrid('columnChooser', {
done: function (perm) {
if (perm) {
this.jqGrid('remapColumns', perm, true);
}
}
});
//Setup custom event bindings and give the right side an initial sort
BindColPickerActions($.jgrid.jqID(this.id));
SortColPickerAvailable($.jgrid.jqID(this.id));
}
});
//function to add click event bindings to the dialog actions
function BindColPickerActions(gridId) {
var colpickerId = 'colchooser_' + gridId;
//When moving an item from selected to available (Hiding)
$('#' + colpickerId + ' .selected a:not(.SortModifier)').bind('click', function(){
SortColPickerAvailable(gridId);
BindColPickerActions(gridId);
});
//When moving an item from available to selected (Showing)
$('#' + colpickerId + ' .available a:not(.SortModifier)').bind('click', function(){
BindColPickerActions(gridId);
});
//add a class to the actions that have been modified to keep track
$('#colchooser_' + colpickerId + ' .available a:not(.SortModifier), #' + colpickerId + ' .available a:not(.SortModifier)').addClass('SortModifier');
}
//function to sort the available list
function SortColPickerAvailable(gridId) {
//get the list of li items
var colpickerId = 'colchooser_' + gridId;
var available = $('#' + colpickerId + ' .available .connected-list');
var li = available.children('.ui-element');
//detatch and sort the li items
li.detach().sort(function(a, b) {
return $(a).attr('title').toUpperCase().localeCompare($(b).attr('title').toUpperCase());
});
//re-attach the li items
available.append(li);
}
i have table with 4 rows and when i click on any row then a new is getting added just after row where i clicked. here i am giving my code just to show how i achieve it with jquery.
my jquery by which i adding a new row just after the row where i clicked.
$(document).ready(function () {
$("table#Table1 tr").click(function () {
var $tr = $(this).closest('tr');
var myRow = ($tr.index() + (++counter));
$(this).after("<tr ><td>" + myRow + ") </td><td><img src='Images/closelabel.png' id='imgExpandCollapse' alt='ABC' style='cursor:pointer'/></td><td>Name : New one</td><td>Desig : CEO</td></tr>");
});
});
the problem is that i am adding new row with jquery but click event is not getting attach with new. so please guide me for the best approach to attach click event with new row.
You want to use .live(..) to bind the event. This will allow dynamically generated DOM elements to use the same event.
$("table#Table1 tr").live( 'click', function () {
var $tr = $(this).closest('tr');
var myRow = ($tr.index() + (++counter));
$(this).after("<tr ><td>" + myRow + ") </td><td><img src='Images/closelabel.png' id='imgExpandCollapse' alt='ABC' style='cursor:pointer'/></td><td>Name : New one</td><td>Desig : CEO</td></tr>");
});
Try $.fn.delegate
http://api.jquery.com/delegate/
Try changing -
$("table#Table1 tr").click(function () {
to
$('table#Table1 tr').live('click', function() {
That should ensure jQuery binds the click event to all table rows, including those that are created dynamically.
Working demo - http://jsfiddle.net/w5Atk/