Not sure this behavior is intentional or not, but after setting the value the component needs to refreshed so the css class change takes effect. Selection does not change visually without the refresh.

setValue('A');
refresh();//this is needed to update display,

Create layout with wide margin and many rows, hide half of rows, result view will have big gap at bottom.

If text contains special html chars ( < > & ) the result view can be broken, as values are injected as is, without escaping.

Right now "disable" api is disabling parent element of input components, but not input tags inside it.

Accordion doesn't resize when changed size a component inside it .

First-level filtration returns data when typing second-level values that doesn't match with any item from the first level.

15_datatable/30_treetable/04_filter.html

Validation error on submit even with validation rules.
sample:
20_multiview/01_init.html

It would be really nice if menu width can be auto-changed according content.

I doubt that someone will really try it, but what if?)

doesn't work

      $$('ddd').disable(); //ddd - button in the window
      $$('win').show();

does work

      $$('win').show();
      $$('ddd').disable();

No new data comes from server.
15_datatable/16_dyn_loading/06_load_next_replace.html

eachColumn : iterates over all columns in the table
http://docs.webixui.com/api__link__ui.treetable_eachcolumn.html

Hidden columns is not iterated. (If there were included a way to tell if they were visible or not would be desirable) My suggestion would be take a param, visible. null = all column, false only hidden columns, true only visible columns.

Other column collections only contain visible columns, not a problem if api allows ways to access these.

getColumnConfig will not return hidden columns.
.

You can resize it only by "width" parameter but with non-sized container (e.g. form) you cannot use "width" property as it will resize the whole container.

Can be used in two cases

a) when using menu for navigation - mark current active view
b) when using menu for configuration - mark selected option

1. Collapse accordionitem
2. Drag resizer line to set maximum size for list
3. Expand accordionitem
4. No list visible anymore.
   sample:
   05_list/02_list_layout.html

link to the issue - http://snippet.webix.io/52d7de74. To reproduce the issue - click the 'Set new size' button

When you init a form inside existing form, you can't get all elements of parent form.

link to the issue - http://snippet.webix.io/f7c7b309

http://docs.webixui.com/api__link__ui.window_borderless_config.html

API notes this is possible for a window.

Appears in IE 10, chrome appears to behave correctly.

{ view:"button", id:"homeButton", type:"imageButtonTop", label:"Home", borderless:false, css:"smallerFont",
image:"../hpia3/webimages/home_32.gif", width:92},

$$('homeButton').disable();

The label portion "Home" remains enabled and events are passed for click event.

(Side Note Disabled button is not extremely obvious, dimming the actual graphic/label would help out a lot)
This appears to be a css issue and as well related to the IE bug. Changing that line in css appears to fix the IE issue, and make the icon dimmed as well in chrome.

.webix_view.webix_control>.webix_disabled {
background-color: #ddd;
}

In the latest release appears TreeStore iterates objects differently, as of now it's just broken.

In TreeStore this was changed.
eachChild:function(id, functor, master){
if (this.branch[id])
return webix.PowerArray.each.call(this.getItem(this.branch[id]), functor, master||this);
//return webix.PowerArray.each.call(this.branch[id], functor, master||this);
},

Commented out is the old code that did work, more has changed than just that lines as putting it back in does not work as expected. The problem is caused by this.getItem(this.branch[id]) as the variable is an array of all the highest level items on a TreeStore.

DataStore, changing to this method fixes the issue, it works but am not sure is the best solution to fix this issue.
getItem:function(id){
if( Object.prototype.toString.call( id ) === '[object Array]' ) {
var items = [];
for (var i = 0; i < id.length; i++) {
items[items.length] = this.pull[id[i]]
}
return items;
} else {
return this.pull[id];
}
},

******** Code to reproduce the issue ********
treeTable = new webix.ui({
container:"testA",
view:"treetable",
columns:[
{ id:"value", header:"Film title", width:250, template:"{common.treetable()} #value#", format:testing},
{ id:"id", header:"", css:{"text-align":"right"}, width:50, format:testing},
],
data: [
{ "id":"1.1", "value":"Part 1", "chapter":"alpha"},
{ "id":"1.2", "value":"Part 2", "chapter":"beta"}
],
});
treeTable.data.each(
function(obj){
webix.message(obj.value);
}
);

TreeGrid
DataGrid
List

Seems like on these components when webix.env.touch is true, each selection should be preserved. There is no way to select multiple selections otherwise. Changing this would only affect components that have multiple selections.

