title: Localization of Sync-fusion Grid Headings [Aurelia]
body: <p>I am using the i18n plugin for the localization in our Aurelia application. But, the localization is not getting applied to the column headings dynamically on Sync-fusion grid in our Aurelia app. </p>
  
  <p>The html code for the Grid is as below.</p>
  
  <pre><code>&lt;ej-grid id="gvDownline"  e-locale.bind="locale" 
             e-data-source.bind="downlines"
             e-page-settings.bind="pageSettings"
             e-allow-paging=true
             e-allow-sorting=true
             e-allow-text-wrap=true
             e-text-align="center"&gt;
      &lt;ej-column e-width="80"    e-field="level" e-header-text="${i18n.tr('Downline.Level')}" e-text-align="right"&gt;
      &lt;/ej-column&gt;
      &lt;ej-column e-field="sponsor" e-header-text="${i18n.tr('Downline.Sponsor')}" e-text-align="left"&gt;
      &lt;/ej-column&gt;
      &lt;ej-column e-field="sponsorEmail" e-header-text="${i18n.tr('Downline.SponsorEmail')}" e-text-align="center"&gt;
      &lt;ej-column e-field="associate" e-header-text="${i18n.tr('Downline.Associate')}" e-text-align="center"&gt;
      &lt;ej-column e-field="registeredFlag" e-width="130" e-header-text="${i18n.tr('Downline.Registered')}" e-text-align="right"&gt;
      &lt;/ej-column&gt;
      &lt;ej-column e-field="contractSignedDate"  e-format="{0:dd/MM/yyyy}" e-header-text="${i18n.tr('Downline.ContractSignedDate')}" e-text-align="right"&gt;
      &lt;/ej-column&gt;
    &lt;/ej-grid&gt;
  </code></pre>
  
  <p>In the code behind I have imported the following file for the localization of pagination and other grid components.</p>
  
  <pre><code>import 'syncfusion-ej-global/l10n/ej.localetexts.it-IT.min';
  </code></pre>
  
  <p>We are providing <code>i18n.tr(‘key’)</code> as the <code>e-header-text</code> attribute for columns to get it translated. </p>
  
  <p>In my page, there are two language options. When I change the language options, I need the localization to be applied to the grid header based on the selected language. When I applied the <code>e-locale.bind="locale"</code> property in the grid, the localization is applied to the pagination and status information of the sync-fusion grid, but not applied on the grid headers.</p>
  
  <p>I have to do a page reload for applying the localization of the header after each language switching. Actually, I need to set the header text from the code behind(ts file) on the language change event. Can anyone suggest a better way to implement the localization of the sync fusion grid in Aurelia.</p>