template-145.html

<h1 id="get-sorting-statesreset-all">Get Sorting States/Reset All</h1>
<p>The <code>getSortedColumns()</code> method returns an array of the currently applied sorting states (with the <code>colIndex</code> and <code>sortOrder</code> properties).</p>
<p>Additionally, the <code>clearSortState()</code> method resets the current sorting states to their default neutral state.</p>
<p>A list of all sorting-related events can be found in the <strong>Events Handling</strong> section.</p>
<pre><code class="language-js">var sort = grid.api.getCoreGrid().getPlugin(&quot;SortableTitle&quot;);
var states = sort.getSortedColumns(); // Return an array of the current active sorting states

sort.clearSortState(); // Reset all sorting states to neutral
</code></pre>
<h2 id="example">Example</h2>
<code-sandbox hash="b25f8ce1"><pre><code class="language-css">efx-grid {
    height: 200px;
}
textarea {
    width: 100%;
    height: 50px;
    margin: 10px 0;
}
</code></pre>
<pre><code class="language-html">&lt;button id=&quot;get_btn&quot;&gt;Get Current States&lt;/button&gt;
&lt;button id=&quot;reset_btn&quot;&gt;Clear All Sorting&lt;/button&gt;
&lt;textarea id=&quot;output_ta&quot; placeholder=&quot;Click at the grid header to sort&quot;&gt;&lt;/textarea&gt;
&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;companyName&quot;, &quot;market&quot;, &quot;CF_LAST&quot;, &quot;CF_NETCHNG&quot;, &quot;industry&quot;];
var records = DataGenerator.generateRecords(fields, { numRows: 10 });
var configObj = {
    sorting: {
        sortableColumns: true,
        threeStatesSorting: true
    },
    columns: [
        {name: &quot;Company&quot;, field: fields[0]},
        {name: &quot;Market&quot;, field: fields[1], width: 120},
        {name: &quot;Last&quot;, field: fields[2], width: 100},
        {name: &quot;Net. Chng&quot;, field: fields[3], width: 100},
        {name: &quot;Industry&quot;, field: fields[4]}
    ],
    staticDataRows: records
};

var grid = document.getElementById(&quot;grid&quot;);
grid.config = configObj;

document.getElementById(&quot;get_btn&quot;).addEventListener(&quot;click&quot;, function() {
    // Return an array of the current active sorting states
    var sort = grid.api.getCoreGrid().getPlugin(&quot;SortableTitle&quot;);
    var states = sort.getSortedColumns();

    var ta = document.getElementById(&#39;output_ta&#39;);
    ta.value = JSON.stringify(states, 2, null) + &quot;\n&quot; + ta.value;
});

document.getElementById(&quot;reset_btn&quot;).addEventListener(&quot;click&quot;, function() {
    var sort = grid.api.getCoreGrid().getPlugin(&quot;SortableTitle&quot;);
    sort.clearSortState();
});
</code></pre>
</code-sandbox>