Hi Everyone:
Basically, I would like to select checkboxes and then select a batchAction (ie. red/green/blue/yellow background) but my list.push(id) is not creating a list … console.log(list) holds not list items. Help with code below.
- user selects items via checkboxes … this should create a dynamic list … if status list.push(id) else be sure not on list
- user selects an action via batchAction … all checkboxes should be on the list and action is fired for these list items
- clear the list after action … also list must be clear going between pages … this would mean action is only allowed for currently checked at the time of batchAction.
var list = [];
var toolbar = {
view:"toolbar",
elements:[
{
view:"richselect", width:170, labelWidth:90,
label: 'View Pages', labelAlign:"left",
value:1, options:[
{ id:1, value:"4" },
{ id:2, value:"5" },
{ id:3, value:"6" }
],
on:{
onchange:function(){
pagerSize = this.data.text;
$$("pagerA").define("size", pagerSize);
$$("chk").refresh();
}
}
},
{
view:"richselect", width:170, id:"batchAction", labelWidth:90,
labelAlign:"left",
value:1, options:[
{ id:1, value:"" },
{ id:2, value:"red background" },
{ id:3, value:"green background" },
{ id:4, value:"blue background" },
{ id:5, value:"yellow background" }
],
on:{
onchange:function(){
///////////////// NEED TO FIND ALL CHECKBOXES ///////////
if($$('batchAction').getValue() == 2) this.addRowCss(id, "red");
if($$('batchAction').getValue() == 3) this.addRowCss(id, "green");
if($$('batchAction').getValue() == 4) this.addRowCss(id, "blue");
if($$('batchAction').getValue() == 5) this.addRowCss(id, "yellow");
}
}
},
{ view:"search", align:"right", placeholder:"Search by keyword", id:"searchfilter", width: 300}
]
};
var pagerData = {
id:'pagerA',
template:"{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}",
container:"pager",
size:4,
group:5
};
var grid = {
view:"datatable",margin:50,
id:"chk",
columns:[
//checkbox column
{
id:"status",template:"{common.checkbox()}", width:40,margin:100},
{ id:"title",width:200},
{ id:"year",width:200}
],
on:{
onCheck:function(id, col, status){
if (status) list.push(id);
else list.pop(id);
}
},
autoheight:true,
autowidth:true,
multiselect:true,
pager:pagerData,
select:'row',
data: [
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1, category:"Thriller"},
{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2, category:"Crime"},
{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3, category:"Crime"},
{ id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4, category:"Western"},
{ id:5, title:"Pulp fiction", year:1994, votes:533848, rating:8.9, rank:5, category:"Crime"},
{ id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6, category:"Western"}
]
};
webix.ui({
container:"areaA",
rows:[ toolbar, grid]
})
console.log(list);