tree with checkboxes

Webix JS
1

Hi,

i am trying to customize the checkbox show in a tree to fit with my app style.
Current checkbox has a dark grey background and its color is blue.

I have to overwrite it and i use this from doc

{ view: “tree”, activeTitle: true, height: 400, scroll: true, threeState: true,
type: { checkbox: function (obj) { return “<input type=‘checkbox’ / >”; } }, template: function (obj, common) { return common.icon(obj, common) + common.checkbox(obj, common) + “” + obj.value + “” }, data:
[
{ id: “1”, open: true, value: categoria + " 1",
data: [
{ id: “1.1”, value: subcategoria + " 1" },
{ id: “1.2”, value: subcategoria + " 2" },
{ id: “1.3”, value: subcategoria + " 3" }
]
},
{ id: “2”, open: true, value: categoria + " 2",
data: [
{ id: “2.1”, value: subcategoria + " 1" },
{ id: “2.2”, value: subcategoria + " 2" }
]
}
]
}

but no luck…

Any help please!! Thanks and regards!

2

The checkbox:function(obj) template is empty because it is html code. In fact, it is a normal checkbox

3

Hi,

the built-in checkbox template is as follows:

checkbox:function(obj, common){
   if(obj.nocheckbox)
	return "";
    var attrs =  (obj.checked?"checked":"")+(obj.disabled?" disabled":"");
    return "<input type='checkbox' class='webix_tree_checkbox' "+attrs +">";
},

ClassName is important for event listening. And “checked” attribute sets correct state for checkbox.

4

i am not able to overwrite that checkbox style. I tried to add some style properties to that class webix_tree_checkbox. i tried to add another class.
Even i tried to set style property…

but no luck. i see those checkboxes with a dark grey background color and when checked, it has a blue color.

any idea?

thanks

5

is it normal that backgound color of a checkbox in a tree was dark grey?

6

here is an example of “checkbox” customization:

http://webix.com/snippet/d098b098

Tree checkboxes are input elements with type “checkbox”. So, their style depends on browser. In Chrome check checkboxes are grey.

7

However your checkbox view has a white background color and so on…

This is my tree http://postimg.org/image/p76yy28cx/

I set tree customized checkbox class like this class=‘webix_tree_checkbox webix_custom_checkbox’ using your checkbox view style but no luck…

Those checkbox background from that tree should be white and i have to change color too…

On the other side and talking about that tree…i found a posible bug.

when i expand sidemenu, data load is ok but when i do it twice (expand, collapse and expand), plus images and subnodes are missing.

Here is my tree code (Remember checkbox customization code is empty because is html):

{
view: “tree”,
activeTitle: true,
height: 400,
scroll: true,
threeState: true,
type:
{
checkbox: function (obj)
{
if (obj.nocheckbox)
return “”;
var attrs = (obj.checked ? “checked” : “”) + (obj.disabled ? " disabled" : “”);
return “<input type=‘checkbox’ class=‘webix_tree_checkbox webix_custom_checkbox’ " + attrs + " style=‘background-color:#fff’ />”;
}
},
template: function (obj, common) { return common.icon(obj, common) + common.checkbox(obj, common) + “” + obj.value + “” },
data:
[
{ id: “1”, open: true, value: “Categoria 1”,
data: [
{ id: “1.1”, value: “Subcategoria 1” },
{ id: “1.2”, value: “Subcategoria 2” },
{ id: “1.3”, value: “Subcategoria 3” }
]
},
{ id: “2”, open: true, value: “Categoria 2”,
data: [
{ id: “2.1”, value: “Subcategoria 1” },
{ id: “2.2”, value: “Subcategoria 2” }
]
}
]
}

thanks and regards!

8

Could you share a snippet ?

9

On which device the above issue occurs?
From the above screenshot it seems to be a some Android tablet device.

10

Hi, i am using a 4.2.2 android tablet

this is an example.

I think it happens when i try to overwrite sidemenu content.
If not, the tree loads correctly.

hope it helps!

Here is my sample:

var _mainUI = {};
_mainUI.elements = {};

