@model IEnumerable<FlexGridData.Sale>

<h1>
    Controls and Elements
</h1>
<p>
    Every MVC control is associated with an HTML element that
    hosts it on the page.
</p>

<p>
    To get a reference to the element hosting the control, use the
    <b>hostElement</b> property (available in every C1 MVC control).
    Use the static method <b>wijmo.Control.getControl(element)</b>
    to get a reference to the control being hosted by an element.
</p>


<p>In applications having tab controls or dynamic views, the control
   layout often becomes invalid if the size or visibility of the host
    element is changed and the control is not notified about the same.</p>

<p>
    However, in case of MVC controls, layout of all the controls is
    updated according to the size of their host elements. MVC controls
    provide <a href="http://helpcentral.componentone.com/nethelp/c1mvchelpers/wijmo.Control.Class.html#invalidateAll">
        wijmo.Control.invalidateAll
    </a> method to notify the controls about change in their host element, 
    so that the controls update their layout accordingly.
</p>

<p>
    For example, use the buttons below to observe resizing in the grid in
    two cases; without using <b>invalidateAll</b> method (WRONG way) and the case 
    using <b>invalidateAll</b> method (RIGHT way):
</p>

<button id="toggleFont" class="btn btn-primary">Toggle Font</button>
<button id="resizeBad" class="btn btn-danger">Toggle Size (WRONG)</button>
<button id="resizeGood" class="btn btn-success">Toggle Size (RIGHT)</button>
@Html.C1().FlexGrid().Id("theGrid").Bind(Model).ShowMarquee(true).ShowSelectedHeaders(C1.Web.Mvc.Grid.HeadersVisibility.All).ShowAlternatingRows(false)
