I am using the Kendo UI multiple select, and I want the name of the node which is currently selected when you click on it. This is not just when I click on X to remove the node, although I also want the name when I remove it.
In this example, when I click on the tags, I want the names such as "Europe" and "Africa".
I have tried this code, but it works only sometimes, and not when I click on X.
$('.k-multiselect-wrap li .k-delete').click(function() {
console.log('Select to remove it');
});
You need to use delegated events because the items are being added to the DOM after your initial binding, so regular .click event bindings won't work for any elements added in the future. For example:
$(document).on("click", "li.k-button span.k-icon.k-delete", function () {
console.log("Clicked on X: " + $(this).siblings().first().text());
});
See update jsFiddle
Related
I am using Kendo ListBox in my application where it has the two data list namely as 'fromData' and 'toData', also it has four in built button controls as tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"].
when we click on any of the button, the data rendering on the front end acts accordingly. My requirement is - I have added another check box on the page and whenever the checkbox is checked by the user I want the transferAllTo to act and all the data should be transferred from 1st list to 2nd list without clicking on the tool button. It should work only with the selection of check box.
I can see there is a method called OnRemove() which is acting when I am clicking the button from front end, so I created a method to be called on Onclick event of Checkbox and Inside that I called the OnRemove() method but it did not work.
$('#' + clientId).find('#' + fromEntitySelect).kendoListBox({
draggable: true,
dataSource: fromDataSource,
connectWith: "toEntitySelect",
dropSources: ["toEntitySelect"],
dataTextField: "Entity",
dataValueField: "EntityID",
toolbar: {
tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]
},
change: onChange,
drop: onDrop,
drag: onDrag,
dragend: onDragEnd,
remove: onRemove,
});
My requirement is - I have added another check box on the page and whenever the checkbox is checked by the user I want the transferAllTo to act and all the data should be transferred from 1st list to 2nd list without clicking on the tool button. It should work only with the selection of check box.
You can simple let jQuery click the button "transferAllTo".
As an example, go to https://demos.telerik.com/kendo-ui/listbox/index and execute $("a[data-command='transferAllTo']").click() in the browser's JavaScript console.
I want to get sorted list items from bind object using kendo ui sortable listview. please refer the sample code from below.
http://dojo.telerik.com/#lilan123/eWofa/2
One way would be to use the Kendo event that is fired on the move or change of the sortable list to set the new index value of the item in the ng-repeat that was moved.
You set the event in the "k-on-change".
<ol id="sortable" kendo-sortable k-options="sortableOptions" k-on-change="change(kendoEvent)">
Then you add the event to the scope.
$scope.change = function(e) {
console.log(e);
alert("The e object has stuff like the old index:" + e.oldIndex);
//Get the correct item from the bound list based on index and change the index values in the list to match.
}
It seems like a hack, but then again, it always felt like a hack when using Telerik controls.
Here is a good blog post on using the events with angular, and what they claim are best practices. Hope it helps!
When you click on a row in jqgrid it gets "selected" (applies some coloring and styles), other "selected" rows get deselected. However, when I click on an input button element in one of the cells in a row nothing happens... the row is not "selected". How would I make the clicking of this button (or link or whatever) cause the row to be "selected" (and deselected when a different row is clicked)?
Solution:
In the gridComplete method of jqgrid I can attach a click handler to each button, get the ID of the button's parent row and then call jqgrid's setSelection method on it, passing in the required row id as a parameter.
$('#mygrid').find('input[type=button]').each(function() {
$(this).click(function(){
var therowid = $(this).parents('tr:last').attr('id');
$('#mygrid').jqGrid('setSelection', therowid );
});
});
On "tricky" thing about this is that instruction on the jqgrid website show two different ways to go about doing this. The above uses the new API which does things rather differently so you will find a mix of suggestions online that switch between this new API and the older one.
My page is divided into two parts vertically.Left part is like a menu section. Clicking on
any menu brings the proper data related to that menu in the right part of the page. I am
doing it using ajax call and the only div on the right part get refreshed. I am using jquery click event for that ..
say:
$("#left_part").click(function() { // ajax call here });
Now I have some more jquery action on the right part. (say Show hide some div which also work on click event.)
But when new div reloads on the right part those click event on the right part is not working.
But when I bind the click event it works.
say:
$("#some_right_part").click(function() {/ some hide show here )}; Not working
$("#some_right_part").bind('click', function(event){ // some hide show here )}; works fine
Important: When I am on fresh page (no ajax call yet to bring right part) $("#some_right_part").click(function() {/ some hide show here )}; works fine.
But what I know is: $().click(function) calls $().bind('click',function)
So, What is the reason behind this? Or What is the perfect way to solve such problem
Thanks
When you assign a click event via $().click when the page loads, the click event is bound to all matching elements. However, when you do the ajax call and recieve new markup - the new elements are not bound to the click event because they did not exist when you first called $().click.
There is a way to get a click event to be bound to all elements and all future elements that may be created. You must use the live method like so:
$('#elements').live('click', function() {
// do logic
});
I try to implement the link from one grid to the modal dialog of another grid. I made an example
to illustrate this problem. If you choose in a context menu (right mouseclick) of each row of the picture grid, you will find some Actions. One of them is "Go to scan info". Here I would like to have a link to modal dialog of grid "Scans" and modal dialog should put the user depending whether the scan record for the selected picture allready exist or not, to the Add/Edit modal dialog.
Does anybody already implemented something like that?
Let us we have two grids on one page: one with id="grid" and another with id="scan". Exactly like you call jQuery('#grid').jqGrid('editGridRow',id) on double-click on the first grid you can call jQuery('#scan').jqGrid('editGridRow',id) in the context menu "Go to scan info". The only thing which you have to know is to know the ids on the second grid. Before calling of jQuery('#scan').jqGrid('editGridRow',id) you can impelemt any additional logic (like testing whether "the scan record for the selected picture allready exist or not").
If I understand, you need insert another jqgrid into modal dialog. Did you try to insert jqgrid function into open event of jquery dialog?
You have to call jqgrid function on demand, not in document.ready statement in this case.
Imo this could work (not tested yet):
$( ".selector" ).dialog({
open: function(event, ui) {
$("#grid").jqGrid({
... all of options...
});
}
});