Set AppendTo Option for Grid's Filter Popup elements

[Ben]

I am using Kendo Commercial - 2015.3.1111.

I am using the following widgets/frameworks in SPA-architectured application.

jQuery 2.1.4

Kendo Router

Kendo View

Kendo Layout

Kendo MVVM

RequireJs

RequireText - For loading external views

Kendo Grid,Window,ComboBox

When the Grid's filter mode is set to Row, there are several k-list-containers (k-popup also) that are appended outside of my View's top level HTML element, but are appended in the BODY element.  This same behavior happens for the Kendo ComboBox.  However, the Kendo ComboBox has an option named AppendTo that allows the auto-generated elements to be placed in the View's top level element.

Is it possible to set an option (appendTo?) on the Grid that will place these auto-generated elements in the container of my choice?

 This would allow the DOM to remain "cleaner" without having to destroy the View.  Perhaps, destroying the view is the intended action.  If so, I am also struggling with re-initalizing the View when it is subsequently navigated.

 Example of ComboBox with AppendTo:

HTML:

<input id="timeZoneInfoId" data-bind="source: timeZones, value: selectedUser.timeZoneInfoId" style="width:100%" />

JavaScript: (this is in the View's Init event) (#viewMaintenance is the top level View element)

$('#timeZoneInfoId').kendoComboBox({
                dataTextField: 'name',
                dataValueField: 'timeZoneInfoId',
                popup: {
                    appendTo: $('#viewMaintenance')
                }
            });

 My Grid:

HTML:

<div id="gridMaintenance"
         name="gridMaintenance"
         data-role="grid"
         data-selectable="row"
         data-scrollable="true"
         data-sortable="true"
         data-editable="false"
         data-filterable="{mode: 'row'}"
         data-columns="[
            { field: 'tenantUserId', title: 'User Id' },
            { field: 'firstName', title: 'First Name' },
            { field: 'lastName', title: 'Last Name' },
            { field: 'isActive', title: 'Active'}
        ]"
         data-bind="source: users, events: {change: gridSelectionChange}"
         data-auto-bind="false"
         data-toolbar="[{template: kendo.template($('#gridToolbar').html())}]">
    </div>

Thanks for your help,

Ben

[Alex Gyoshev]

Hello Ben,

I am afraid that the grid does not provide such an option at this time. You can destroy the widget once you want to remove the elements from the DOM. If you want to re-initialize a view, you need to keep its original markup and re-initialize it (or reload it, if it is a remote view).

Regards,
Alex Gyoshev
Telerik