Fuel UX Tree get unselected data - javascript

I Use Fuel UX tree plugin. And I need to get information about unselected item when mouse click.
At first, all items in tree are selected, and when I click on tree item, it's become unselected, but I cannot get information about this item, because this code:
$('#tree1').on('selected', function (evt, data) {
console.log(data);
}
returned only selected items. Are the way to get information about unselected items in tree?

I added an additional "unselected" event into my copy of the fuelUX code around line 100...
if($el.hasClass('tree-selected')) {
this.$element.trigger('unselected', {info: $el.data()});
$el.removeClass('tree-selected');
$el.find('i').removeClass(this.options['selected-icon']).addClass(this.options['unselected-icon']);
} else {
...
This sends me the data associated with the unselected item as well. Hope it helps you.

Related

AG-Grid Distinguish Row Selections

I had a question regarding AG-grid that I'm not sure about.
For example, if I have the following grid.
Where each row has 2 distinctive checkboxes (master record and child record), is there a way to distinguish between when I select the master record as opposed to the child record on that row?
Thank you for your help! :D
Consuming the onCellClicked event will provide you with the necessary column info. You will probably want to exclude grouped columns - see the example below.
gridOptions.onCellClicked = function(params) {
// indicates whether the selected node is a grouped node
if (params.node.group) {
return;
}
// logs the selected column
console.log(params.column.colId);
}

How to choose a specific status list Jquery

please I have a drop down list like
creation
creation from scratch
creation without data
creation pay
modification
modification/specific
modification/clean
and this script
function checkTicketType(tipo) {
console.log("Tipo cambia: "+tipo);
if (tipo.indexOf('Creation')>-1) {
$('#itemId').parent().show(500);
}
else if (tipo.indexOf('Modification')>-1) {
$('#itemId').parent().hide(500);
}
}
When the creation status are selected the itemId box appear, desappear when the modifications are selected.
My problem I want to use the itemId (it can appear only if the status "modification/specific" is selected no more).
Thank you in advance.
Attach change event to select dropdown. Check for selected text on change event.
If it contains modification hide the itemId box (assuming its text input) else if it contains creation show it.
//Change event for dropdown with id ddForEg
$("#ddForEg").change(function(){
if($("#ddForEg option:selected").text().includes('modification'))
{
alert($("#ddForEg option:selected").text());
$('#itemId').hide();
alert($("#ddForEg").val()); //Another way to see value selected. If you assign value to options. No string operations required in that case.
}
else if($("#ddForEg option:selected").text().includes('creation'))
{
$('#itemId').show();
}
})
Fiddle: https://jsfiddle.net/mwoavoqd/

Sencha ExtJS 4.2: how can I synchronize two combo editors in a grid?

I need to edit two columns of my grid using combos as editors, and I need the values shown in the second to be filtered accordingly to the value selected in the first one.
There is also the problem that I need to show the "bound" value (i.e. "description") instead of the Id, in the grid cell.
I prepared a (very simplified) fiddle to show the problem here
Click here for the fiddle
Looking at the fiddle, I'd need to select the brand in the first combo and then a model in the second, but I should obviously find only the models from the selected brand in there.
How can I show the descriptive text in the cell?
How can I filter the second combo?
Thanks
The editing plugin has an beforeedit event you can use, for example:
listeners: {
beforeedit: function(editor, context) {
var record = context.record;
if (context.field !== 'modelId') {
return;
}
models.clearFilter(true);
models.filter({
property: 'brandId',
value: record.getId()
});
}
}
Working example: https://fiddle.sencha.com/#fiddle/12hn

Moving element from position to position with jquery/angular

Well the problem is quite simple...
I have an array of movies div (image and desc) written with a simple ng-repeat...
Now when i choose one of them i want to do the following (A game of positions i suppose):
1)I want to take out that element from the array and with a smooth animation to enlarge it to some other place in the screen, without breaking the order of that array.
2)when i choose another film, i want that one that i selected before to get back to where it was, following my newly selected film to take the space of the one before it:
here is a simple practice page i created so someone can dig it more:
http://single.org.il/
(just press on one of the categories up there,a list of movies will appear down at the bottom of the page, the black screen in the middle is where i want my selected film to enter, it's allready happening but it breaks, a lot)
Thank you very much!
I recommend including the selection state as part of the data model, then binding the view based on the selection data. The important points being:
Track the selected item as part of the $scope, and selection state as part of the item data
Filter selected items out of the navigation list
Bind the detail view to the selected item
I created a simplistic jsfiddle to demonstrate the concept, http://jsfiddle.net/ZLvQD/1/. The key code points include the filtered navigation list:
<div ng-controller="ListController">
<ul>
<li ng-repeat="item in itemList | filter:{isSelected:false}"
ng-class="{selected: item.isSelected}" ng-click="select(item)">
{{item.desc}}</li>
</ul>
<div ng-hide="!selectedItem">
<hr/>
The selected item is:
<p class="selected">{{selectedItem.desc}}</p>
</div>
the data model including selection state:
$scope.itemList = [
{
"desc": "Item A",
"isSelected": false
},
...
and the controller tracking selection state:
$scope.selectedItem = null;
$scope.select = function(selectedItem) {
// Deselect existing
if ($scope.selectedItem) {
$scope.selectedItem.isSelected = false;
}
// Select new
selectedItem.isSelected = true;
$scope.selectedItem = selectedItem;
};
I'm afraid I do not know anything about the animation part.

select items in kendo list view via jQuery

I have a kendo list view to display candidate information, I need to select candidate items in the list view on data bound event based on a Boolean property "IsPerfectMatch" in the data item. The code is as below:
function onDataBound(){
var lisView = this;
$.each($("#dupCheckList").data("kendoListView").dataSource.data(),
function(index, item){
if(item.IsPerfectMatch){
listView.select(this);
}
});
}
When I debugged, I can see things working until the if block that checks "item.IsPerfectMatch" but the line of code "listView.select(this);" is not selecting the list item.
Please suggest where could I be going wrong.
Also, I have set the list view selection mode to multiple for this list view. I would want to disallow selection of only the first item in the list. In other words, apart from the first item in the list view, all other items are selectable. Please suggest with sample jQuery code on how to achieve it.
Thanks and regards,
Damodar
ListView items are NOT the DataSource entries, so the value you're sending to the select() method is invalid. To iterate over the viewable children you will have to use the element.children() call.
var listView = this;
$.each(this.element.children(), function(index, item) {
if (listView.dataSource.getByUid(item.dataset.uid).IsPerfectMatch) {
listView.select(item);
}
}

Categories