Initialising richselects via XML

Webix JS
#1

Hello again,

I was playing around with XML initialisation and stumbled across a problem. I don’t know if this is possible or supposed to be possible, but I tried to build a UI with a richselect in it. The richselect shows up, but I can’t figure out how to add options to it. This is what I have:

<ui>
  <rows>
    <form>
      <richselect>
        <!-- What goes in here? -->
      </richselect>
    </form>
  </rows>
</ui>

Snippet#3aff4084

I tried everything from <data> over <options> <option> and combinations of those, but no success. Is this process documented somewhere?

#2

You can add stack="true" in places where json code uses arrays.

      <richselect>
        <options stack='true'>
          <item id='1'>One</item>
          <item id='2'>Two</item>
          <item id='3'>Three</item>
        </options>
      </richselect>

http://webix.com/snippet/e53ba3fc

#3

Thanks for the quick response. I can’t get it to work outside of the snippet editor, though. The select component is visible, but its text content is “One Two Three” and there are no options. I don’t know what’s wrong.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>XML Init</title>
    <script src="webix/webix.js"></script>
    <link rel="stylesheet" href="webix/webix.css">
  </head>
  <body>
    <ui>
      <rows>
        <form>
          <richselect>
            <options stack="true">
              <item id="1">One</item>
              <item id="2">Two</item>
              <item id="3">Three</item>
            </options>
          </richselect>
        </form>
      </rows>
    </ui>
    <script>
      webix.markup.namespace = "";
      webix.markup.init();
    </script>
  </body>
</html>
#4

You are placing xml tags directly in the HTML and as result they are parsed by HTML rules. HTML is case-insensitive so instead of “options” it generates “OPTIONS” collection, which doesn’t work.

I will add a fix for next build to parse such stuctures from HTML

For now you can
a) use xml files with markup
or
b) use namespaced markup ( it will work from HTML )
http://webix.com/snippet/d3b87387

#5

I tried to use namespaced markup (I just removed it in the example to match the rest of the code). What I did wrong was to use <options stack="true"> instead of <richselect stack="options">.

I find the XML initalisation very confusing in this regard. Seemingly identical things work differently, depending on the component you’re creating. List data, for example, uses <data> and <item>, for options in selects you can either use <options stack="true"> or <richselect stack="options">. The documentation doesn’t really seem to reveal what the differences are and when to use which of these methods.

But maybe it’s really obvious and I look at it from a wrong perspective.

#6

Documentations describe the json data format for all components.

When you are using XML you can use json data format as a base. Webix doesn’t have some special set of rules for XML data it converts XML to json and uses the normal json initialization.

So list view has data property - xml for list need to have a data subtag. If you are using richselect, it has an options configuration in json - similar you can use options tag in XML.

In places where you need to have an array of options - use stack attribute on related tag.