<p>This example uses the data-action="link" function to link array items.</p>

<h2>Simple one-way linking</h2>
<table class="table" style="width:50%">
    <thead>
        <tr>
            <td style="width:10%">Title</td>
            <td style="width:40%">In links</td>
        </tr>
    </thead>
    <tbody data-array="Items" data-autoinsert="1">
        <tr>
            <td data-func="input" data-name="Title" data-placeholder="Enter name">A item</td>
            <td>
                <select name="In" data-action="link" data-container="table"
                    data-target="Items" data-labelfield="Title" data-idfield="id"></select>
                    <input name="id" type="hidden" data-action="guid" />
            </td>
        </tr>
    </tbody>
</table>

<h2>Two-way linking</h2>
<table class="table">
    <thead>
        <tr>
            <td style="width:10%">Title</td>
            <td style="width:40%">In links</td>
            <td style="width:40%">Out links</td>
        </tr>
    </thead>
    <tbody data-array="Items" data-autoinsert="1">
        <tr>
            <td data-func="input" data-name="Title" data-placeholder="Enter name">B item</td>
            <td>
                <select multiple type="text" name="In" data-action="link" data-container="table"
                    data-target="Items" data-labelfield="Title" data-idfield="id" data-linkbackfield="Out"></select>
                    <input name="id" type="hidden" data-action="guid" />
            </td>
            <td>
                <select multiple type="text" name="Out" data-action="link" data-container="table"
                    data-target="Items" data-labelfield="Title" data-idfield="id" data-linkbackfield="In"></select>
            </td>            
        </tr>
    </tbody>
</table>

Output templates

Templates used for document and web page generation: