How to Add new item to MVC ListView in a Popup?

[Bob]

I have a ListView that works very nicely with most of the default behavior as shown below.  However, I would like to create a new item in the ListView by using a Popup form.  This form could also be used by the edit event if that simplifies the code, but does not have to be the same, and the edit functionality could work as it does now.  I have looked at the popup editing feature as described here.  However, I could not figure out how to make this work for create as there is no create event on the ListView.  Does everything have to work outside the framework of the control, so that the add is using a separate Ajax call and then refreshing the view, or is there a better way to keep this within the structure of the ListView and its events?

Add Button and ListView:

            @(Html.Kendo().Button()
                .Name("AddNew")
                .Icon("plus")
                .FillMode(ButtonFillMode.Solid)
                .Rounded(Rounded.Medium)
                .HtmlAttributes(new { @class = "add-button" })
                .Events(e=>e.Click("addNewClick"))
            )

            @(Html.Kendo().ListView<MyNamespace.Models.ItemComment>()
                .Name("listView")
                .TagName("div")
                .ClientTemplateId("commentListTemplate")
                .Editable()
                .DataSource(dataSource => dataSource
                    .Model(model => model.Id(comment => comment.CommentID))
                    .Read(read => read.Action("Comments_Read", "Comment").Data("getCommentReadParameters"))
                    .Update(update => update.Action("Comments_Update", "Comment"))
                    .Destroy(destroy => destroy.Action("Comments_Delete", "Comment"))
                    .Events(e => e.Error("epic.error.kendoErrorHandler"))
                )
                .Events(e => e.DataBound("onCommentsDataBound"))
                .Events(e => e.Remove("deleteConfirmation"))

            )

Display Template:

<script type="text/x-kendo-tmpl" id="commentListTemplate">
     <div class="k-card">
            <div class="k-card-body k-card-horizontal k-vbox k-column" style="margin:0;padding:4px 4px 0">
                <img class='k-card-image' style="height:16px; margin-right:5px;" src="@Url.Content("~/Content/assets/images/blue-person.png")">
                <div class='commentHeader'>
                    <h6 class='k-card-subtitle'>#= UserID #</h6>
                    <div class="edit-buttons">
                        <a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-edit-button" href="\\#">#= kendo.ui.icon({ icon: 'pencil' }) #</a>
                        <a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-delete-button" href="\\#">#= kendo.ui.icon({ icon: 'x' }) #</a>
                    </div>
                    <p>
                        #: Comment #
                    </p>
                </div>
            </div>
    </div>
</script>

Supporting JavaScript functions:

<script type="text/javascript">

    function onCommentsDataBound() {
        if (this.dataSource.data().length == 0) {
            $("#listView").append("<h3 style='padding: 2px 4px 0;'>No comments</h3>");
        }
    }

    function addNewClick(e) {
        var listView = $("#listView").data("kendoListView");
        listView.add();
        e.preventDefault();
    }

    function deleteConfirmation(event) {

        if (!confirm("Are you sure you want to delete this comment?"))
            event.preventDefault();
    }

</script>

Thanks, Bob