Cannot insert Table at binding

Question

I am trying to insert a Table into a RichText Content Control (I found documentation stating bindings only work with RichText controls) but it fails with:

The type of the specified data object is not compatible with the current selection.

I am able to insert HTML into the binding with coercionType "html". I am also able to insert a table at the selection cursor but that seriously degrades the document automation experience if someone has to click where they want the table. I can also insert the Table by programmatically navigating to the binding then doing the insert but this seems a bit hacky. Is my syntax just wrong or is it not possible to insert a Table at a binding without the current selection being within it?

CSHTML:

@{
    ViewBag.Title = "Home Page";
}

<div class="row">
    <button onclick="return addRowsWithoutSelection();"> Insert Table At Binding </button><br />
    <button onclick="return navigateToBinding();"> Navigate then insert table </button><br />
    <button onclick="return addRowsAtSelection();"> Insert Table At Selection </button><br />
    <button onclick="return addHTML();"> Insert HTML </button><br />
</div>
    Results: <div id="results"></div>
<div id="trace"></div>

Program.js:

var myTable;

// The initialize function is required for all apps.
Office.initialize = function (reason) {
    $(document).ready(function () {

        myTable = new Office.TableData();
        myTable.headers = ["First Name", "Last Name", "Grade"];
        myTable.rows = [["Brittney", "Booker", "A"], ["Sanjit", "Pandit", "C"], ["Naomi", "Peacock", "B"]];

        try {
            Office.context.document.bindings.addFromNamedItemAsync('TheTable',
                Office.BindingType.Text, { id: 'tbl' },
                    function (result) {
                        if (result.status === Office.AsyncResultStatus.Succeeded) {
                            trace('Control bound. Binding.id: ' + result.value.id + ' Binding.type: ' + result.value.type);
                        } else {
                            trace('Error:', result.error.message);
                        }
                    });

        } catch (e) { trace("Exception: " + e.message); }
    });
}

//THIS WORKS!
function addHTML() {
    try {
        Office.select("bindings#tbl").setDataAsync("<table border='1' width='100%'><thead><tr><th style='background-color:#ff00ff'>Description</th><th>From</th><th>To</th></tr></thead></table>", { coercionType: "html" },
            function (asyncResult) {
                if (asyncResult.status == "failed") {
                    trace('Error with addHTML : ' + asyncResult.error.message);
                } else { trace("Success calling addHTML()"); }
            });

    } catch (e) { trace("Exception: " + e.message); }
}
//THIS WORKS!
function addRowsAtSelection() {

    try {
        Office.context.document.setSelectedDataAsync(myTable, { coercionType: Office.CoercionType.Table },
            function (result) {
                var error = result.error
                if (result.status === Office.AsyncResultStatus.Failed) {
                    trace(error.name + ": " + error.message);
                } else { trace("Success calling addRowsAtSelection"); }
            });
    } catch (e) { trace("Exception: " + e.message); }
}

//FAIL!
function addRowsWithoutSelection() {
    try {
        Office.select("bindings#tbl").setDataAsync(myTable, { coercionType: Office.CoercionType.Table },
            function (asyncResult) {
                if (asyncResult.status == "failed") {
                    trace("Action failed with error: " + asyncResult.error.message);
                } else { trace("Success with addRowsWithoutSelection.");}
            });
    } catch (e) {trace("Exception: " + e.message);}
}

//WORKS!
function navigateToBinding() {
    Office.context.document.goToByIdAsync("tbl", Office.GoToType.Binding, function (asyncResult) {
        if (asyncResult.status == "failed") {
            trace("Go To Binding failed with error: " + asyncResult.error.message);
        }
        else {
            trace("Navigation successful");
            try {
                Office.context.document.setSelectedDataAsync(myTable, { coercionType: Office.CoercionType.Table },
                   function (asyncResult) {
                       if (asyncResult.status == "failed") {
                           trace("Action failed with error: " + asyncResult.error.message);
                       } else { trace("Success with addRowsWithoutSelection."); }
                   });
            } catch (e) { trace("Exception: " + e.message); }
        }
    });
}
function trace(msg) {
    $("#trace").append(msg + "<br />");
}

Answer 1

I think you might have got the wrong biding type. In your code
Office.BindingType.Text, { id: 'tbl' }, you choose to use a text binding. However, if you are working on a table and want to use table features, you might want to use Table Binding instead. You can find more information on Binding types on https://msdn.microsoft.com/en-us/library/office/fp142273.aspx

thanks, Sky