<h2>{{ title }}</h2>
<p>
    This sample shows how to highlight invalid cells of a FlexGrid in the exported document.
    <a href="" target="_self" data-toggle="collapse" data-target=".collapse" class="collapse in read-more">Read More</a>
</p>

<div class="collapse">
    <p>
        For the FlexGrid's invalid cells to be highlighted in the exported document the following steps should be performed:
    </p>
    <ol>
        <li>Make sure that <b>FlexGrid.showErrors</b> property is turned on.</li>
        <li>Specify the <b>errorCellStyle</b> property of the <b>styles</b> export setting. This style will be applied to each invalid cell being rendered.</li>
    </ol>
    <p>
        Note: there is no need to specify the errorCellStyle property if <a href="#/flexgridpdfconverter/custom-cell-content">custom cell content</a> mode is used.
    </p>
    <p>
        In this sample the following code highlights invalid cells with the pale red color:
    </p>
    <pre>
wijmo.grid.pdf.FlexGridPdfConverter.export($scope.ctx.grid, 'FlexGrid.pdf', {
    styles: {
        errorCellStyle: {
            backgroundColor: 'rgba(255, 0, 0, 0.3)'
        }
    }
})</pre>
</div>

<!-- Export settings -->
<div class="panel-group" id="exportSettings">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#settings" href="#settingsBody" target="_self">FlexGrid Settings</a>
            </h4>
        </div>
        <div id="settingsBody" class="panel-collapse collapse in">
            <div class="panel-body">
                    <label>
                        Show Errors 
                        <input type="checkbox" ng-model="ctx.showErrors" />
                    </label>
            </div>
        </div>
    </div>
</div>

<!-- Export button -->
<button class="btn btn-default" id="Button1" ng-click="export()">Export</button>

<!-- FlexGrid -->
<wj-flex-grid class="grid"
        control="ctx.grid"
        selection-mode="ListBox"
        headers-visibility="All"
        show-errors="{{ctx.showErrors}}"
        items-source="ctx.data">
    <wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column>
    <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
    <wj-flex-grid-column header="Product" binding="product"></wj-flex-grid-column>
    <wj-flex-grid-column header="Amount" binding="amount" format="c" aggregate="Sum"></wj-flex-grid-column>
    <wj-flex-grid-column header="Active" binding="active"></wj-flex-grid-column>
</wj-flex-grid>
