showing an image with text

[David Price]

Hi,

It is possible to show a image indicator inside each cell based on data for for example if the value of the cell was 1 then it would show a indicator in the top left hand corner of the cell without interfering with the value of the cell,

it would look something like this

[Prasanna Kumar Viswanathan]

Hi David, 

 

Thanks for contacting Syncfusion support. 

 

To achieve your requirement we suggest you to use queryCellInfo event of ejGrid. This event will be triggered every time a request is made to access particular cell information, element and data. In this event we check the condition with column value and add image indicator to the particular cell by adding class to the cell element. 

 

In the below code example we have update an icon when the EmployeeID column value as 1. 

[GridFeatures.aspx] 

<ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True" IsResponsive="true"> 

            <ClientSideEvents QueryCellInfo="onGridQueryCellInfoEvent" /> 

 

            <Columns> 

                 

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="75" Priority="4" /> 

 

                  --- 

 

            </Columns> 

        </ej:Grid> 

     

 

      <script type="text/javascript"> 

 

          function onGridQueryCellInfoEvent(args) { 

 

              if (args.column.field == "EmployeeID" && args.rowData.EmployeeID == 1) { 

 

                  $(args.cell).addClass('e-updatedtd e-icon e-gupdatenotify'); 

              } 

          } 

      </script> 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/139779/ze/SyncfusionASPNETApplication2_(4)-132369329.zip 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#events:querycellinfo 

 

Regards, 

Prasanna Kumar N.S.V 

[David Price]

Hi,

Thank you but this is how I tried it. The issue I have is that the icon isn't in the top right hand corner the text is pushing it 

[Vignesh Natarajan]

Hi David, 

  

Thanks for the update. 

 

From your query, we understand that you are facing issue (need to display icon on top left corner) while displaying the icon. We suggest you to achieve your requirement by defining the vertical-align css property as top in the QueryCellInfo event of ejGrid. 

 

Refer the below code example 

 

  <ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True" IsResponsive="true"> 

            <ClientSideEvents QueryCellInfo="onGridQueryCellInfoEvent" /> 

.                   .                  .                  .                   .  

        </ej:Grid> 

    </div> 

      <script type="text/javascript"> 

          function onGridQueryCellInfoEvent(args) { 

              if (args.column.field == "EmployeeID") { 

                  $(args.cell).css("vertical-align","top") 

                  $(args.cell).addClass('e-updatedtd e-icon e-gupdatenotify'); 

 

              } 

          } 

      </script>    

 

 

Refer the below screenshot for the output 

 

 

 

 

Note: since it is a workaround there may be some limitations. 

 

 Regards, 

Vignesh Natarajan