webix.env.touch ? true : e.ctrlKey

Seems to work well in several spots on touch based devices. Large lists are difficult just because of touch based nature. Other suggestion i would have would be like a hard touch where it enables you to just swipe your finger and select items, And tapping off of the component returns it to where you can scroll across it.

There is no API to uncheck all items
There is no API to set checked items and ask component to update 3-state checkboxes through all tree.

If you click on a column header and attempt to drag it, webix library throws an error.

Template attribute is ignored during initialization from XML ( tags content always overwrite it )

Confirmed for dataview

K is cut off on Shawshank. Depending on number of levels and width of data, width can be alot further off. _getColumnConfigSize is the method where the issue lives, and where max width on row items is calculated appears to be where the issue is, var d's children appears to have wrong sizes for the webix_tree_none, close, open.

**** Sample Code to produce issue *******

<body>
    <div class='header_comment'>Loading plain ('one-level') JSON data and grouping in nodes on the client side</div>
    <div id="testA" style='width:250px; height:250px; float:left'></div>
    <script type="text/javascript" charset="utf-8">

    webix.ready(function(){
        grida = new webix.ui({
            container:"testA",
            view:"treetable",
            columns:[
                { id:"value",   header:"Film title",    width:250, template:"{common.treetable()} #value#" },
                { id:"id",  header:"", css:{"text-align":"right"},      width:50},
                { id:"chapter", header:"Mode",  width:200}
            ],
            autoheight:true,
            autowidth:true,

            data: [
                { "id":"1", "value":"The Shawshank", "open":true, "data":[
                    { "id":"1.1", "value":"Part 1", "chapter":"alpha"},
                    { "id":"1.2", "value":"Part 2", "chapter":"beta", "open":true, "data":[
                        { "id":"1.2.1", "value":"Part 1", "chapter":"beta-twin"},
                        { "id":"1.2.2", "value":"Part 1", "chapter":"beta-twin"},
                    ]},
                    { "id":"1.3", "value":"Part 3", "chapter":"gamma" }
                ]},
                { "id":"2", "value":"The Godfather", "data":[
                    { "id":"2.1", "value":"Part 1", "chapter":"alpha" },
                    { "id":"2.2", "value":"Part 2", "chapter":"beta" }
                ]}
            ]
        }); 
        grida.adjustColumn("value", true);
    });
    </script>
</body>

Example: http://snippet.webix.io/a32c8a18

If the DataTable has "fillspace" for one of its columns and created inside MultiView, left position of columns is not calculated correctly.

1. Check any parent branch with its children - corresponding parent and children disappear in menu - ok.
2. Uncheck parent - corresponding parent item becomes visible in menu - ok. Its children also become visible in menu - bug.

sample:
/03_menu/10_hide_item.html

Not sure this a bug or just a it is what it is thing.

If you popup a window for some data processing that happens then close that window right afterwards the window remains open and will not close. As a work around you can create a timer to execute hide delayed afterwards.

Code to recreate would be just in the same method.
$$("dataLoad").show();
$$("dataLoad").hide();
with a basic window. Behavior you would expect is for window to be closed.

This maybe present in more components than List. Below is example code to reproduce the bug. Happens with objects or an array of strings. Also happens with loading from url vs inline datacollection.

This will result in 2 items in the List showing, it seems to count the DataCollection as an item as name shows DataCollection in the list.

    <body>
        <div id="testA" style='width:250px; height:250px; float:left'></div>
        <script type="text/javascript" charset="utf-8">

        var bookmarks = new webix.DataCollection({
            data: [
                    { name:"name 1", desc:"test 2"}
                ]
        });


        webix.ready(function(){
                grida = new webix.ui({
                    container:"testA",
                    data:bookmarks,
                    view:"list",
                    template:"#name# #desc#"
            }); 
        });
        </script>
    </body>

Not existing target for window:show
sample:
07_property/02_custom_checkbox.html

Doubleclick event on a table row is not called. The problem in IE8.

We can filter by all levels, and If the matched item is in a closed branch, then it is not visible, that is confusing.

Datatable isn't shown during markup initialization (though html is created for it), even with static container sizing.

15_datatable/23_html_only/01_init.html
as well as other samples from this folder.

At the same time, samples from 23_markup folder work fine.

Не срабатывает проперть $all в rules формы. (для staff manager)

On a list component items that are too long are hidden so the text doesn't wrap or display ugly.

If a Checkbox has a labelRight that is too long for the container it will not hide the overflow and the html will wrap making it display ugly.

