Conditional set image to grid cell

[Alexandre]

Hi!

I need to load the image "read.png" when the value of the field "Status" is equal to 1 and when it is equal to 2 load another image...

This image must be loaded in the "StatusTexto" column position

How I can do this ?

Here is my grid code:

            <div id="flotArea" class="ht-200 ht-sm-300" style="display: contents">
                @(Html.EJ().Grid<object>("syncfusionGrid")
                              .Datasource(Model)
                              .AllowFiltering((Model != null && Model.Count > 0))
                              .AllowSorting((Model != null && Model.Count > 0))
                              .AllowTextWrap()
                              .SortSettings(sort => sort.SortedColumns(col =>
                              {
                                  col.Field("Status").Direction(SortOrder.Descending).Add();
                                  col.Field("Relevancia").Direction(SortOrder.Descending).Add();
                                  col.Field("DtEnv").Direction(SortOrder.Descending).Add();
                              }))
                              .AllowSelection(false)
                              .AllowResizeToFit(true)
                              .AllowPaging().PageSettings(page => { page.PageSize(15); })
                              .Columns(col =>
                              {
                                  col.Field("MsgID").IsPrimaryKey(true).Visible(false).Add();
                                  col.Field("Status").Visible(false).Add();
                                  col.Field("Relevancia").Visible(false).Add();
                                  col.Field("StatusTexto").HeaderText("Status").TextAlign(TextAlign.Center).Width(80).Add();
                                  col.Field("Texto").HeaderText("Relevancia").TextAlign(TextAlign.Center).Width(130).Add();
                                  col.Field("Assunto").HeaderText("Assunto").TextAlign(TextAlign.Center).Add();
                                  col.Field("DtEnv").Format("{0:dd/MM/yyyy}").HeaderText("Data de envio").TextAlign(TextAlign.Center).Width(150).Add();
                              })
                        )
            </div>

Thanks!!!!

[Farveen Sulthana Thameeztheen Basha]

Hi Alexandre, 

Thanks for contacting Syncufusion Support. 

Query#:- I need to load the image "read.png" when the value of the field "Status" is equal to 1 and when it is equal to 2 load another image...This image must be loaded in the "StatusTexto" column position How I can do this ? 

 

To achieve this requirement, we suggest you to use ColumnTemplate Feature of the Grid. Using Template property of the columns, we can place the HTML elements inside the particular column. Likewise we have placed the Image as Template based on value of another column(i.e.Status column) 

Refer to the code example:- 

@(Html.EJ().Grid<object>("syncfusionGrid") 

    .Datasource(Model) 

    .AllowPaging().PageSettings(page => { page.PageSize(15); }) 

    .Columns(col => 

     { 

      col.Field("MsgID").IsPrimaryKey(true).Visible(false).Add(); 

      col.Field("Status").Visible(false).Add(); 

      col.Field("Relevancia").Visible(false).Add(); 

      col.Field("StatusTexto").HeaderText("Status").Template("#columnTemplate").TextAlign(TextAlign.Center).Width(80).Add();   //define the Template property of the column 

       .    .       . 

  }) 

) 

      <script type="text/x-jsrender" id="columnTemplate"> 

        <img style="width: 75px; height: 70px" src="../Content/images/Status/{{:Status}}.png" alt="{{:Status}}" />   //Render Image based on Status Column value(Image name with Status column value) 

    </script> 

Refer to the documentation and Demo Link:- 

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

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

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

Regards, 

Farveen sulthana T