# Wijmo_Grid_Style.Flexgridstyle

## Content

<div class="content__tsd">
						<div style="display:flex;justify-content:space-between;align-items:center">
							<h1>
								FlexGridStyle Class
							</h1>
						</div>
						<section class="tsd-comment">
							<div class="tsd-comment">
								<div class="lead">
									<p>Implements a styling API for <a href="wijmo_grid.flexgrid.html">FlexGrid</a> controls.</p>
								</div>
								<p>To style cells in a <a href="wijmo_grid.flexgrid.html">FlexGrid</a> control, create an instance
									of the <a href="wijmo_grid_style.flexgridstyle.html">FlexGridStyle</a> and pass the grid as a parameter to the
								constructor. For example:</p>
								<pre><code class="language-typescript"><span class="hljs-keyword">import</span> { FlexGrid } <span class="hljs-keyword">from</span> <span class="hljs-string">'@mescius/wijmo.grid'</span>;
<span class="hljs-keyword">import</span> { FlexGridStyle } <span class="hljs-keyword">from</span> <span class="hljs-string">'@mescius/wijmo.grid.style'</span>;
<span class="hljs-keyword">let</span> theGrid = <span class="hljs-keyword">new</span> FlexGrid(<span class="hljs-string">'#theGrid'</span>); <span class="hljs-comment">// create the grid</span>
<span class="hljs-keyword">let</span> flexGridStyle = <span class="hljs-keyword">new</span> FlexGridStyle(theGrid); <span class="hljs-comment">// create an object of FlexGridStyle</span></code></pre>
								<p>The <a href="wijmo_grid_style.flexgridstyle.html">FlexGridStyle</a> class depends on the <strong>wijmo.grid</strong> module.</p>
								<p>The example below shows how you can use <a href="wijmo_grid_style.flexgridstyle.html">FlexGridStyle</a> to add/remove
								styles on <a href="wijmo_grid.flexgrid.html">FlexGrid</a> control:</p>
								<p><a href="/wijmo/demos/Grid/Styling/StyleAPI/purejs" target="_blank">Example</a></p>
							</div>
						</section>
						<section class="tsd-hierarchy">
							<h3>Heirarchy</h3>
							<ul class="tsd-hierarchy">
								<li>
									<span class="target">FlexGridStyle</span>
								</li>
							</ul>
						</section>
						<section class="tsd-index-group">
							<section class="tsd-index-panel">
								<div class="tsd-index-content">
									<section class="tsd-index-section ">
										<div class="title">
											<div class="gc_api_tree-item_icon_img_wrapper">
												<div class="gc_api_tree-item_icon_img" data-expand="true">
												</div>
											</div>
											<h3>
												Constructors
											</h3>
										</div>
										<ul class="tsd-index-list">
											<li class="tsd-kind-constructor tsd-parent-kind-class"><a href="wijmo_grid_style.flexgridstyle.html#constructor" class="tsd-kind-icon">constructor</a></li>
										</ul>
									</section>
									<section class="tsd-index-section ">
										<div class="title">
											<div class="gc_api_tree-item_icon_img_wrapper">
												<div class="gc_api_tree-item_icon_img" data-expand="true">
												</div>
											</div>
											<h3>
												Methods
											</h3>
										</div>
										<ul class="tsd-index-list">
											<li class="tsd-kind-method tsd-parent-kind-class"><a href="wijmo_grid_style.flexgridstyle.html#applystyle" class="tsd-kind-icon">apply<wbr>Style</a></li>
											<li class="tsd-kind-method tsd-parent-kind-class"><a href="wijmo_grid_style.flexgridstyle.html#clearallstyles" class="tsd-kind-icon">clear<wbr>All<wbr>Styles</a></li>
											<li class="tsd-kind-method tsd-parent-kind-class"><a href="wijmo_grid_style.flexgridstyle.html#removestyle" class="tsd-kind-icon">remove<wbr>Style</a></li>
											<li class="tsd-kind-method tsd-parent-kind-class"><a href="wijmo_grid_style.flexgridstyle.html#toggleclass" class="tsd-kind-icon">toggle<wbr>Class</a></li>
										</ul>
									</section>
								</div>
							</section>
						</section>
						<section class="tsd-panel-group tsd-member-group ">
							<h2>Constructors</h2>
							<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class">
								<a name="constructor" class="tsd-anchor"></a>
								<h3>constructor</h3>
								<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">new <wbr>Flex<wbr>Grid<wbr>Style<span class="tsd-signature-symbol">(</span>grid<span class="tsd-signature-symbol">: </span><a href="wijmo_grid.flexgrid.html" class="tsd-signature-type">FlexGrid</a>, options<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="wijmo_grid_style.flexgridstyle.html" class="tsd-signature-type">FlexGridStyle</a></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>Initializes a new instance of the <a href="wijmo_grid_style.flexgridstyle.html">FlexGridStyle</a> class.</p>
											</div>
										</div>
										<h4 class="tsd-parameters-title">Parameters</h4>
										<ul class="tsd-parameters">
											<li>
												<h5>grid: <a href="wijmo_grid.flexgrid.html" class="tsd-signature-type">FlexGrid</a></h5>
												<div class="tsd-comment">
													<div class="lead">
														<p>The <a href="wijmo_grid.flexgrid.html">FlexGrid</a> to style.</p>
													</div>
												</div>
											</li>
											<li>
												<h5><span class="tsd-flag ts-flagOptional">Optional</span> options: <span class="tsd-signature-type">any</span></h5>
												<div class="tsd-comment">
													<div class="lead">
														<p>Initialization options for the <a href="wijmo_grid_style.flexgridstyle.html">FlexGridStyle</a>.</p>
													</div>
												</div>
											</li>
										</ul>
										<h4 class="tsd-returns-title">Returns <a href="wijmo_grid_style.flexgridstyle.html" class="tsd-signature-type">FlexGridStyle</a></h4>
									</li>
								</ul>
							</section>
						</section>
						<section class="tsd-panel-group tsd-member-group ">
							<h2>Methods</h2>
							<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
								<a name="applystyle" class="tsd-anchor"></a>
								<h3>applyStyle</h3>
								<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">apply<wbr>Style<span class="tsd-signature-symbol">(</span>rng<span class="tsd-signature-symbol">: </span><a href="wijmo_grid.cellrange.html" class="tsd-signature-type">CellRange</a>, style<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">CSSStyleDeclaration</span><span class="tsd-signature-symbol">&gt;</span>, panel<span class="tsd-signature-symbol">?: </span><a href="wijmo_grid.gridpanel.html" class="tsd-signature-type">GridPanel</a>, inline<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>Applies the specified style (inline or class-based) to a cell range</p>
											</div>
										</div>
										<h4 class="tsd-parameters-title">Parameters</h4>
										<ul class="tsd-parameters">
											<li>
												<h5>rng: <a href="wijmo_grid.cellrange.html" class="tsd-signature-type">CellRange</a></h5>
												<div class="tsd-comment">
													<p><a href="wijmo_grid.cellrange.html">CellRange</a> to apply the style to</p>
												</div>
											</li>
											<li>
												<h5>style: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">CSSStyleDeclaration</span><span class="tsd-signature-symbol">&gt;</span></h5>
												<div class="tsd-comment">
													<p>css style object to apply to the cells</p>
												</div>
											</li>
											<li>
												<h5><span class="tsd-flag ts-flagOptional">Optional</span> panel: <a href="wijmo_grid.gridpanel.html" class="tsd-signature-type">GridPanel</a></h5>
												<div class="tsd-comment">
													<p>The <a href="wijmo_grid.gridpanel.html">GridPanel</a> the <a href="wijmo_grid.cellrange.html">CellRange</a> belongs to</p>
												</div>
											</li>
											<li>
												<h5><span class="tsd-flag ts-flagOptional">Optional</span> inline: <span class="tsd-signature-type">boolean</span></h5>
												<div class="tsd-comment">
													<p>whether to add style as inline or create a new class</p>
												</div>
											</li>
										</ul>
										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
									</li>
								</ul>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
								<a name="clearallstyles" class="tsd-anchor"></a>
								<h3>clearAllStyles</h3>
								<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">clear<wbr>All<wbr>Styles<span class="tsd-signature-symbol">(</span>rng<span class="tsd-signature-symbol">?: </span><a href="wijmo_grid.cellrange.html" class="tsd-signature-type">CellRange</a>, panel<span class="tsd-signature-symbol">?: </span><a href="wijmo_grid.gridpanel.html" class="tsd-signature-type">GridPanel</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>Removes all applied styles from the entire grid or from the specified cell range.</p>
											</div>
										</div>
										<h4 class="tsd-parameters-title">Parameters</h4>
										<ul class="tsd-parameters">
											<li>
												<h5><span class="tsd-flag ts-flagOptional">Optional</span> rng: <a href="wijmo_grid.cellrange.html" class="tsd-signature-type">CellRange</a></h5>
												<div class="tsd-comment">
													<p><a href="wijmo_grid.cellrange.html">CellRange</a> cell range to remove the style from</p>
												</div>
											</li>
											<li>
												<h5><span class="tsd-flag ts-flagOptional">Optional</span> panel: <a href="wijmo_grid.gridpanel.html" class="tsd-signature-type">GridPanel</a></h5>
												<div class="tsd-comment">
													<p>The <a href="wijmo_grid.gridpanel.html">GridPanel</a> the <a href="wijmo_grid.cellrange.html">CellRange</a> belongs to</p>
												</div>
											</li>
										</ul>
										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
									</li>
								</ul>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
								<a name="removestyle" class="tsd-anchor"></a>
								<h3>removeStyle</h3>
								<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">remove<wbr>Style<span class="tsd-signature-symbol">(</span>rng<span class="tsd-signature-symbol">: </span><a href="wijmo_grid.cellrange.html" class="tsd-signature-type">CellRange</a>, style<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">CSSStyleDeclaration</span><span class="tsd-signature-symbol">&gt;</span>, panel<span class="tsd-signature-symbol">?: </span><a href="wijmo_grid.gridpanel.html" class="tsd-signature-type">GridPanel</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>Removes a specific style from a cell range.</p>
											</div>
										</div>
										<h4 class="tsd-parameters-title">Parameters</h4>
										<ul class="tsd-parameters">
											<li>
												<h5>rng: <a href="wijmo_grid.cellrange.html" class="tsd-signature-type">CellRange</a></h5>
												<div class="tsd-comment">
													<p><a href="wijmo_grid.cellrange.html">CellRange</a> to remove the style from</p>
												</div>
											</li>
											<li>
												<h5>style: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">CSSStyleDeclaration</span><span class="tsd-signature-symbol">&gt;</span></h5>
												<div class="tsd-comment">
													<p>css style object to remove from the cells</p>
												</div>
											</li>
											<li>
												<h5><span class="tsd-flag ts-flagOptional">Optional</span> panel: <a href="wijmo_grid.gridpanel.html" class="tsd-signature-type">GridPanel</a></h5>
												<div class="tsd-comment">
													<p>The <a href="wijmo_grid.gridpanel.html">GridPanel</a> the <a href="wijmo_grid.cellrange.html">CellRange</a> belongs to</p>
												</div>
											</li>
										</ul>
										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
									</li>
								</ul>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
								<a name="toggleclass" class="tsd-anchor"></a>
								<h3>toggleClass</h3>
								<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">toggle<wbr>Class<span class="tsd-signature-symbol">(</span>rng<span class="tsd-signature-symbol">: </span><a href="wijmo_grid.cellrange.html" class="tsd-signature-type">CellRange</a>, className<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, panel<span class="tsd-signature-symbol">?: </span><a href="wijmo_grid.gridpanel.html" class="tsd-signature-type">GridPanel</a>, addOrRemove<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>Toggles the specified CSS classname on the provided cell range</p>
											</div>
										</div>
										<h4 class="tsd-parameters-title">Parameters</h4>
										<ul class="tsd-parameters">
											<li>
												<h5>rng: <a href="wijmo_grid.cellrange.html" class="tsd-signature-type">CellRange</a></h5>
												<div class="tsd-comment">
													<p><a href="wijmo_grid.cellrange.html">CellRange</a> to apply the style to</p>
												</div>
											</li>
											<li>
												<h5>className: <span class="tsd-signature-type">string</span></h5>
												<div class="tsd-comment">
													<p>css ClassName to apply on provided <a href="wijmo_grid.cellrange.html">CellRange</a></p>
												</div>
											</li>
											<li>
												<h5><span class="tsd-flag ts-flagOptional">Optional</span> panel: <a href="wijmo_grid.gridpanel.html" class="tsd-signature-type">GridPanel</a></h5>
												<div class="tsd-comment">
													<p>The <a href="wijmo_grid.gridpanel.html">GridPanel</a> the <a href="wijmo_grid.cellrange.html">CellRange</a> belongs to</p>
												</div>
											</li>
											<li>
												<h5><span class="tsd-flag ts-flagOptional">Optional</span> addOrRemove: <span class="tsd-signature-type">boolean</span></h5>
												<div class="tsd-comment">
													<p>whether to add class or remove class, skipping this parameter toggle the provided class</p>
												</div>
											</li>
										</ul>
										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
									</li>
								</ul>
							</section>
						</section>
					</div>