template-122.html

<h1 id="text-formatter">Text Formatter</h1>
<p>This formatter creates a simple div element with text from the column&#39;s field by default. The div element can be modified in the handler (for example, <code>onElementRendered</code>) and passed through configuration object for multiple use cases. </p>
<h2 id="specific-options">Specific options</h2>
<p>The purpose of this formatter is creating a generic element for further modifications, so there are no specific options.</p>
<h2 id="example">Example</h2>
<code-sandbox hash="d7ba12ad"><pre><code class="language-css">efx-grid {
    height: 320px;
}
</code></pre>
<pre><code class="language-html">&lt;efx-grid id=&quot;grid&quot;&gt;&lt;/efx-grid&gt;
</code></pre>
<pre><code class="language-javascript">import { halo } from &#39;./theme-loader.js&#39;; // This line is only required for demo purpose. It is not relevant for your application.
await halo(); // This line is only required for demo purpose. It is not relevant for your application.

/* ---------------------------------- Note ----------------------------------
  DataGenerator, Formatters and extensions are exposed to global scope
  in the bundle file to make it easier to create live examples.
  Importing formatters and extensions is still required in your application. 
  Please see the document for further information.
---------------------------------------------------------------------------*/
var fields = [&quot;number_1&quot;, &quot;word&quot;, &quot;float_1&quot;];
var records = DataGenerator.generateRecords(fields, 40);

var configObj = {
    columns: [
        { 
            name: &quot;Column 1&quot;,
            field: fields[0],
            alignment: &quot;right&quot;,
            binding: TextFormatter.create()
        },
        { 
            name: &quot;Column 2&quot;,
            field: fields[1],
            alignment: &quot;center&quot;,
            binding: TextFormatter.create({
                styles: {
                    &quot;backgroundColor&quot;: &quot;thistle&quot;
                }
            })
        },
        { 
            name: &quot;Big Text&quot;,
            field: fields[2],
            binding: TextFormatter.create({
                styles: {
                    &quot;fontSize&quot;: &quot;1.5em&quot;
                }
            })
        }
    ],
    staticDataRows: records
};

var grid = document.getElementById(&quot;grid&quot;);
grid.config = configObj;
</code></pre>
</code-sandbox><h2 id="formatting-predefined-formatter-using-text-formatting-extension">Formatting predefined formatter using Text Formatting Extension</h2>
<p>When using Text Formatting Extension, by default, predefined formatter will be overwritten due to the need for rendering a formatted text by the extension. To format the text inside predefined formatter and avoid the overriding, you will need to instruct the extension on how and where to do the formatting. See <a href="#/extensions/tr-grid-textformatting">this page</a> for more information.</p>
<p>In this case, you can use <code>onElementRendered</code> and Text Formatting Extension to do the formatting.</p>
<br>
<br>
<br>