Is it possible to add icons to a subgrid in CRM?

Question

Is it possible to add icons to a subgrid in CRM? I have tried this solution but the icons won't appear in subgrid, only for the view.

EDIT

I have noticed that the icon appears in the subgrid if I open the page for associated view before I go to the page where the subgrid is located.

I looked at what resources that are loaded when opening these pages. When opening the page for associated view, image is loaded. It isn't loaded when opening the page where the subgrid is located. Is there a easy way to load image into contentIFrame when opening the page?

Image loaded when opening page for associated view

Answer 1

When implementing this solution, subgrid icons appears sporadically after refreshing the subgrid. What's actually happening is that Dynamics is adding a div with the class ms-crm-Grid-DataColumn-ImgItem. This div contains an img element, sometimes with a src and most of the times with no src at all, example here.

I have developed a work-around for this that's working for Dynamics 365, but very unsupported by Microsoft. Please visit this page and vote this issue up so we can get a supported solution.

//This function is called when form is loaded
function refreshSubgridIcons() {

  var grid = Xrm.Page.ui.controls.get('SUBGRID_NAME');

  if (grid == null) {
     setTimeout(function () { refreshSubgridIcons(); }, 5000);
     return;
  }

  //This function will be called everytime subgrid is refreshed/loaded
  grid.addOnLoad(setSubgridIcons);

}

function setSubgridIcons() {

  //Get active IFrame
  var contentIFrame = window.top.document.getElementById(getActiveIFrame());

  //Get subgrid
  var subgrid = contentIFrame.contentWindow.document.querySelector('[gridid="SUBGRID_NAME"]');

  //Wait for rows to be loaded
  setTimeout(function () { 
    //Get rows in subgrid
    var subgridRows = subgrid.getElementsByClassName('ms-crm-List-Row-Lite');

    //Loop through all rows in subgrid
    for (i = 0; i < subgridRows.length; i++) {
        //Get priority for row
        var priority = subgridRows[i].querySelector('[rawvalue]');
        var priorityValue = priority.getAttribute('rawvalue');

        //Set image url depending on priority value for row
        var imgUrl;
        if (priorityValue == '1') {
            imgUrl = 'URL_FOR_IMAGE_HIGH';
        }
        if (priorityValue == '2') {
            imgUrl = 'URL_FOR_IMAGE_MEDIUM';
        }
        if (priorityValue == '3') {
            imgUrl = 'URL_FOR_IMAGE_HIGH';
        }

        var nobr = subgridRows[i].getElementsByTagName('nobr');
        //Get div for img
        var imgItem = nobr[0].getElementsByClassName('ms-crm-Grid-DataColumn-ImgItem');

        if (imgItem.length == 0) {
            //Create div and img if not exists
            var div = document.createElement('div');
            div.setAttribute('class', 'ms-crm-Grid-DataColumn-ImgItem');
            div.innerHTML = '<img src="' + imgUrl + '"/>';
            nobr[0].insertBefore(div, nobr[0].firstChild);

        } else {
            //Change src on existing img
            var img = imgItem[0].getElementsByTagName('img');
            img[0].setAttribute('src', imgUrl);
        }

    }

}, 100);

}

function getActiveIFrame() {
  //Get all IFrames in the page
  var IFrames = window.top.document.querySelectorAll('iframe');

  //Get active IFrame
  var IFrame;
  for (i = 0; i < IFrames.length; i++) {
      if (IFrames[i].style.visibility == 'visible') {
          IFrame = IFrames[i].id;
      }
  }
  return IFrame;
}