<div class="header-panel member">
<h2><span class="identifier">FlexGridDetailProvider</span> Class</h2>
<dl class="dl-horizontal">
<dt>File</dt><dd class="filename">wijmo.grid.detail.js</dd>
<dt>Module</dt><dd><a href="topic/wijmo.grid.detail.Module.html"><span class="identifier">wijmo.grid.detail</span></a></dd>
<dt>Derived Classes</dt><dd><a href="topic/wijmo-wijmo.angular2.grid.detail.WjFlexGridDetail.Class.html"><span class="identifier">WjFlexGridDetail</span></a></dd>
</dl>
<div class="comment"><p>Implements detail rows for <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a> controls.</p>
<p>To add detail rows to a <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a> control, create an instance of a
<a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html"><span class="identifier">FlexGridDetailProvider</span></a> and set the <a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#createDetailCell"><span class="identifier">createDetailCell</span></a> property
to a function that creates elements to be displayed in the detail cells.</p>
<p>For example:</p>


<pre>// create FlexGrid to show categories
var gridCat = new wijmo.grid.FlexGrid('#gridCat');
gridCat.itemsSource = getCategories();

// add detail rows showing products in each category
var detailProvider = new wijmo.grid.detail.FlexGridDetailProvider(gridCat);
detailProvider.createDetailCell = function (row) {
  var cell = document.createElement('div');
  var gridProducts = new wijmo.grid.FlexGrid(cell);
  gridProducts.itemsSource = getProducts(row.dataItem.CategoryID);
  return cell;
}</pre>
<p>The <a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html"><span class="identifier">FlexGridDetailProvider</span></a> provides a <a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#detailVisibilityMode"><span class="identifier">detailVisibilityMode</span></a> property
that determines when the detail rows should be displayed. The default value for
this property is <b>ExpandSingle</b>, which adds collapse/expand icons to the
row headers.</p>
<p>The example below shows how you can use a <a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html"><span class="identifier">FlexGridDetailProvider</span></a> to add
different types of detail to the rows in a <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a>:</p>
<p><div class="member-panel example"><h3 class="node collapsed">Example</h3><div class="fiddle"><script async src="https://jsfiddle.net/Wijmo5/r9up8exz/embed/result,html,js,css"></script></div></div></p></div>
</div>
<div class="member-panel class members" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<h3 class="node">Constructor</h3>
<ul>
<li class="mmethod"><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#constructor">constructor</a></li>
</ul>
<h3 class="node">Properties</h3>
<ul>
<li class="mproperty"><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#createDetailCell">createDetailCell</a></li>
<li class="mproperty"><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#detailVisibilityMode">detailVisibilityMode</a></li>
<li class="mproperty"><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#disposeDetailCell">disposeDetailCell</a></li>
<li class="mproperty"><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#grid">grid</a></li>
<li class="mproperty"><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#isAnimated">isAnimated</a></li>
<li class="mproperty"><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#keyActionEnter">keyActionEnter</a></li>
<li class="mproperty"><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#maxHeight">maxHeight</a></li>
<li class="mproperty"><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#rowHasDetail">rowHasDetail</a></li>
</ul>
<h3 class="node">Methods</h3>
<ul>
<li class="mmethod"><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#getDetailRow">getDetailRow</a></li>
<li class="mmethod"><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#hideDetail">hideDetail</a></li>
<li class="mmethod"><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#isDetailAvailable">isDetailAvailable</a></li>
<li class="mmethod"><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#isDetailVisible">isDetailVisible</a></li>
<li class="mmethod"><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#showDetail">showDetail</a></li>
</ul>
</div>
<h3>Constructor</h3>
<div id="constructor" class="member-panel mmethod">
<h3>constructor</h3>
<pre>constructor(grid: <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a>, options?: <span class="identifier">any</span>): <a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html"><span class="identifier">FlexGridDetailProvider</span></a></pre>
<div class="comment"><p>Initializes a new instance of the <a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html"><span class="identifier">FlexGridDetailProvider</span></a> class.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>grid</b>: <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a><br/><p><a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a> that will receive detail rows.</p></li><li><b>options</b>: <span class="identifier">any</span> <span class="badge">Optional</span><br/><p>Initialization options for the new <a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html"><span class="identifier">FlexGridDetailProvider</span></a>.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html"><span class="identifier">FlexGridDetailProvider</span></a></dd>
</dl>
</div>
<h3 class="node">Properties</h3>
<div class="member-list" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<div id="createDetailCell" class="member-panel mproperty">
<h3>createDetailCell</h3>
<div class="comment"><p>Gets or sets the callback function that creates detail cells.</p>
<p>The callback function takes a <a href="topic/wijmo.grid.Row.Class.html"><span class="identifier">Row</span></a> as a parameter and
returns an HTML element representing the row details.
For example:</p>


