Edit this page

Widget DOM Elements

Each Kendo UI widget instance keeps references to the element and wrapper elements.

The Kendo UI Hybrid widgets have an element reference only.

References

The element is the element from which the widget is initialized while the wrapper is the outermost element, which is a part of the widget.

Element

Depending on the widget, element might be visible—as in the AutoComplete, Calendar, DatePicker, or hidden—as in the DropDownList and Upload. A reference to this element is also returned by the initialization statement.

For more information, refer to the element configuration in the widget API.

Wrapper

Depending on the widget and the exact scenario, the wrapper and the element might match. For example, if the Grid is initialized from a <div>, the two references match. But if the Grid is initialized from a <table>, then element points to <table>, while wrapper points to <div>.

For more information, refer to the wrapper configuration in the widget API.

The following example demonstrates how to use the element and wrapper references.

Example
<div id="myWindow">...window content...</div>
<script>
    // initialize the widget, which also returns the widget element
    var winElement1 = $("#myWindow").kendoWindow( { /*...*/ } ); // returns div#myWindow as a jQuery object
    var winObject = $("#myWindow").data("kendoWindow");

    // other ways to get the widget element
    var winElement2 = $("#myWindow");
    var winElement3 = $("#myWindow").data("kendoWindow").element; // returns div#myWindow as a jQuery object
    var winElement4 = winObject.element;

    // get the wrapper
    var winWrapper1 = $("#myWindow").data("kendoWindow").wrapper; // returns div.k-window as a jQuery object
    var winWrapper2 = winObject.wrapper; // returns div.k-window as a jQuery object
</script>

Usage

A reference to the widget wrapper might be needed when doing DOM or CSS manipulations. For example, to hide a widget, hide the wrapper. Hiding the element might partially hide the widget or not hide it at all. The wrapper is also the most suitable HTML node for appending custom CSS classes.

Obtaining a reference to the element of the widget from the widget object is a relatively rare scenario, but might be helpful in some cases, especially when hardcoding IDs in jQuery selectors is not desired.

See Also

Other articles on Kendo UI widget basics:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy