This is a migrated thread and some comments may be shown as answers.

Set AppendTo Option for Grid's Filter Popup elements

1 Answer 178 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ben
Top achievements
Rank 1
Ben asked on 23 Dec 2015, 01:25 PM

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

1 Answer, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 25 Dec 2015, 10:18 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Ben
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Share this question
or