magento2 add or update items of a row builder widget programmatically

Question

How can i add/update items of a row builder widget when clicking on a button? I have a button in my page, and i want to update a row builder widget when a user clicks on it. The button will send an ajax request to remote server and then i will use its response to add some items into the row widget.

my current code is like the below:

<div id="properties-container">
    <?php
      $dataMageInit = '
        {
            "rowBuilder":{
                "rowTemplate":"#properties-row-template",
                "rowContainer":"#properties-row-container",
                "rowParentElem":"<tr></tr>",            
                "remEventSelector":"button",
                "btnRemoveSelector":"[id^=btn-remove]",
                "maxRows":"30",
                "maxRowsMsg":"#max-properties-message",
                "addRowBtn":"#add-property",
                "additionalRowClass":"additional",
                "hideFirstRowAddSeparator":false,
                "formDataPost":'.$block->getPropertiesJson().'
            }
        }
      ';
    ?>

    <table class="properties" data-mage-init='<?php echo $dataMageInit; ?>'>
        <thead>
            <tr>
                <th><?php echo $block->escapeHtml(__('Name')) ?></th>
                <th><?php echo $block->escapeHtml(__('Value')) ?></th>
                <th><?php echo $block->escapeHtml(__('Action')) ?></th>
            </tr>
        </thead>
        <tbody id="properties-row-container"></tbody>
        <tfoot>
            <tr class="text-center">
                <td colspan="3">
                    <p id="max-properties-message" style="display: none;" class="message notice limit" role="alert">
                        <span><?php echo $block->escapeHtml(__('Number of properties exceeded')) ?></span>
                    </p>

                    <button id="add-property" type="button" class="btn btn-primary">
                        <span class="fa fa-plus"></span>
                        <span><?php echo $block->escapeHtml(__('Add Property')) ?></span>
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

<script id="properties-row-template" type="text/x-magento-template">
    <td>
        <input id="property-name<%- data._index_ %>" name="property[name][<%- data._index_ %>]" placeholder="<?php echo $block->escapeHtml(__('Name')) ?>" class="admin__control-text w-100" type="text">
    </td>
    <td>
        <input id="property-value<%- data._index_ %>" name="property[value][<%- data._index_ %>]"  placeholder="<?php echo $block->escapeHtml(__('Value')) ?>" class="admin__control-text w-100" type="text">
    </td>
    <td>
        <button id="btn-remove<%- data._index_ %>" class="btn btn-danger" type="button">
            <span class="fa fa-trash"></span>
        </button>
    </td>
</script>

Answer 1

it can be done by calling proccessFormDataArr like the below:

var data = {
    formData: [
        ["1", "2"],
        ["3", "4"],
        ["5", "6"],
        ["7", "8"],
        ["9", "10"],
        ["11", "12"],
        ["13", "14"],
        ["15", "16"],
        ["17", "18"],
        ["19", "20"],
    ],
    templateFields: [
        "property-name", "property-value"
    ]
};

$("table.properties").rowBuilder(
  "proccessFormDataArr", data
);