jQWidgets Forums

jQuery UI Widgets Forums Angular jqxDataTable not generates icons

This topic contains 1 reply, has 2 voices, and was last updated by  Martin 6 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • jqxDataTable not generates icons #104361

    alexkor
    Participant

    i try to generate in td an fontawesome icon, but the td not generates what inside it.
    it generates only text.

    <jqxDataTable [width]="1200" autoRowHeight="true" [columnsResize]="true" [selectionMode]="'singleRow'" [altRows]="true"
      [sortable]="true" [editable]="true">
      <table id='table' border='1'>
        <thead>
          <tr>
            <th align='left'>Serial #</th>
            <th align='left'>Device ID</th>
            <th align='left'>Model</th>
            <th align='left'>Device Status</th>
            <th align='left'>Previous Hierarchy Path</th>
            <th align='left'>Hierarchy Path</th>
            <th align='left'>Received Date</th>
            <th align='left'>Raised Date*</th>
            <th align='left'>Sevirity</th>
            <th align='left'>Alert Type</th>
            <th align='left'>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let device of alerts">
            <td>{{device.SERIALNUMBER}}</td>
            <td>{{device.DEVICEID}}</td>
            <td>{{device.MODELNAME}}</td>
            <td>
              <div><i class="fas fa-check"></i></div>
            </td>
    
            <td>{{device.PREVIOUSHIERARCHYNAME}}</td>
            <td>{{device.HIERARCHYFULLPATH}}</td>
            <td>{{device.EVENTRECEIVEDDATE}}</td>
            <td>{{device.EVENTRAISEDDATE}}</td>
            <td>{{device.SEVERITY}}</td>
            <td>{{device.ALERTTYPE}}</td>
            <td>{{device.DESCRIPTION}}</td>
    
          </tr>
    
        </tbody>
      </table>
    </jqxDataTable>

    how can i generate the icon inside the td?

    jqxDataTable not generates icons #104438

    Martin
    Participant

    Hello alexkor,

    I would suggest you to use the columns property of jqxDataTable, if possible, and create the i element using cellsRenderer.
    You can see a similar example Here.

    Another approach you can try is to select the td element in the ngAfterViewInit lifecycle hook and create and append the ‘i’ element using javascript.

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.