Aurelia Grid - Template Column not displaying correctly after updating locale property

[vipin]

We are using aurelia-syncfusion-bridge plugin for implementing the grid. We need to implement localization functionality for grid. Also need to change the localization language at runtime. We are using the following version

 "aurelia-syncfusion-bridge": "^2.2.1",

    "syncfusion-javascript": "^16.1.26"

The code used for define the grid is following

 <ej-grid id="gvUsers"

                 e-data-source.bind="users"

                 e-page-settings.bind="page"

                 e-allow-paging=true

                 e-allow-sorting=true

                 e-allow-text-wrap=true

                 e-text-align="center"

                 e-is-responsive=true

                 e-enable-responsive-row=true

                 e-locale.bind="locale">

          <ej-column e-field="email" e-header-text="Email" e-text-align="center">

          </ej-column>

          <ej-column e-field="userName" e-header-text="User Name" e-text-align="center">

          </ej-column>          

          <ej-column e-header-text="Full Name" e-text-align="center">

            <ej-template>

              ${firstName+ ' '+lastName}

            </ej-template>

          </ej-column>

          <ej-column e-header-text="Edit" e-text-align="center">

            <ej-template>

              <button class="btn btn-default" click.delegate="edit(id)">Edit</button>

            </ej-template>

          </ej-column>

        </ej-grid>

After updating the locale property of grid, the localization is working as expected. But template columns are not displaying correctly. It is showing the aurelia-code itself. Also, event binding of template column is not working after refreshing

[Farveen Sulthana Thameeztheen Basha]

Hi vipin,

 

Thanks for contacting Syncfusion Support.

 

We have checked your query and we need some additional information to find the cause of the issue. Please share us the following details.

 

1. Have you faced the above issues only at applying Localization or at initial state.

 

2. In which localization have you faced the issue.

 

3. If possible provide an issue reproducing sample.

 

Regards,

 

Farveen sulthana T

[vipin]

 1. Have you faced the above issues only at applying Localization or at initial state.

 We are facing the issue only when applying localization. The initial state grid is working as expected. When we update the localization value, we are getting issue.

2. In which localization have you faced the issue.

We are facing this issue on all languages like en-US, de-DE, it-IT

[Farveen Sulthana Thameeztheen Basha]

Hi Vipin, 

Query #:-  But template columns are not displaying correctly. It is showing the aurelia-code itself. Also, event binding of template column is not working after refreshing. Also, event binding of template column is not working after refreshing 

 

We have checked your query and prepared sample using Template column and applied Localization in version 16.1.26 and also we have checked the sample  by applying localization dynamically at Load event. But we are unable to reproduce your reported problem at our end.  Please refer to the sample Link:- 

http://www.syncfusion.com/downloads/support/forum/137746/ze/skeleton-typescript-1402081258 

 

Also TemplateRefresh event called while on refreshing the Grid. Please refer to the screenshot:- 

 

We need some additional information to find the cause of the issue. Please share us the following details. 

1. If possible provide an issue reproducing sample or reproduce the issue in the above sample and revert us back. 

2. Video Demo to replicate the issue. 

3. Confirm your product version. 

Regards, 

Farveen sulthana T 

[vipin]

If you update the e-locale property at runtime, you will get the issue. That means after initial loading, you can change the e-locale from de-DE to it-IT

[Farveen Sulthana Thameeztheen Basha]

Hi Norberto,

 

Thanks for contacting Syncfusion Support.

 

We have checked your query and we have already discussed this requirement “How to place HyperLink column in Grid columns” in our Syncfusion knowledge Base document. For your convenience please refer to the following Link:-

 

https://www.syncfusion.com/kb/3768/how-to-place-hyperlink-in-grid-column

 

Query :- the link would be the following: /edit/Radicado

 

Please refer to the code example:-

 

@(Html.EJ().Grid<OrderTable>("Grid")

       .Datasource((IEnumerable<OrderTable>)ViewBag.data)

        .AllowPaging()

        .Columns(col =>

                {

                    col.HeaderText("Manage Records").Template("<a rel='nofollow' href='//www.syncfusion.com/?Radicado={{:Radicado}}'>/Edit/{{:Radicado}}</a>").Add();

                                             col.Field("Radicado").HeaderText("Radicado").IsPrimaryKey(true).Add();

                    col.Field("CustomerID").HeaderText("Customer ID").Add();

                   

 

                })

       .ClientSideEvents(evt => evt.Create("onGridCreate"))

    )

                                                                        

Please refer to the Demo Link about columnTemplate:-

https://help.syncfusion.com/aspnetmvc/grid/columns#column-template

http://mvc.syncfusion.com/demos/web/grid/columntemplate

 

Please get back to us if you need any further assistance.

 

Regards,

 

Farveen sulthana T

 

Attachment: New_folder_cc90db43.zip

[Farveen Sulthana Thameeztheen Basha]

Hi vipin,

Please ignore the previous update

 

We can reproduce your reported problem at our end. To overcome this problem after applying the Locale through the model we suggested you to refresh the Grid using refreshContent method or else change the Locale on the Load event of the Grid.

 

Please refer to the code example:-

 

<div>

    <input id="button" ej-button="e-text.bind:'Button'" e-on-click.delegate="click($event.detail)"></input>

</div>

<div>

    <ej-grid e-data-source.two-way="gridData" e-locale="de-DE" e-allow-paging=true e-allow-sorting=true e-on-template-refresh.delegate="templateRefresh($event.detail)" e-on-load.delegate="load($event.detail)">

            .  .   .

    </ej-grid>

 

click(e){

      var gridObj = $("#ejControl_0").ejGrid("instance");

        gridObj.model.locale = "it-IT";

        gridObj.refreshContent(true);

    }

 

Please refer to the attached files.

 New_folder_cc90db43.zip

 

Please refer to the API Link:-

https://help.syncfusion.com/api/js/ejgrid#methods:refreshcontent

 

Regards,

Farveen sulthanaa T