Not able to display my local SVG in a column

[Adam Zaghouani]

Hello,

I have been trying to replace commandButton with my button, and what I found to do that, I have to do in a customized template that includes my icon, however, I don't understand why they're not being displayed.

I tried to use your CommandButtons and they do work, but I can't edit the button themselves even in cssClass, so guidance on which option can be solved is appreciated.

Mainly, I want to use my local icons, that's all.

PS: you can uncomment the "DataManger" code to consume the data locally if you want

PS: I tried "SVG" and "SVGinline" in HTML, and still nothing.

Attachment: datatable_e49d6efb.rar

[Rajapandiyan Settu]

Hi Adam, 

Thanks for contacting Syncfusion support. 

Based on your requirement, you want to load local icon on Grid’s Command buttons. Currently, we are validating this at our end and will update the further details on or before Feb 9^th, 2022. 

We appreciate your patience until then. 

Regards, 

Rajapandiyan S 

[Adam Zaghouani]

Looking forward to hear from you at the earliest!

[Rajapandi Ravi]

Hi Adam, 

Thanks for your patience 

Based on your shared information, we have prepared a sample and render a SVG element in a column template and tried to reproduce your reported problem, but it was working fine at our end. Please refer the below code example and sample for more information. 

App.component.html 

 

<ejs-grid [dataSource]='data' [selectionSettings]='selectionOptions' height='315px'> 

  <e-columns> 

      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column> 

      <e-column field='CustomerID' headerText='Customer ID' width=150></e-column> 

      <e-column field='ShipCity' headerText='Ship City' width=150></e-column> 

      <e-column field='ShipName' headerText='Ship Name' width=150> 

        <ng-template #template let-data> 

          <div class="image"> 

            <img style="width:24px;height:24px" src="./assets/images/a/b/meal.svg"/> 

          </div> 

      </ng-template> 

      </e-column> 

  </e-columns> 

  </ejs-grid> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/1725411181248253.zip 

Screenshot: 

 

If you still face the issue, please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

Regards, 

Rajapandi R 

[Adam Zaghouani]

Hello again,

Conclusion :

Well based on what you've proposed, it seems it became visible when I replaced [InlineSVG] with <img>.

however, using <img> instead won't allow the SVG to change color based on the HTML and CSS I provided, importing SVG in <img> won't allow it to change and be filled based on the CSS. Therefore I had to use inline implementation of SVG within the "#image.div" brackets. 

Question 2:

How to fire events from the grid's customized icons upon clicking them? 

Replacing the onCommandClick() method?

[Vignesh Natarajan]

Hi Adam,  

 

Thanks for the update.  

 

Query: “How to fire events from the grid's customized icons upon clicking them? ” 

 

We suggest you to achieve your requirement by defining the click event to img tag similar to below code example.  

 

<e-column field='ShipName' headerText='Ship Name' width=150>  

        <ng-template #template let-data>  

          <div class="image">  

            <img style="width:24px;height:24px" (click)="clicked($event)" 

 src="./assets/images/a/b/meal.svg"/>  

          </div>  

      </ng-template>  

      </e-column>  

 

. . . . 

clicked(){ 

        console.log("triggered"); 

    } 

 

 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Adam Zaghouani]

Hello,

Well, as an update, I solved the icon/button issue, however, I have a column which supposed to have an image.

but as it seems, it's not displaying the images.

It stays blank.

  

even alt doesn't display a thing.

[Rajapandi Ravi]

Hi Adam, 

Thanks for your patience 

Based on your shared information, we have prepared a sample and render a JPG element in a column template and tried to reproduce your reported problem, but it was working fine at our end. Please refer the below code example and sample for more information. 

App.component.html 

 

 

<ejs-grid [dataSource]='data' [selectionSettings]='selectionOptions' height='315px'> 

  <e-columns> 

      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column> 

      <e-column field='CustomerID' headerText='Customer ID' width=150></e-column> 

      <e-column field='ShipCity' headerText='Ship City' width=150></e-column> 

      <e-column field='ShipName' headerText='Ship Name' width=150> 

        <ng-template #template let-data> 

          <div class="image"> 

             

            <img style="width:24px;height:24px" src="./assets/images/a/b/meal.svg"/> 

          </div> 

      </ng-template> 

      </e-column> 

      <e-column headerText='Ficher' width=150> 

        <ng-template #template let-data> 

          <div class="image"> 

            <img style="width:24px;height:24px" (click)="clicked($event)" alt="alternative" src="./assets/images/a/b/raphael.jpg"/> 

          </div> 

      </ng-template> 

      </e-column> 

  </e-columns> 

  </ejs-grid> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/1725411181248253.zip 

Screenshot: 

 

And also, it displays the alternative text if the image path is not correct. 

 

If you still face the issue, please share any issue reproducible sample or try to reproduce the issue with our above attached sample and also confirm your syncfusion package version. 

Regards, 

Rajapandi R 

[Adam Zaghouani]

Hello again!

are these the versions you've mentioned? And, It still shows nothing.

If the information above doesn't help, I'll send the sample after you confirm the screenshot above.

[Rajapandi Ravi]

Hi Adam, 

We have checked your reported query at our end by using the same package version and tried to reproduce the problem, but it was unsuccessful. So please share any issue reproducible sample or try to reproduce the issue in our sample which was shared in our previous update. 

Regards, 

Rajapandi R 

[Adam Zaghouani]

Unfortunately, I'm still unable to display it as you've showcased.

Here's the sample and thank you in advance.

Attachment: collecte_a8f23bd3.rar

[Rajapandi Ravi]

Hi Adam, 

Thanks for the update 

We have checked your shared information and we found that you are using #fileTemplate as template id. By default, in our Grid, to map the template column we have to set the id as #template. If you are using any other id the template was not mapped to the Grid column. To overcome the problem, we suggest you use the id as #template. Please refer the below code example and sample for more information. 

 

<e-column headerText="Fichier" width="75"> 

      <ng-template #template let-file> 

        <div class="image"> 

          <img 

            style="width: 24px; height: 24px" 

            src="./assets/images/logo.jpg" 

            alt="text" 

          /> 

        </div>  

        </ng-template 

    ></e-column> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-2068220311.zip 

Regards, 

Rajapandi R 

[Adam Zaghouani]

Hi, 

I am... So sorry for wasting your time, on such a trivial matter. 

Thank you, that was the problem indeed.

Have a nice day, and sorry.  (╥﹏╥)

[Rajapandi Ravi]

Hi Adam, 

We are happy to hear that the provided solution work fine at your end. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R