Add div tag as content in cell

[Harun]

Hi,

i have a grid with customer info. 
Each customer has one or more drawings assigned. Every Drawing has a Status (Color).

I get all drawings assigned to the customer. Now i want to show a div tag colored with the Status-Color.

In QueryCellInfo i can write div tag to column cell but it shows me div as text and not div as div tag like in html.

I tried disableHtmlEncoding:false but it works only for Grid Headers.


      queryCellInfo: function (args) {
            if (args.column.field === "drawingStatus") {
                var customer = args.data;
                var colors = customer.drawingState;


                var divsToAppend = "";
                for (let i = 0; i < colors.length; i++) {
                    var color = colors[i];
                    divsToAppend += '<div  title = "' + color.name + '"style="margin-left:5px;display:inline;float:left;width:20px;height:20px;background-color:' + color.color + ';"></div> ';
                }
                $(args.cell).text(divsToAppend);
            }
            return;
        },

You can see attached image.

Any idea?

Thank you

Attachment: image_35d6d9e1.zip

[Mohammed Ansar Sathik Ali]

Hi Harun,

Greetings from Syncfusion support.

Query: Add div tag as content in cell

Based on your query, You need to add div tag in the cell to change style in your project. We have  achieved it by using the queryCellInfo method. In that method we create a div tag and add an attributes and assign the cell values to that div tag.

For your convenience, we have attached code sample for your reference.

function customiseCell(args: QueryCellInfoEventArgs,

  field: string,

  data: Object,

  column: Object

): any {

 

  if (args.column.field === 'CustomerName') {

    var divtag = document.createElement('div');

    divtag.setAttribute('style', ' color: red; ');

    divtag.textContent = args.data[args.column.field];

    args.cell.appendChild(divtag);

  }

}

Sample: https://stackblitz.com/edit/c8m4f2

Documentation: https://ej2.syncfusion.com/documentation/grid/cell/cell/

  

Please get back to us if you need further assistance on this.

Regards,

Mohammed Ansar ,