Looking off this example, notice how clicking on the Search button brings up a modal form with a darkened overlay behind it. Now notice how clicking on the Column Chooser button brings up a modal form but no overlay behind it.
My question is: how do I get the dark overlay to appear behind my Column Chooser popup?
There are currently undocumented option of the columnChooser:
$(this).jqGrid('columnChooser', {modal: true});
The demo demonstrate this. One can set default parameters for the columnChooser with respect of $.jgrid.col too:
$.extend(true, $.jgrid.col, {
modal: true
});
Recently I posted the suggestion to extend a little functionality of the columnChooser, but only a part of the changes are current code of the jqGrid. Nevertheless in the new version will be possible to set much more jQuery UI Dialog options with respect of new dialog_opts option. For example the usage of the following will be possible
$(this).jqGrid('columnChooser', {
dialog_opts: {
modal: true,
minWidth: 470,
show: 'blind',
hide: 'explode'
}
});
To use full features which I suggested you can just overwrite the standard implementation of columnChooser. One can do this by including the following code
$.jgrid.extend({
columnChooser : function(opts) {
var self = this;
if($("#colchooser_"+$.jgrid.jqID(self[0].p.id)).length ) { return; }
var selector = $('<div id="colchooser_'+self[0].p.id+'" style="position:relative;overflow:hidden"><div><select multiple="multiple"></select></div></div>');
var select = $('select', selector);
function insert(perm,i,v) {
if(i>=0){
var a = perm.slice();
var b = a.splice(i,Math.max(perm.length-i,i));
if(i>perm.length) { i = perm.length; }
a[i] = v;
return a.concat(b);
}
}
opts = $.extend({
"width" : 420,
"height" : 240,
"classname" : null,
"done" : function(perm) { if (perm) { self.jqGrid("remapColumns", perm, true); } },
/* msel is either the name of a ui widget class that
extends a multiselect, or a function that supports
creating a multiselect object (with no argument,
or when passed an object), and destroying it (when
passed the string "destroy"). */
"msel" : "multiselect",
/* "msel_opts" : {}, */
/* dlog is either the name of a ui widget class that
behaves in a dialog-like way, or a function, that
supports creating a dialog (when passed dlog_opts)
or destroying a dialog (when passed the string
"destroy")
*/
"dlog" : "dialog",
/* dlog_opts is either an option object to be passed
to "dlog", or (more likely) a function that creates
the options object.
The default produces a suitable options object for
ui.dialog */
"dlog_opts" : function(opts) {
var buttons = {};
buttons[opts.bSubmit] = function() {
opts.apply_perm();
opts.cleanup(false);
};
buttons[opts.bCancel] = function() {
opts.cleanup(true);
};
return $.extend(true, {
"buttons": buttons,
"close": function() {
opts.cleanup(true);
},
"modal" : opts.modal ? opts.modal : false,
"resizable": opts.resizable ? opts.resizable : true,
"width": opts.width+20,
resize: function (e, ui) {
var $container = $(this).find('>div>div.ui-multiselect'),
containerWidth = $container.width(),
containerHeight = $container.height(),
$selectedContainer = $container.find('>div.selected'),
$availableContainer = $container.find('>div.available'),
$selectedActions = $selectedContainer.find('>div.actions'),
$availableActions = $availableContainer.find('>div.actions'),
$selectedList = $selectedContainer.find('>ul.connected-list'),
$availableList = $availableContainer.find('>ul.connected-list'),
dividerLocation = opts.msel_opts.dividerLocation || $.ui.multiselect.defaults.dividerLocation;
$container.width(containerWidth); // to fix width like 398.96px
$availableContainer.width(Math.floor(containerWidth*(1-dividerLocation)));
$selectedContainer.width(containerWidth - $availableContainer.outerWidth() - ($.browser.webkit ? 1: 0));
$availableContainer.height(containerHeight);
$selectedContainer.height(containerHeight);
$selectedList.height(Math.max(containerHeight-$selectedActions.outerHeight()-1,1));
$availableList.height(Math.max(containerHeight-$availableActions.outerHeight()-1,1));
}
}, opts.dialog_opts || {});
},
/* Function to get the permutation array, and pass it to the
"done" function */
"apply_perm" : function() {
$('option',select).each(function(i) {
if (this.selected) {
self.jqGrid("showCol", colModel[this.value].name);
} else {
self.jqGrid("hideCol", colModel[this.value].name);
}
});
var perm = [];
//fixedCols.slice(0);
$('option:selected',select).each(function() { perm.push(parseInt(this.value,10)); });
$.each(perm, function() { delete colMap[colModel[parseInt(this,10)].name]; });
$.each(colMap, function() {
var ti = parseInt(this,10);
perm = insert(perm,ti,ti);
});
if (opts.done) {
opts.done.call(self, perm);
}
},
/* Function to cleanup the dialog, and select. Also calls the
done function with no permutation (to indicate that the
columnChooser was aborted */
"cleanup" : function(calldone) {
call(opts.dlog, selector, 'destroy');
call(opts.msel, select, 'destroy');
selector.remove();
if (calldone && opts.done) {
opts.done.call(self);
}
},
"msel_opts" : {}
}, $.jgrid.col, opts || {});
if($.ui) {
if ($.ui.multiselect ) {
if(opts.msel == "multiselect") {
if(!$.jgrid._multiselect) {
// should be in language file
alert("Multiselect plugin loaded after jqGrid. Please load the plugin before the jqGrid!");
return;
}
opts.msel_opts = $.extend($.ui.multiselect.defaults,opts.msel_opts);
}
}
}
if (opts.caption) {
selector.attr("title", opts.caption);
}
if (opts.classname) {
selector.addClass(opts.classname);
select.addClass(opts.classname);
}
if (opts.width) {
$(">div",selector).css({"width": opts.width,"margin":"0 auto"});
select.css("width", opts.width);
}
if (opts.height) {
$(">div",selector).css("height", opts.height);
select.css("height", opts.height - 10);
}
var colModel = self.jqGrid("getGridParam", "colModel");
var colNames = self.jqGrid("getGridParam", "colNames");
var colMap = {}, fixedCols = [];
select.empty();
$.each(colModel, function(i) {
colMap[this.name] = i;
if (this.hidedlg) {
if (!this.hidden) {
fixedCols.push(i);
}
return;
}
select.append("<option value='"+i+"' "+
(this.hidden?"":"selected='selected'")+">"+colNames[i]+"</option>");
});
function call(fn, obj) {
if (!fn) { return; }
if (typeof fn == 'string') {
if ($.fn[fn]) {
$.fn[fn].apply(obj, $.makeArray(arguments).slice(2));
}
} else if ($.isFunction(fn)) {
fn.apply(obj, $.makeArray(arguments).slice(2));
}
}
var dopts = $.isFunction(opts.dlog_opts) ? opts.dlog_opts.call(self, opts) : opts.dlog_opts;
call(opts.dlog, selector, dopts);
var mopts = $.isFunction(opts.msel_opts) ? opts.msel_opts.call(self, opts) : opts.msel_opts;
call(opts.msel, select, mopts);
// fix height of elements of the multiselect widget
var resizeSel = "#colchooser_"+$.jgrid.jqID(self[0].p.id),
$container = $(resizeSel + '>div>div.ui-multiselect'),
$selectedContainer = $(resizeSel + '>div>div.ui-multiselect>div.selected'),
$availableContainer = $(resizeSel + '>div>div.ui-multiselect>div.available'),
containerHeight,
$selectedActions = $selectedContainer.find('>div.actions'),
$availableActions = $availableContainer.find('>div.actions'),
$selectedList = $selectedContainer.find('>ul.connected-list'),
$availableList = $availableContainer.find('>ul.connected-list');
$container.height($container.parent().height()); // increase the container height
containerHeight = $container.height();
$selectedContainer.height(containerHeight);
$availableContainer.height(containerHeight);
$selectedList.height(Math.max(containerHeight-$selectedActions.outerHeight()-1,1));
$availableList.height(Math.max(containerHeight-$availableActions.outerHeight()-1,1));
// extend the list of components which will be also-resized
selector.data('dialog').uiDialog.resizable("option", "alsoResize",
resizeSel + ',' + resizeSel +'>div' + ',' + resizeSel + '>div>div.ui-multiselect');
}
});
In the case you can continue to use the original minimized version of jquery.jqGrid.min.js and the code which use can be just $(this).jqGrid('columnChooser');. Together with all default settings it will be like
$.extend(true, $.ui.multiselect, {
locale: {
addAll: 'Make all visible',
removeAll: 'Hidde All',
itemsCount: 'Avlialble Columns'
}
});
$.extend(true, $.jgrid.col, {
width: 450,
modal: true,
msel_opts: {dividerLocation: 0.5},
dialog_opts: {
minWidth: 470,
show: 'blind',
hide: 'explode'
}
});
$grid.jqGrid('navButtonAdd', '#pager', {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
$(this).jqGrid('columnChooser');
}
});
The demo demonstrate the approach. The main advantage of the changes - the really resizable Column Chooser:
UPDATED: Free jqGrid fork of jqGrid, which I develop starting with the end of 2014, contains of cause the modified code of columnChooser.
I get the following error while trying the code on the mobile device.
Result of expression 'selector.data('dialog').uiDialog' [undefined] is not an object.
The error points to the following line of code.
selector.data('dialog').uiDialog.resizable("option", "alsoResize", resizeSel + ',' + resizeSel +'>div' + ',' + resizeSel + '>div>div.ui-multiselect');
When I inspect the code, I find that the data object does not have anything called uiDialog.
just been looking thru the code, try adding this line:
jqModal : true,
to this code:
$grid.jqGrid('navButtonAdd', '#pager', {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
....
like this:
$grid.jqGrid('navButtonAdd', '#pager', {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
jqModal : true,
onClickButton: function () {
....
Related
Ok, this is a bit special. We are using UIkit in our XPages application. We also use the tabs and switcher component (http://getuikit.com/docs/tab.html and http://getuikit.com/docs/switcher.html).
They work fine until we do a partial refresh of the page. The reason is that those components are initiliazed only once after the pages is loaded. This happens directly in the lib we bind to the page - no own init script etc.
After the refresh I must re-init the whole stuff - but I am not familiar with the syntax or even the possibilities.
I searched the UIkit lib though and found something like this:
(function(UI) {
"use strict";
UI.component('tab', {
defaults: {
'target' : '>li:not(.uk-tab-responsive, .uk-disabled)',
'connect' : false,
'active' : 0,
'animation' : false,
'duration' : 200
},
boot: function() {
// init code
UI.ready(function(context) {
UI.$("[data-uk-tab]", context).each(function() {
var tab = UI.$(this);
if (!tab.data("tab")) {
var obj = UI.tab(tab, UI.Utils.options(tab.attr("data-uk-tab")));
}
});
});
},
init: function() {
var $this = this;
this.current = false;
this.on("click.uikit.tab", this.options.target, function(e) {
e.preventDefault();
if ($this.switcher && $this.switcher.animating) {
return;
}
var current = $this.find($this.options.target).not(this);
current.removeClass("uk-active").blur();
$this.trigger("change.uk.tab", [UI.$(this).addClass("uk-active"), $this.current]);
$this.current = UI.$(this);
// Update ARIA
if (!$this.options.connect) {
current.attr('aria-expanded', 'false');
UI.$(this).attr('aria-expanded', 'true');
}
});
if (this.options.connect) {
this.connect = UI.$(this.options.connect);
}
// init responsive tab
this.responsivetab = UI.$('<li class="uk-tab-responsive uk-active"><a></a></li>').append('<div class="uk-dropdown uk-dropdown-small"><ul class="uk-nav uk-nav-dropdown"></ul><div>');
this.responsivetab.dropdown = this.responsivetab.find('.uk-dropdown');
this.responsivetab.lst = this.responsivetab.dropdown.find('ul');
this.responsivetab.caption = this.responsivetab.find('a:first');
if (this.element.hasClass("uk-tab-bottom")) this.responsivetab.dropdown.addClass("uk-dropdown-up");
// handle click
this.responsivetab.lst.on('click.uikit.tab', 'a', function(e) {
e.preventDefault();
e.stopPropagation();
var link = UI.$(this);
$this.element.children('li:not(.uk-tab-responsive)').eq(link.data('index')).trigger('click');
});
this.on('show.uk.switcher change.uk.tab', function(e, tab) {
$this.responsivetab.caption.html(tab.text());
});
this.element.append(this.responsivetab);
// init UIkit components
if (this.options.connect) {
this.switcher = UI.switcher(this.element, {
"toggle" : ">li:not(.uk-tab-responsive)",
"connect" : this.options.connect,
"active" : this.options.active,
"animation" : this.options.animation,
"duration" : this.options.duration
});
}
UI.dropdown(this.responsivetab, {"mode": "click"});
// init
$this.trigger("change.uk.tab", [this.element.find(this.options.target).filter('.uk-active')]);
this.check();
UI.$win.on('resize orientationchange', UI.Utils.debounce(function(){
if ($this.element.is(":visible")) $this.check();
}, 100));
this.on('display.uk.check', function(){
if ($this.element.is(":visible")) $this.check();
});
},
check: function() {
var children = this.element.children('li:not(.uk-tab-responsive)').removeClass('uk-hidden');
if (!children.length) return;
var top = (children.eq(0).offset().top + Math.ceil(children.eq(0).height()/2)),
doresponsive = false,
item, link;
this.responsivetab.lst.empty();
children.each(function(){
if (UI.$(this).offset().top > top) {
doresponsive = true;
}
});
if (doresponsive) {
for (var i = 0; i < children.length; i++) {
item = UI.$(children.eq(i));
link = item.find('a');
if (item.css('float') != 'none' && !item.attr('uk-dropdown')) {
item.addClass('uk-hidden');
if (!item.hasClass('uk-disabled')) {
this.responsivetab.lst.append('<li>'+link.html()+'</li>');
}
}
}
}
this.responsivetab[this.responsivetab.lst.children('li').length ? 'removeClass':'addClass']('uk-hidden');
}
});
})(UIkit);
Similar code is created for the connected switcher component.
You can see a demo of my problem here: http://notesx.net/customrenderer.nsf/demo.xsp
Source code here: https://github.com/zeromancer1972/CustomRendererDemo/blob/master/ODP/XPages/demo.xsp
As this is part of the library itself I'd like to find a way to call this from outside the library.
Any ideas are highly appreciated!
Newer versions of uikit have an init method, upgrade and call it from the onComplete event of the combo box.
<xp:comboBox
id="comboBox1">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:return ["value 1", "value 2"];}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler
event="onchange"
submit="true"
refreshMode="partial"
refreshId="page"
onComplete="$.UIkit.init();">
</xp:eventHandler>
</xp:comboBox>
I have this notification system that works with the following jQuery / javascript and displays a notification when called.
What I am having some trouble doing and what I am trying to do is once a new notification is create to hide and remove / destroy any existing notifications.
I've tried something like this: $('.notification').not(this).hide().remove();, but that didn't work.
Here is the jQuery behind the notifications:
;(function($) {
$.notificationOptions = {
className: '',
click: function() {},
content: '',
duration: 5000,
fadeIn: 400,
fadeOut: 600,
limit: false,
queue: false,
slideUp: 200,
horizontal: 'right',
vertical: 'top',
afterShow: function(){},
afterClose: function(){}
};
var Notification = function(board, options) {
var that = this;
// build notification template
var htmlElement = $([
'<div class="notification ' + options.className + '" style="display:none">',
'<div class="close"></div>',
options.content,
'</div>'
].join(''));
// getter for template
this.getHtmlElement = function() {
return htmlElement;
};
// custom hide
this.hide = function() {
htmlElement.addClass('hiding');
htmlElement.animate({ opacity: .01 }, options.fadeOut, function() {
var queued = queue.shift();
if (queued) {
$.createNotification(queued);
}
});
htmlElement.slideUp(options.slideUp, function() {
$(this).remove();
options.afterClose();
});
};
// show in board
this.show = function() {
// append to board and show
htmlElement[options.vertical == 'top' ? 'appendTo' : 'prependTo'](board);
htmlElement.fadeIn(options.fadeIn, options.afterShow());
//$('.notification').css('marginLeft', -$('.notification').outerWidth()/2);
$('.notification-board.center').css('marginLeft', -($('.notification-board.center').width()/2));
$(window).on('resize', function(){
$('.notification-board.center').css('marginLeft', -($('.notification-board.center').width()/2));
});
};
// set custom click callback
htmlElement.on('click', function() {
options.click.apply(that);
});
// helper classes to avoid hide when hover
htmlElement.on('mouseenter', function() {
htmlElement.addClass('hover');
if (htmlElement.hasClass('hiding')) {
// recover
htmlElement.stop(true);
// reset slideUp, could not find a better way to achieve this
htmlElement.attr('style', 'opacity: ' + htmlElement.css('opacity'));
htmlElement.animate({ opacity: 1 }, options.fadeIn);
htmlElement.removeClass('hiding');
htmlElement.addClass('pending');
}
});
htmlElement.on('mouseleave', function() {
if (htmlElement.hasClass('pending')) {
// hide was pending
that.hide();
}
htmlElement.removeClass('hover');
});
// close button bind
htmlElement.children('.close').on('click', function() {
that.hide();
});
if (options.duration) {
// hide timer
setTimeout(function() {
if (htmlElement.hasClass('hover')) {
// hovering, do not hide now
htmlElement.addClass('pending');
} else {
that.hide();
}
}, options.duration);
}
return this;
};
var queue = [];
$.createNotification = function(options) {
options = $.extend({}, $.notificationOptions, options || {});
// get notification container (aka board)
var board = $('.notification-board.' + options.horizontal + '.' + options.vertical);
if (!board.length) {
board = $('<div class="notification-board ' + options.horizontal + ' ' + options.vertical + '" />');
board.appendTo('body');
}
if (options.limit && board.children('.notification:not(.hiding)').length >= options.limit) {
// limit reached
if (options.queue) {
queue.push(options);
}
return;
}
// create new notification and show
var notification = new Notification(board, options)
notification.show(board);
return notification;
};
})(jQuery);
and here is how the notifications are called / created:
$.createNotification({
horizontal:'center',
vertical:'top',
content:'No more cards at this time.',
duration:6000,
click:function(){
this.hide();
}
});
The code:
$('.notification').not(this).hide().remove();
will work just fine to remove all .notification DOM elements currently in the DOM except the current one IF this is the current notification DOM element. If that code isn't working, then it's likely because this isn't the desired notification DOM element that you want to keep. If this is an instance of your Notification class, then that's the wrong type of object. For that above code to work, this has to be the notification DOM object.
If you want to just remove all old notification DOM elements BEFORE you insert your new one, then you can just do this before your new one is in the DOM:
$('.notification').remove();
That will clear out the old ones before you insert your new one.
Since you don't have this line of code in your currently posted code, I can't tell where you were trying to use it so can't advise further on what might be wrong. Please describe further where in your code you were trying to use this.
I'm developing a jQuery plugin to create modal windows, so, now, I want to restore element original state after hide it.
Someone can help me?
Thanks!
---- update ---
Sorry,
I want to store element html in some place when show it, then put the stored data back when hide it.
This is my plugin:
(function ($) { // v2ui_modal
var methods = {
show: function (options) {
var _this = this;
var defaults = {
showOverlay: true,
persistentContent: true
};
var options = $.extend(defaults, options);
if (!_this.attr('id')) {
_this.attr('id', 'v2ui-id_' + Math.random().toString().replace('.', ''));
}
if (options.showOverlay) {
$('<div />', { // overlay
id: 'v2-ui-plugin-modal-overlay-' + this.attr('id'),
css: {
zIndex: ($.topZIndex() + 1),
display: 'none',
position: 'fixed',
width: '100%',
height: '100%',
top: 0,
left: 0
}
}).addClass('v2-ui').addClass('plugin').addClass('overlay').appendTo('body');
};
_this.css({
zIndex: ($.topZIndex() + 2),
position: 'fixed'
});
_this.center();
$('#v2-ui-plugin-modal-overlay-' + _this.attr('id')).fadeIn(function () {
_this.fadeIn();
});
},
hide: function () {
var _this = this;
_this.fadeOut();
$('#v2-ui-plugin-modal-overlay-' + _this.attr('id')).fadeOut(function () {
$('#v2-ui-plugin-modal-overlay-' + _this.attr('id')).remove();
if ((_this.attr('id')).substr(0, 8) == 'v2ui-id_') {
_this.removeAttr('id');
};
});
}
};
jQuery.fn.v2ui_modal = function (methodOrOptions) {
if (methods[methodOrOptions]) {
methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
methods.show.apply(this, arguments);
};
};
})(jQuery);
You can take a look at jQuery.detach.
The .detach() method is the same as .remove(), except that .detach()
keeps all jQuery data associated with the removed elements. This
method is useful when removed elements are to be reinserted into the
DOM at a later time.
But I am having a hard time understanding your problem fully, so I apologize if my answer does not fit your question.
I want to write a ComboBox which lets the user type in a query and at the same time lets him select a value from a tree. I have tried writing a tree-select but if I change the code to inherit from dijit.form.ComboBox instead of a dijit.form.Select, the code breaks.
Here is what I had tree for tree select:
dojo.declare('TreeSelect',dijit.form.Select,{
constructor: function(widgetArgs){
this.tree = widgetArgs.tree || new FC_Tree();
this.initTree = widgetArgs.initTree;
if(dojo.isFunction(this.initTree))
this.initTree();
},
postCreate: function(){
this.inherited(arguments);
this.option = {label: '', value: 'NoValue'};
this.tree.option = this.option;
this.addOption(this.option);
dojo.connect(this.tree,'onClick',this,'closeDropDown');
dojo.connect(this.tree,'itemSelected',this,'selectOption');
},
selectOption: function(opt){
this.option.label = opt.label || opt;
this.option.value = opt.value || opt;
this.option.id = opt.id || opt;
this.set('value',this.option);
},
_getMenuItemForOption: function (option){
return this.tree;
},
openDropDown: function(){
this.tree.refresh();
this.inherited(arguments);
},
clear: function(){
this.tree.clear();
this.tree.option.value = '';
this.tree.option.label = '';
this.tree.option.id = '';
this.set('value',this.tree.option);
},
initializeTree: function(treeData) {
// Init the tree only if needed
dojo.forEach(treeData, function(field) {
var store = this.tree.model.store;
store.newItem(field);
}, this);
},
setOpenCallback: function(callback){
this.tree.setOpenCallback(callback);
},
resetTree: function() {
var store = this.tree.model.store;
store.fetch( { query: { id: "*" },
onItem: function(item) {
store.deleteItem(item);
}
});
}
});
I had tried replacing the code for combobox like this:
dojo.declare('TreeSelect',dijit.form.ComboBox,{
Please help me rectify it.
Thanks in advance!
Adding the code for FC_Tree:
dojo.declare('FC_Tree',dijit.Tree,{
showRoot: false,
openOnClick: true,
noIconForNode: true,
noMarginForNode: true,
persist: false,
openCallback: null,
constructor: function(){
if(dojo.isUndefined(arguments[0]) || dojo.isUndefined(arguments[0].model))
{
var forest_store = new FC_DataStore({id: 'id', label: 'label'});
this._storeloaded = false;
dojo.connect(forest_store,'loaded',this,function(){this._storeloaded = true;})
this.model = new dijit.tree.ForestStoreModel({store:forest_store});
}
},
setOpenCallback: function(callback){
this.openCallback = callback;
},
option: {},
itemSelected: function(item){
},
onClick: function(item, node, evt){
var store = this.model.store;
get = function(){
return store.getValue(item, "isDir");
};
// on folder click mark it unselectable
if(get("isDir"))
{
this.isExpanded = true;
this.isExpandable = true;
}
else
{ //In case the item has 'onClick' delegate execute it and assign the output to 'selItem'
var selItem = (item.onClick && item.onClick[0])? item.onClick[0](this.model.store,item.parentID[0]):item.id[0];
this.option.id = item.id;
this.option.value = item.value;
this.option.label = item.label;
this.itemSelected(this.option);
}
},
onOpen: function(item, node){
if(this.rootNode.item == item){
return this.inherited(arguments);
}
var data = (this.openCallback != null) ? this.openCallback(item, node) : {};
if(!data.length){
return this.inherited(arguments);
}
FC_Comm.when(data,{
onCmdSuccess: dojo.hitch(this,function(data){
var store = this.model.store;
var children = store.getValues(item, 'children');
dojo.forEach(children, function(child) {
// don't delete child if doNotDelete flag is true
if(!store.getValue(child, "doNotDelete"))
store.deleteItem(child);
});
if (data) {
var store = this.model.store;
if (store) {
dojo.forEach(data, function(child) {
store.newItem(child, {parent : item, attribute: 'children'});
});
}
}
})
});
},
refresh: function(){
if(this._storeloaded){
// Close the store (So that the store will do a new fetch()).
this.model.store.clearOnClose = true;
this.model.store.close();
// Completely delete every node from the dijit.Tree
this._itemNodesMap = {};
this.rootNode.state = "UNCHECKED";
this.model.root.children = null;
// Destroy the widget
this.rootNode.destroyRecursive();
// Recreate the model, (with the model again)
this.model.constructor(this.model)
// Rebuild the tree
this.postMixInProperties();
this._load();
this._storeloaded = false;
}
},
clear: function(){
this.model.store.load([]);
}
});
Possibly you will find inspiration / answer in this fiddle
The recursiveHunt and selectTreeNodeById functions are logic to seek out the path of an item by its id. Its quite excessive and you may find a better solution (dont know 100% what data your json is like)..
Basically, use FilteringSelect and reference the tree in this object. Also for Tree, reference the select.
Then for your tree, hook into load function (also called on refresh afaik) and in turn for the select, use onBlur to initate selecting treenode.
var combo = new dijit.form.FilteringSelect({
onBlur: function() {
// called when filter-select is 'left'
if (this.validate()) {
// only act if the value holds an actual item reference
var id = this.get("value");
var name = this.get("displayedValue");
this.tree.selectNode(id);
}
}
});
var tree = new dijit.Tree( { ....
onLoad: function() {
combostore.setData(this.model.store._arrayOfAllItems);
},
onClick: function(item) {
// uses 'this.combo', must be present
// also, we must have the same 'base store' for both combo and model
var _name = this.model.store.getValue(item, this.combo.searchAttr);
this.combo.set("item", item, false, _name);
},
selectNode: function(lookfor) {
selectTreeNodeById(this, lookfor);
},
combo: combo // <<<<<<
});
combo.tree = tree // <<<<<<
Make sure that the model has a rootId, and also that your select.searchAttr matches tree.model.labelAttr. See working sample on the fiddle
may be you can help me:
Please check this demo: Plugin demo
Plugin description: Plugin description
How can I show only matching items at the top of the list and hide not matching during input typing?
Thanks!
You can do it using onShow and onHide handlers, of course.
See here: http://jsfiddle.net/ypfPY/3/
var myFilter = new ElementFilter('search-term', '#my-list li', {
trigger: 'keyup',
cache: false,
onShow: function(element) {
element.setStyle('display', 'block');
},
onHide: function(element) {
element.setStyle('display', 'none');
}
});
Frankly speaking, I encountered a set of bugs in ElementFilter source (bug on firstly retrieving "showing" and false instead of true for matchOverride when showing all items), so, you better get source from here:
var ElementFilter = new Class({
// implements
Implements: [Options,Events],
// options
options: {
cache: true,
caseSensitive: false,
ignoreKeys: [13, 27, 32, 37, 38, 39, 40],
matchAnywhere: true,
property: 'text',
trigger: 'mouseup',
onStart: $empty,
onShow: $empty,
onHide: $empty,
onComplete: $empty
},
//initialization
initialize: function(observeElement,elements,options) {
//set options
this.setOptions(options);
//set elements and element
this.observeElement = document.id(observeElement);
this.elements = $$(elements);
this.matches = this.elements;
this.misses = [];
//start the listener
this.listen();
},
//adds a listener to the element (if there's a value and if the event code shouldn't be ignored)
listen: function() {
//add the requested event
this.observeElement.addEvent(this.options.trigger,function(e) {
//if there's a value in the box...
if(this.observeElement.value.length) {
//if the key should not be ignored...
if(!this.options.ignoreKeys.contains(e.code)) {
this.fireEvent('start');
this.findMatches(this.options.cache ? this.matches : this.elements);
this.fireEvent('complete');
}
}
else{
//show all of the elements - changed to true
this.findMatches(this.elements,true);
}
}.bind(this));
},
//check for matches within specified elements
findMatches: function(elements,matchOverride) {
//settings
var value = this.observeElement.value;
var regExpPattern = this.options.matchAnywhere ? value : '^' + value;
var regExpAttrs = this.options.caseSensitive ? '' : 'i';
var filter = new RegExp(regExpPattern, regExpAttrs);
var matches = [];
//recurse
elements.each(function(el){
var match = matchOverride == undefined ? filter.test(el.get(this.options.property)) : matchOverride;
//if this element matches, store it...
if(match) {
// default value added
if(!el.retrieve('showing', true)){
this.fireEvent('show',[el]);
}
matches.push(el);
el.store('showing',true);
}
else {
if(el.retrieve('showing', true)) {
this.fireEvent('hide',[el]);
}
el.store('showing', false);
}
return true;
}.bind(this));
return matches;
}
});