question on webix-ui tab with datatable

Webix JS
#1

In the example below, the data from my datatable did not display when I had the webix-ui tag on the second div below “Tab2”. I was able to make it work, quite by accident, by moving the tag to the div above it (see sample code).

I have about 1 day experience with webix. Demo-ing it for a new project. Also wondering how well angular is integrated. I saw some unanswered posts about problems with angular routing.

<html ng-app="app">
<head>
...
</head>
<body>
<div webix-ui type="space"> <!--layout rows with type "space" are created-->
    <div height="35">Header { {app} }</div>
    <!--Webix template is inited -->
    <div view="cols" type="wide" margin="10"> <!--Webix layout cols are inited-->
        <div width="200">
            <input type="text" placeholder="Type here" ng-model="app">
        </div>
        <div view="resizer"></div>
        <div view="tabview">
            <div header="Tab1">

                <div style="width:750px;">
                    <div webix-ui view="datatable" webix-data="list" autoheight="true" select="row"  ng-controller="ngeDemo.MainPanelController">
                        <div view="column" id="ID" sort="int" css="rating">Rating</div>
                        <div view="column" id="Name" sort="string">Name</div>
                        <div view="column" id="Company" sort="string" fillspace="true">Company</div>
                  </div>
               </div>
                <!-- -->
            </div>
            <div header="Tab2">
<!--                
Does not display data when webix-ui tab is on second div
                    <div  style="width:750px;">
                        <div  webix-ui   view="datatable" webix-data="movies" autoheight="true" select="row" ng-controller="ngeDemo.MovieController">
  -->  
    
                    <div  webix-ui style="width:750px;">
                        <div    view="datatable" webix-data="movies" autoheight="true" select="row" ng-controller="ngeDemo.MovieController">
                        <div view="column" id="rating" sort="int" css="rating">Rating</div>
                        <div view="column" id="title" sort="string" fillspace="true">Title</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div height="35">Footer</div>
</div>
</body>
</html>
#2

if Webix sees a div without “view” attribute it will not process the content of such tag. Such tag will be used as raw HTML data.

#3

While Webix works with Angular quite fine, it was designed to be work separately, so many parts of Webix work differently than similar parts in the Angular.

As for the above code, each time when Webix finds the non-view HTML tag, it stops further parsing. So instead of placing multiple webix-ui, just be sure that you are not-including the pure HTML markup between different components.

#4

Thank you for your quick response.

Just so I understand correctly, if webix sees a div that does not have a webix-ui tag, it stops further processing and assumes that no div underneath it will have a webix-ui tag. If that is the case then why did the first datatable get processed as it is within several div tags that do not have a webix-ui tag.