_mainUI.elements.sideMenu =
{
view: “eventlayout”,
id: “sideMenu”,
rows:
[
{ view: “button”, type: “image”, id: “ibMenu1”, label: “Menu1”, image: “” },
{ view: “button”, type: “image”, id: “ibMenu2”, label: “Menu2”, image: “” },
{ view: “button”, type: “image”, id: “ibMenu3”, label: “Menu3”, image: “” }

]

}

_mainUI.elements.sideTree =
{
view: “eventlayout”,
id: “sideMenu”,
type: “clean”,
rows:
[
{
view: “form”, elements:
[
{ view: “template”, height: 35, template: “

Title
” },
{
view: “tree”,
activeTitle: true,

                scroll: true,
                threeState: true,
                type:
                {
                    checkbox: function (obj) {
                        if (obj.nocheckbox)
                            return "";
                        var attrs = (obj.checked ? "checked" : "") + (obj.disabled ? " disabled" : "");
                        return "<input type='checkbox' class='webix_tree_checkbox webix_custom_checkbox' " + attrs + " style='background-color:#fff' />";
                    }
                },
                template: function (obj, common) { return common.icon(obj, common) + common.checkbox(obj, common) + "<span style='color:#EE7402;'>" + obj.value + "</span>" },
                data:
                [
                    { id: "1", open: true, value: "Categoria 1",
                        data:
                        [
                                { id: "1.1", value: "subcategoria 1" },
                                { id: "1.2", value: "subcategoria 2" },
                                { id: "1.3", value: "subcategoria 3" }
                        ]
                    },
                    { id: "2", open: true, value: "Categoria  2",
                        data:
                        [
                                { id: "2.1", value: "subcategoria 1" },
                                { id: "2.2", value: "subcategoria 2" }
                        ]
                    }
                ]
            }
    
        ]
    } 
    
]

}

function switchMenu() {

// sidemenu
$$("index").define("menuWidth", 200);
$$("index").define("autoCollapse", true);
$$("index").resize();

webix.ui([_mainUI.elements.sideMenu], $$('sideMenu'));
$$("index").expand();

}

function switchTree() {

// sidemenu

$$("index").define("menuWidth", 400);
//$$("index").define("autoCollapse", false);
$$("index").resize();

webix.ui([_mainUI.elements.sideTree], $$('sideMenu'));
$$("index").expand();

}

_mainUI.elements.index =
{

view: "sidemenu",
menuWidth: 300,
id: "index",
menu:
{
    view: "eventlayout",
    id: "sideMenu",
    rows: [_mainUI.elements.sideMenu]
},
body:
{
    view: "eventlayout",
    type: "clean",   
    cols:
    [
        { view: "template", template: "<span onclick='javascript:switchMenu();'>menu</span>", click: "switchMenu()" },
        { view: "template", template: "<span onclick='javascript:switchTree();'>tree</span>", click: "switchTree()" }
    ]
}

}

_mainUI.configMobile =
{
view: “eventlayout”,
type: “clean”,
id: “mainLayOut”,
height: 500,
width: 500,
rows:
[
_mainUI.elements.index
]
}

_mainUI.init = function () {

webix.protoUI(
    { name: "eventlayout"
    }, webix.ui.layout, webix.EventSystem);


webix.Date.Locale = {
    month_full: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
    month_short: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
    day_full: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
    day_short: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"]
};

webix.ui(_mainUI.configMobile);

};

Thanks and regards!

11

Hi,

are you sure that issue is actual only for the checkboxes inside SideMenu ? We have not managed to reproduce the problem. If you are sure that issue is specific to sidemenu, please try to locale the problem and provide a working example. And you have a support subscription, please open a ticket in member’s area.

12

i will create a ticket.

Thanks

13

i dont have a license so i ant create a tcket in member’s area.
How can i send to you?

14

You can use snippet to create working demo.

15

Hi Maria,

this is my snippet

http://webix.com/snippet/293d35bf

It can not compile because i use sidemenu view and i think snippet is ready for webix 3.0 only, not 3.1, that contains sidemenu view.

At least, it can guide you. The point is to reconstruct sidemenu menu property on the fly. And there is the tree.

If you need some help abput my code or whatever, tell me please!

Thanks and regards!

16

Hi,

We have not reproduced the problem locally. Checkboxes look the same as checkboxes in desktop Chrome browser. And it seems that the issue is specific for your device. I’m afraid we can not help in this case.