AW.UI.List

Has anyone successfully implemented shift or ctrl click functionality on the List control? I can get the multi select functioning properly by setting setSelectionMode("multi") but shift and ctrl clicking does not seem to be implemented.

Never mind I figured it out.

could you please tell me how?

First create custom control:

AW.UI.xListMulti = AW.UI.List.subclass();
AW.UI.xListMulti.create = function()
{
var obj = this.prototype;

obj.isDisabled=false;
obj.nMaxLength=0;
obj.nLastClicked=0;
obj.cSelected="";

obj.setSelectedFromString = function(text){
var x=0;
var n=0;
this.setSelectedItems([]);
this.cSelected = text;
for(x=0;x<this.getItemCount();x++){
n=this.cSelected.search(this.getItemText(x));
if (n != -1) {
if (this.nLastClicked == 0){this.nLastClicked = x};
this.setItemSelected(true, x);
}
}
this.setTimeout(function(){ this.setCurrentItem(this.nLastClicked);});
};


obj.getSelectedString = function(){
var x=1;
var cVal="";
var aSelected = this.getSelectedItems()
for(x=1;x<=aSelected.length;x++){
if (x==1){
cVal = this.getItemText(aSelected[x-1]);
}
else{
cVal = cVal+'|'+this.getItemText(aSelected[x-1]);
}
}
this.cSelected = cVal;
return cVal;
};







var MyMulti = {

// mouse

onItemClicked: "selectClickedItem",
onItemCtrlClicked: "toggleCClickedItem",
onItemShiftClicked: "toggleSClickedItem"

};


var MyActions = (function(){

function clicked(event, index){
return index;
}

function current(){
return this.getCurrentItem();
}

function first(){
var p = this.getViewOffset();
var a = this.getViewIndices();
return a ? a[p] : p;
}

function last(){
var p = this.getViewOffset() + this.getViewCount() - 1;
var a = this.getViewIndices();
return a ? a[p] : p;
}

function next(){
var i = this.getCurrentItem();
var p = Math.min(this.getViewPosition(i) + 1, this.getViewOffset() + this.getViewCount() - 1);
var a = this.getViewIndices();
return a ? a[p] : p;
}

function previous(){
var i = this.getCurrentItem();
var p = Math.max(this.getViewPosition(i) - 1, this.getViewOffset());
var a = this.getViewIndices();
return a ? a[p] : p;
}

function go(i){
this.setCurrentItem(i);
this.nLastClicked=i;
}

function select(i){
this.setSelectedItems([i]);
this.setCurrentItem(i);
if (this.nLastClicked != i){
this.nLastClicked=i;
this.raiseEvent("onCustomCall");
}
}

function toggle(i){
this.setItemSelected(!this.getItemSelected(i), i);
if (i != this.getCurrentItem()){this.setCurrentItem(i)}
this.nLastClicked=i;
this.raiseEvent("onCustomCall");

}

function Stoggle(i){
if (this.nLastClicked != i && this.nLastClicked < i){
var x;
for(x=this.nLastClicked;x<=i;x++){
//this.setItemSelected(!this.getItemSelected(x), x);
this.setItemSelected(true, x)
if (x != this.getCurrentItem()){this.setCurrentItem(x)}
}
}
if (this.nLastClicked != i && this.nLastClicked > i){
var x;
for(x=i;x<=this.nLastClicked;x++){
this.setItemSelected(true, x)
if (x != this.getCurrentItem()){this.setCurrentItem(x)}
}
}
this.nLastClicked=i;
this.raiseEvent("onCustomCall");
}

function f(action, item){
return function(event, index){
var i = item.call(this, event, index);
AW.setReturnValue(event, false);
if (event && event.type == "mousedown"){
this.setTimeout(function(){
if (this.$active){
action.call(this, i);
}
});
}
else {
if (this.$active){
action.call(this, i);
}
}
event = null;
}
}

return {

gotoClickedItem: f(go, clicked),
gotoPreviousItem: f(go, previous),
gotoNextItem: f(go, next),
gotoFirstItem: f(go, first),
gotoLastItem: f(go, last),

selectClickedItem: f(select, clicked),
selectPreviousItem: f(select, previous),
selectNextItem: f(select, next),
selectFirstItem: f(select, first),
selectLastItem: f(select, last),


toggleCClickedItem: f(toggle, clicked),
toggleSClickedItem: f(Stoggle, clicked),
toggleCurrentItem: f(toggle, current)

};

})();







To use the control:

var _UI10_ = new AW.UI.xListMulti;
_UI10_.setId("UI10");
_UI10_.setItemText(["All","First","second"]);
_UI10_.setItemCount(3);
_UI10_.setControlTooltip('my tooltip');
_UI10_.setSelectedFromString("All");
_UI10_.refresh();






_UI10_.onCustomCall = function(){
do_whatever();
}