Example:

var filterPanelScrollView = { 
        view:"scrollview",
        id:"scrollViewComponent",
        width:160,
        body:{
            view:"accordion",
            multi:true,
            id:"filterPanelAccordion",
            rows:[{ type:"space" }]
        },
        scroll:"y"
  };

webix.ready(function(){
    webix.ui(filterPanelScrollView);

    var itemElements = new Array();
    itemElements[0] = { view:"checkbox", labelRight:"Normal", value:0, labelAlign:"left", labelWidth:0};
    itemElements[1] = { view:"checkbox", labelRight:"Stage 1 Hypertension", value:0, labelAlign:"left", labelWidth:0};
    itemElements[2] = { view:"checkbox", labelRight:"Stage 2 Hypertension", value:0, labelAlign:"left", labelWidth:0};
    var template = {header:"Blood Pressure", body:{view:"form", elements:itemElements}}

    var accordion = { view:"accordion", multi:true, rows:[template] };
    $$("filterPanelAccordion").addView(accordion , $$("filterPanelAccordion").getChildViews().length);
});

Without a leftSplit (probably same is true for rightSplit and same with rows) you can click left or right of the scrollbar and the columns will scroll left or right. With the left split, scrolling doesn't respond except for clicking and dragging the scrollbar.

<body>
    <div class='header_comment'>Loading plain ('one-level') JSON data and grouping in nodes on the client side</div>
    <div id="testA" style='width:250px; height:250px; float:left'></div>
    <script type="text/javascript" charset="utf-8">

    webix.ready(function(){
        grida = new webix.ui({
            container:"testA",
            view:"treetable",
            columns:[
                { id:"value",   header:"Film title",    width:250, template:"{common.treetable()} #value#", format:testing},
                { id:"id",  header:"", css:{"text-align":"right"},  width:50, format:testing},
                { id:"chapter", header:"Mode",  width:200},
                { id:"chapter", header:"Mode",  width:200},
                { id:"chapter", header:"Mode",  width:200},
                { id:"chapter", header:"Mode",  width:200},
                { id:"chapter", header:"Mode",  width:200},
                { id:"chapter", header:"Mode",  width:200},
                { id:"chapter", header:"Mode",  width:200},
                { id:"chapter", header:"Mode",  width:200}
            ],
            autoheight:true,
            width:500,
            //autowidth:true,
            leftSplit:1,
            data: [
                { "id":"1", "value":"The Shawshank", "open":true, "data":[
                    { "id":"1.1", "value":"Part 1", "chapter":"alpha"},
                    { "id":"1.2", "value":"Part 2", "chapter":"beta", "open":true, "data":[
                        { "id":"1.2.1", "value":"Part 1", "chapter":"beta-twin"},
                        { "id":"1.2.2", "value":"Part 1", "chapter":"beta-twin"},
                    ]},
                    { "id":"1.3", "value":"Part 3", "chapter":"gamma" }
                ]},
                { "id":"2", "value":"The Godfather", "data":[
                    { "id":"2.1", "value":"Part 1", "chapter":"alpha" },
                    { "id":"2.2", "value":"Part 2", "chapter":"beta" }
                ]}
            ]
        }); 
        grida.adjustColumn("value", true);
    });

    function testing(value) {
        webix.message("Calling format function:" + value);
        return "TEST";
    }
    </script>
</body>

Code below works fine in 1.0 or build before it. In 1.01 or august 9th's build this is incorrect. Elements align horizontally vs vertically with new build. Was not able to identify what is causing it, below is an example. My guess is that the _vertical_orientation is not setting correctly on the layout or addView doesn't account for it anymore.

    var filterPanelScrollView = { 
            view:"scrollview",
            id:"scrollViewComponent",
            body:{
                view:"accordion",
                multi:true,
                id:"filterPanelAccordion",
                rows:[{ type:"space" }]
            },
            scroll:"y"
      };

  var filterPanel = {
            id:"filterPanel",
            view:"accordion",
            multi:true,
            cols:[ { header:"Filters", view:"accordionitem", id:"filterPanelLayoutAccodrion", body:filterPanelScrollView } ]
        };

  var ui_scheme={
         type:"line", id:"mainReportViewArea", view:"layout", width:200, cols:[ 
              filterPanel
          ]
        };  


    webix.ready(function(){
        webix.ui(ui_scheme);

        for (var i = 0; i < 10; i++) {          
            var listControl = {
                    view:"list",
                    autoheight:true,
                    scroll:false,
                    select:"multiselect",
                    data:["adfasdf", "asdfas","tets"]
            };

            template = {header:"header:" + i, body:listControl};
            var accordion = { view:"accordion", multi:true, rows:[template] };
            $$("filterPanelAccordion").addView(accordion , $$("filterPanelAccordion").getChildViews().length);
        }
    });