<pre>// create detail cells for a given row
dp.createDetailCell = function (row) {
  var cell = document.createElement('div');
  var detailGrid = new wijmo.grid.FlexGrid(cell, {
    itemsSource: getProducts(row.dataItem.CategoryID),
    headersVisibility: wijmo.grid.HeadersVisibility.Column
  });
  return cell;
};</pre></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function" target="_blank"><span class="identifier">Function</span></a></dd>
</dl>
</div>
<div id="detailVisibilityMode" class="member-panel mproperty">
<h3>detailVisibilityMode</h3>
<div class="comment"><p>Gets or sets a value that determines when row details are displayed.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="topic/wijmo.grid.detail.DetailVisibilityMode.Enum.html"><span class="identifier">DetailVisibilityMode</span></a></dd>
</dl>
</div>
<div id="disposeDetailCell" class="member-panel mproperty">
<h3>disposeDetailCell</h3>
<div class="comment"><p>Gets or sets the callback function that disposes of detail cells.</p>
<p>The callback function takes a <a href="topic/wijmo.grid.Row.Class.html"><span class="identifier">Row</span></a> as a parameter and
disposes of any resources associated with the detail cell.</p>
<p>This function is optional. Use it in cases where the 
<a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html/#createDetailCell"><span class="identifier">createDetailCell</span></a> function allocates resources that are not
automatically garbage-collected.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function" target="_blank"><span class="identifier">Function</span></a></dd>
</dl>
</div>
<div id="grid" class="member-panel mproperty">
<h3>grid</h3>
<div class="comment"><p>Gets the <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a> that owns this <a href="topic/wijmo.grid.detail.FlexGridDetailProvider.Class.html"><span class="identifier">FlexGridDetailProvider</span></a>.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a></dd>
</dl>
</div>
<div id="isAnimated" class="member-panel mproperty">
<h3>isAnimated</h3>
<div class="comment"><p>Gets or sets a value that indicates whether to use animation when
showing row details.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></dd>
</dl>
</div>
<div id="keyActionEnter" class="member-panel mproperty">
<h3>keyActionEnter</h3>
<div class="comment"><p>Gets or sets the action to perform when the ENTER key is pressed.</p>
<p>The default setting for this property is <a href="topic/wijmo.grid.detail.KeyAction.Enum.html"><span class="identifier">None</span></a>,
which lets the grid handle the key.
The other option is <a href="topic/wijmo.grid.detail.KeyAction.Enum.html"><span class="identifier">ToggleDetail</span></a>, which handles 
the Enter key to toggle the display of the row details.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="topic/wijmo.grid.detail.KeyAction.Enum.html"><span class="identifier">KeyAction</span></a></dd>
</dl>
</div>
<div id="maxHeight" class="member-panel mproperty">
<h3>maxHeight</h3>
<div class="comment"><p>Gets or sets the maximum height of the detail rows, in pixels.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank"><span class="identifier">number</span></a></dd>
</dl>
</div>
<div id="rowHasDetail" class="member-panel mproperty">
<h3>rowHasDetail</h3>
<div class="comment"><p>Gets or sets the callback function that determines whether a row 
has details.</p>
<p>The callback function takes a <a href="topic/wijmo.grid.Row.Class.html"><span class="identifier">Row</span></a> as a parameter and
returns a boolean value that indicates whether the row has
details. For example:</p>


<pre>// remove details from items with odd CategoryID
dp.rowHasDetail = function (row) {
  return row.dataItem.CategoryID % 2 == 0;
};</pre>
<p>Setting this property to null indicates all rows have details.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function" target="_blank"><span class="identifier">Function</span></a></dd>
</dl>
</div>
</div>
<h3 class="node">Methods</h3>
<div class="member-list" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<div id="getDetailRow" class="member-panel mmethod">
<h3>getDetailRow</h3>
<pre>getDetailRow(row: <span class="identifier">any</span>): <a href="topic/wijmo.grid.detail.DetailRow.Class.html"><span class="identifier">DetailRow</span></a></pre>
<div class="comment"><p>Gets the detail row associated with a given grid row.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>row</b>: <span class="identifier">any</span><br/><p>Row or index of the row to investigate.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><a href="topic/wijmo.grid.detail.DetailRow.Class.html"><span class="identifier">DetailRow</span></a></dd>
</dl>
</div>
<div id="hideDetail" class="member-panel mmethod">
<h3>hideDetail</h3>
<pre>hideDetail(row?: <span class="identifier">any</span>): <span class="identifier">void</span></pre>
<div class="comment"><p>Hides the detail row for a given row.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>row</b>: <span class="identifier">any</span> <span class="badge">Optional</span><br/><p>Row or index of the row that will have its details hidden.
This parameter is optional. If not provided, all detail rows are hidden.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><span class="identifier">void</span></dd>
</dl>
</div>
<div id="isDetailAvailable" class="member-panel mmethod">
<h3>isDetailAvailable</h3>
<pre>isDetailAvailable(row: <span class="identifier">any</span>): <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></pre>
<div class="comment"><p>Gets a value that determines if a row has details to show.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>row</b>: <span class="identifier">any</span><br/><p>Row or index of the row to investigate.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></dd>
</dl>
</div>
<div id="isDetailVisible" class="member-panel mmethod">
<h3>isDetailVisible</h3>
<pre>isDetailVisible(row: <span class="identifier">any</span>): <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></pre>
<div class="comment"><p>Gets a value that determines if a row's details are visible.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>row</b>: <span class="identifier">any</span><br/><p>Row or index of the row to investigate.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></dd>
</dl>
</div>
<div id="showDetail" class="member-panel mmethod">
<h3>showDetail</h3>
<pre>showDetail(row: <span class="identifier">any</span>, hideOthers?: <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a>): <span class="identifier">void</span></pre>
<div class="comment"><p>Shows the detail row for a given row.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>row</b>: <span class="identifier">any</span><br/><p>Row or index of the row that will have its details shown.</p></li><li><b>hideOthers</b>: <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a> <span class="badge">Optional</span><br/><p>Whether to hide details for all other rows.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><span class="identifier">void</span></dd>
</dl>
</div>
</div>
