I am finding that activateKey is not setting focus correctly depending on the key/node used. It is first setting focus but then scrolling back up to the top of the tree with the active/selected node not in view.
The fiddle below works as expected:
http://jsfiddle.net/op5ga0zf/2/
This fiddle scrolls back up to the top of the tree, the only difference is the key value being used in activateKey:
http://jsfiddle.net/op5ga0zf/3/
I get the same behaviour in all browsers, am I doing something wrong or is this a bug?
$(function() {
var $orgtree = $('#orgtree');
$orgtree.fancytree({
autoScroll: true,
activate: function(event, data) {
data.node.setSelected(!data.node.isSelected())
},
checkbox: true,
extensions: ['filter'],
filter: {
autoExpand: true,
counter: false,
mode: "hide"
},
icon: false,
init: function(event, data) {
var key = $('#OrganisationID').val();
if (key !== '') {
data.tree.activateKey(key);
}
},
select: function(event, data) {
if (data.node.isSelected()) {
$('#OrganisationID').val(data.node.key);
} else {
$('#OrganisationID').val("");
}
},
selectMode: 1,
source: treeData,
tabindex: ""
});
$('#filter-orgtree').keyup(function() {
$orgtree.fancytree("getTree").filterNodes($(this).val());
});
});
This was a bug and will be fixed with release 2.30.
Related
I have been trying to figure out what is going on but haven't yet.
Please see the code below.It is a inconsistent behavior, so I am having hard time to catch what triggers it. This grid is inside a popup, I noticed when i refresh the page and try it, it works fine on first attempt. Then i save/cancel popup and keep repeating it fails at some point and starts accumulate null rows.
I tried to check the value of the grid using
$('#gridFldListItems').data("kendoGrid").dataSource.data()
It shows there is no data but as soon as click "Add new Record" it shows 2.
It does not necessarily fail on second attempt, but it never fails on first. I suspect that everytime I open the popup it is not necessarily empty(after first few tries) and it carries some data from previous attempts. I might be wrong.
When I click add new record, it adds a line with null value and gives me an option to input on the second row.
I also When I put itemname and click update, it does not trigger the "create" event and looks like this:
At this point the grid broken. Here is the code for the grid
var grid = $("#gridFldListItems").kendoGrid({
editable: {
"confirmation": "Are you sure you want to delete this item?",
"mode": "inline",
"createAt": "bottom"
},
selectable: true,
autoBind: false,
toolbar: ["create" ],
columns: [
{ field: 'Item' },
{
command: ['edit', 'destroy',
{ iconClass: "k-icon k-i-arrow-up", click: $.proxy(this, 'selectedFieldDef_onClkMoveUp'), name: 'Up' },
{ iconClass: "k-icon k-i-arrow-down", click: $.proxy(this, 'selectedFieldDef_onClkMoveDown'), name: 'Down' }], title: ' '
}
],
dataSource: this.selectedFieldDef_dsItems,
}).data("kendoGrid");
selectedFieldDef_dsItems: new kendo.data.DataSource({
transport: {
read: function (e) {
var field = editViewModel.get("selectedFieldDef");
var mapItems = $.map(field.Items, function (item, idx) {
return {
Item: item
};
});
//on success
e.success(mapItems);
},
create: function (e) {
// on success
e.success(e.data);
},
update: function (e) {
// on success
e.success();
},
destroy: function (e) {
var vm = editViewModel;
// locate item in original datasource and remove it
var field = vm.get("selectedFieldDef");
if (field.DefaultValue && !vm.selectedFieldDef_dsItemsFindItem(vm.selectedFieldDef_dsItems.data(), field.DefaultValue)) {
field.DefaultValue = null;
vm.set("selectedFieldDef", field);
$("#inpFldRegex").kendoDropDownList().data("kendoDropDownList").trigger("change");
}
// on success
e.success();
}
},
error: function (e) {
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
schema: {
model: {
id: "Item",
fields: {
Item: { editable: true, nullable: true }
}
}
}
})
Any help would be much appreciated.
UPDATE:
It works fine when I refresh the page
I am new to ext js and I am trying to hide the fourth tab on my screen based on certain entity condition. As, I have coded I am able to disable
(blur) the 4th Setting tab, but the hidden or hide() function is failing.
Basically, I want to hide the fourth tab in items Payment.PaymentSettingsCfg on certain condition.
Any help would really appreciate, thanks in advance.
var bsdataloded = false;
Payment.PaymentSettingsCfg = {
id: 'PaymentSettingsPanel',
title: getMsg('PaymentAdmin', 'PaymentSettingsHeader'),
xtype: 'PaymentSettingsPanels',
listeners: {
activate: function() {
if (!bsdataloded) {
this.loadSettings();
bsdataloded = true;
}
}
}
}
var hidePaymentSettingcfg = false;
debugger;
if (Payment.EntitySettings &&
Payment.EntSettings["EntSITE|Payment_SWitch"] === "Y") {
Payment.PaymentSettingsCfg.disabled = true; //working
// Payment.PaymentSettingsCfg.hidden = true;// not working, even hide() not working
hidePaymentSettingcfg = true;
}
init: function() {
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
expires: null
}));
app = new Payment.admin.AppContainer({
id: 'main-panel',
title: Payment.getMsg('PaymentAdmin', 'PaymentConfHeader'),
el: 'bodydiv',
border: true,
layout: 'fit',
defaults: {
border: false
},
items: [{
xtype: 'tabpanel',
activeTab: 0,
width: 500,
deferredRender: false,
hidden: false,
defaults: {
border: false
},
items: [
Payment.PaymentItemCfg,
Payment.PaymentPeriodCfg,
Payment.PaymentTypeCfg,
Payment.PaymentSettingsCfg
]
}]
});
app.render();
}
};
}();
Here is the example to hide and show the tab based on if condition
i am hiding and showing the tab on checkbox checking but you can get your idea
i hope it will help you
here is the Fiddle...
Added the logic to the listeners and it worked.
listeners : {
afterrender : function(){
var testTab = this.getTabEl(3);
if (Payment.EntSettings["EntSITE|Payment_SWitch"] === "Y") {
testTab.hide();
}
}
}
When my checkbox jstree has finished loading, I wish to pre open the last opened nodes (not select_node). The open_node function only seems to work on the top most parent level nodes. I even tried iterating through the node and calling open_node and it still doesn't work. I have the following:
// Create instance for checkbox jstree.
$(function () {
$('#myTree').jstree({
"core": {
"themes": {
'name': 'default',
"variant": "small",
"icons": false
},
},
"checkbox": {
"keep_selected_style": false,
"three_state": false,
},
"plugins": ["checkbox"]
});
});
$("#myTree").bind('ready.jstree', function (event, data) {
var $tree = $(this);
$($tree.jstree().get_json($tree, {
"flat": true
})).each(function (index, value) {
// lastOpenedNode.value contains the id of the last opened node
if ( nodeWasLastOpened(this.id) == true)
// ONLY OPENS TOP MOST PARENT NODES
$("#myTree").jstree().open_node(this.id);
})
});
Please help.
There is a private method you could use for that, _open_to, that will open all nodes down to the one you want to be shown. Check code below and demo - Fiddle.
$("#myTree").jstree()._open_to( lastOpenedNode.value );
or
if ( nodeWasLastOpened(this.id) )
$("#myTree").jstree()._open_to( this.id );
})
Now I know what you guys were thinking when you read the title. Your probable thinking that im talking about jQuery UI draggable. But im actually talking about the plugin i'm making for the community. I am trying to create a target for my plugin. It works as you can see here:
http://jsfiddle.net/XvZLn/24/
As you can see it works fine.
First, let me explain whats suppose to happen. Well what I want, is if the element is dropped in the target...the targ.on() gets launched. This is the onTarget feature in my plugin. This and the offTarget(targ.off()) are not working in my plugin.
This is what I have in my plugin:
var targ = {
on: o.target.onTarget,
off: o.target.offTarget
};
Then my plugin setup code is:
$(document).ready(function() {
$('#drag').jDrag({
revert: false,
revertDuration: 500,
ghostDrop: false,
ghostRevert: false,
ghostOpacity: '0.50',
instantGhost: false,
activeClass: false,
handle: false,
grid: false,
cookies: false,
cookieExdate: 365,
radialDrag: false,
radius: 100,
circularOutline: false,
strictMovement: false,
distance: 0,
not: false,
containment: false,
target: {
init: '#container',
lock: false,
onTarget: function() {
$(this).hide();
},
offTarget: function() {}
},
onPickUp: function() {},
onDrop: function() {}
});
});
I don't see why it wont work.
This is my actually plugin if you want to take a look in it:
http://jsfiddle.net/ZDUZL/89/
Try:
onTarget: function() {
console.log(this);
$(this).hide();
},
You'll see that "this" isn't referring to the element, but rather the object that holds the function.
Pass the element as an argument:
if (locker === false) {
if (statement) {
targ.on(this);
lock = false;
} else {
targ.off();
lock = false;
}
}
http://jsfiddle.net/ZDUZL/91/
i m adding new jquery ui tabs to a tab
the sample page(click on Create a new Tab)
the code
$('#tabs-2').tabs(
{
load: function(e, ui)
{
$('.show_comment').die('click');
if ($('#tabs-2').tabs('option','selected') == 0)
{
$('.new_text').click(function(){
$("#tabs-2").tabs("add", 'ushout.jsp' , 'album_name' );
return false;
});
return false;
});
}
}
,
selected: 1,
fx:{height: 'toggle', duration: 'fast'},
spinner: '<em>Loading...</em>' ,
collapsible: true
});
but on selecting the tab(album_name) first time no page is displayed...
but on selecting the tab second time the page is displayed
please help
thanks
adding tabs will have this behaviour with any effects on the tabs
the line
fx:{height: 'toggle', duration: 'fast'}
is causing the problem
use with no effects
$('#tabs-2').tabs(
{
load: function(e, ui)
{
$('.show_comment').die('click');
if ($('#tabs-2').tabs('option','selected') == 0)
{
$('.new_text').click(function(){
$("#tabs-2").tabs("add", 'ushout.jsp' , 'album_name' );
return false;
});
return false;
});
}
}
,
selected: 1,
/* fx:{height: 'toggle', duration: 'fast'}, */
spinner: '<em>Loading...</em>' ,
collapsible: true
});
thanks