http://192.168.3.214/serv/staff2/staff-admin/index.php/resource

When resizing cell through resizer, inner content of cell can be selected, which is unwanted.

In fact dimensions (width in particular) are kept as defined, but elements are shifted towards container.

The issue can be seen in this example
http://docs.webixui.com/samples/13_form/01_controls/06_checkbox.html
on the Third Age labeled checkbox. If you need to get the checkbox to line up on the left, it is not possible as the regular left label is created with a width of the label width. The code to leave out that left label requires label to be null, this is not possible cause of how labelRight is handled.

Below is the code, i modified by commenting out the line to create the left label, which appears to work great. I would assume that line was put in so checkbox's would line up nicely on the form, if there was no text for the left label, like in the example, but i didn't see a way to omit that label with how it is currently coded.

webix.protoUI({
name:"checkbox",
defaults:{
template:function(config, common) {
var id = config.name || "x"+webix.uid();
var rightlabel = "";
if (config.labelRight){
rightlabel = ""+config.labelRight+"";
//config.label = config.label || " ";
}

        var ch = "<div style='line-height:"+common._settings.cheight+"px' class='webix_inp_checkbox_border webix_el_group'>" + 
            "<input style='margin-top:"+Math.floor((common._settings.aheight-16)/2)+"px' id='"+id+"' type='checkbox' "+(config.value?"checked='1'":"")+"/>" + 
            rightlabel+"</div>";
        return common._render_input(config, ch, 0, id);
    }
},

This is a fairly small isolated issue, that I've only seen in Chrome (IE and iOS are fine in my testing). The below code will cause the issue where the 2nd column's name word wraps and doesn't show. Changing spaces to %nbsp; seems to fix the issue and it only seems to happen on the 2nd column.

    var bookmarks = new webix.DataCollection({
        data: [
                { "id":"1", "value":"100%", "open":true, "data":[
                    { "id":"1.1", "value":"20%", "chapter":"alpha"},
                    { "id":"1.2", "value":"10%", "chapter":"beta", "open":true, "data":[
                        { "id":"1.2.1", "value":"15%", "chapter":"beta-twin"},
                        { "id":"1.2.2", "value":"20%", "chapter":"beta-twin"},
                    ]},
                    { "id":"1.3", "value":"10%", "chapter":"gamma" }
                ]},
                { "id":"2", "value":"50%", "data":[
                    { "id":"2.1", "value":"25%", "chapter":"alpha" },
                    { "id":"2.2", "value":"10%", "chapter":"beta" }
                ]}
            ]
    });


        grid = new webix.ui({
            container:"testA",
            view:"treetable",
            columns:[
                { id:"id",  header:"ID value", template:"{common.treetable()} #id#"},
                { id:"value",   header:"% Scripts"},
                { id:"value",   header:"% Scripts"},
                { id:"value",   header:"% Scripts"}
            ],
            autoheight:true,
            autowidth:true,
            data:bookmarks.serialize()
        });     

        grid.eachColumn(function(col) {
                grid.adjustColumn(col, true);
        });
        grid.refreshColumns();

Check
http://docs.webix.com/samples/25_pager/09_animate_types_datatable.html

When switching to new page, the existing data is replaced by white block and only after that new data appears, in other browsers, new data replaces old data without any gaps.

Having a datatable or treetable configured and calling adjustColumn(columnId, true) will cause an error.

_getColumnConfigSize:function(ind, headers) references a null object

    if (headers)
    for (var i=0; i<config.headers.length; i++){
        var header = config.headers[i].text;
        d.innerHTML = header;
        max = Math.max(d.scrollWidth, max);
    }

should be

    if (headers)
    for (var i=0; i<config.header.length; i++){
        var header = config.header[i].text;
        d.innerHTML = header;
        max = Math.max(d.scrollWidth, max);
    }

Confirmed works

Would it be possible to throw this in the codebase.
isColumnVisible:function(id) {
return webix.isUndefined(this._hidden_column_hash[id]) ? true : false;
},
around line 17,000ish right above hideColumn or so.

Would it also be possible to throw in column configs a visible:true/false variable to set the column as visible on creation? This config option would also need to stay in sync with the visibility of the column.