I have the iconsEdit template where it brings up the comments and the description just fine, but I can’t get it to show the right avatar.
Hello,
Please check the following sample in Kanban package:
02_events/02_avatar_onclick.html
You need to change a task property that corresponds an avatar. In the sample it is “personId” property. And then you need to call refresh() method to redraw the task.
And the following demo shows how to change the properties via Form:
03_data_operations/03_server.html
I’m still not seeing how to mix the two
webix.type(
webix.ui.kanbanlist,{
name: "iconsEdit",
icons:[
{
id: "comments",
tooltip: "Comments",
icon:"comment-o",
show: function(obj){ return !!obj.comments },
name: "comments",
template:"#comments.length#",
click: function(e,id){
var item = this.getItem(id);
webix.modalbox({
title: "Comments",
buttons: ["Close"],
width: "500px",
text: this.getItem(id).comments
});
}
},
{
id: "edit",
icon:"edit",
tooltip: "View Details",
click: function(e,id){
//var item = $$("myBoard").getItem(id);
//$$("myWin").show();
//$$("myForm").setValues(item);
//$$("myForm").focus();
webix.modalbox({
title: "Project Details",
buttons: ["Close"],
width: "500px",
text: this.getItem(id).description,
});
}
}
]
});
webix.ui({
view: "window",
width: 400,
height: 350,
id: "myWin",
position: "center",
modal: true,
head:{
view: "toolbar",
elements:[
{ view: "label", label: "Details"},
{ view: "button", type:"iconButton", label: "Close", icon: "times", click:function(){$$("myWin").hide()}, width:70}
]
},
body:{
view: "form",
id: "myForm",
elementsConfig:{
labelPosition: "top"
},
elements:[
{ view: "textarea", name:"text", height: 50},
{ view: "textarea", label: "Desription", name:"description", height: 90},
]
}
});
webix.ui({
view: "popup",
id: "staffPopup",
body: {
id: "staffList",
view: "dataview",
xCount: 3,
height: 300,
borderless: true,
css: "members",
autoheight: true,
select: true,
type: "avatars",
on: {
onItemClick: function (id) {
var selectedTaskId = $$("myBoard").getSelectedId();
var task = $$("myBoard").getItem(selectedTaskId);
task.personId = id;
$$("myBoard").refresh(selectedTaskId);
$$("staffPopup").hide();
}
},
data: staff
}
});
function avatarClick(id, e, node, list) {
$$("staffPopup").show(node);
var personId = this.getItem(id).personId;
if (personId)
$$("staffList").select(personId);
}
//main body
webix.ready(function(){
webix.ui({
view: "kanban", id: "myBoard", type: "avatars",
cols:[
{ header:"Projects",
body: { view: "kanbanlist", status: "new", type: "iconsEdit" }
},
{ header:"Initiatives", gravity: 3,
body:{
type: "wide",
rows:[
{ view: "kanbanlist", status: "ready", xCount: 3, type: "iconsEdit" },
{
cols:[
{ header:"Active Other",
body:{ view:"kanbanlist", status:"work", type: "iconsEdit"}},
{ header:"Active Misc",
body:{ view:"kanbanlist", status:"test", type: "iconsEdit" }},
{ header:"Misc Non-LSS",
body:{ view:"kanbanlist", status:"done", type: "iconsEdit" }}
]
}
]
}
},
{ header:"Other",
body:{ view:"kanbanlist", status:"complete", type: "iconsEdit" }}
],
on: {
onAvatarClick: avatarClick
},
data: task_set2
});
});
</script>
</div>
</body>
</html>
Hi,
You need to define templateAvatar in your “iconsEdit” type. Please check “01_basic/04_templates.html” demo. For example your iconsEdit can be as in:
webix.type(webix.ui.kanbanlist,{
name: "iconsEdit",
icons:[
{id: "comments" , ...},
{id: "edit", ....}
],
templateAvatar: function(obj){
if(obj.user){
return '<img class="avatar" src="../common/photos/'+obj.user+'.png" title="'+name+'"/>';
}
return "";
}
});
That didn’t change anything
webix.type(
webix.ui.kanbanlist,{
name: "iconsEdit",
icons:[
{
id: "comments",
tooltip: "Comments",
icon:"comment-o",
show: function(obj){ return !!obj.comments },
name: "comments",
template:"#comments.length#",
click: function(e,id){
var item = this.getItem(id);
webix.modalbox({
title: "Comments",
buttons: ["Close"],
width: "500px",
text: this.getItem(id).comments
});
}
},
{
id: "edit",
icon:"edit",
tooltip: "View Details",
click: function(e,id){
webix.modalbox({
title: "Project Details",
buttons: ["Close"],
width: "500px",
text: this.getItem(id).description,
});
}
}
],
templateAvatar: function (obj) {
if (obj.user) {
return '<img class="avatars" src="../../common/imgs/' + obj.user + '.jpg" title="' + name + '"/>';
}
return "";
}
});
webix.ui({
view: "window",
width: 400,
height: 350,
id: "myWin",
position: "center",
modal: true,
head:{
view: "toolbar",
elements:[
{ view: "label", label: "Details"},
{ view: "button", type:"iconButton", label: "Close", icon: "times", click:function(){$$("myWin").hide()}, width:70}
]
},
body:{
view: "form",
id: "myForm",
elementsConfig:{
labelPosition: "top"
},
elements:[
{ view: "textarea", name:"text", height: 50},
{ view: "textarea", label: "Desription", name:"description", height: 90},
]
}
});
webix.ui({
view: "popup",
id: "staffPopup",
body: {
id: "staffList",
view: "dataview",
xCount: 3,
height: 300,
borderless: true,
css: "members",
autoheight: true,
select: true,
type: "avatars",
on: {
onItemClick: function (id) {
var selectedTaskId = $$("myBoard").getSelectedId();
var task = $$("myBoard").getItem(selectedTaskId);
task.personId = id;
$$("staffPopup").hide();
$$("myBoard").refresh(selectedTaskId);
$$("myBoard").refresh();
}
},
data: staff
}
});
function avatarClick(id, e, node, list) {
$$("staffPopup").show(node);
var personId = this.getItem(id).personId;
if (personId)
$$("staffList").select(personId);
}
//main body
webix.ready(function(){
webix.ui({
view: "kanban", id: "myBoard", type: "iconsEdit",
cols:[
{ header:"Projects",
body: { view: "kanbanlist", status: "projects", type: "iconsEdit" }
},
{ header:"Initiatives", gravity: 3,
body:{
type: "line",
rows:[
{ view: "kanbanlist", status: "opportunities", xCount: 3, type: "iconsEdit", height: 200, },
{
cols:[
{ header:"Kaizen",
body:{ view:"kanbanlist", status:"kaizen", type: "iconsEdit"}},
{ header:"Urgent/Hot",
body:{ view:"kanbanlist", status:"urgent", type: "iconsEdit" }},
{ header:"Cross Functional",
body:{ view:"kanbanlist", status:"crossfunctional", type: "iconsEdit" }}
]
}
]
}
},
{ header:"Pendind Activities",
body:{ view:"kanbanlist", status:"pending", type: "iconsEdit" }}
],
on: {
onAvatarClick: avatarClick
},
data: task_set3
});
});
Please check your templateAvatar:
- the path for icons is correctly set
- images have correct src.
If this does not help, you share a ready demo. We will take a look. Please open a ticket in Members’ support of you have support subscription.