Dynamics CRM - Secret to not having Misaligned Columns from addCustomView

Jared Johnson, 20 July 2014

In Dynamics CRM there is often a requirement to create filters for lookups and subgrids based on values from CRM or from user input. Many of these can be achieved with out of the box CRM Customisations, however some requirements will need to use JavaScript functions.

A common way to do this is the addCustomView function, which adds a new view to a lookup control. This function is demonstrated in many blogs on the web, but one thing you will notice in the screenshots most of them provide is that the columns in the custom lookup view are all misaligned.

The secret to not having misaligned columns is in the layout XML provided to the addCustomView function. This tends to be copy and pasted from the Customisations.Xml file from a solution, or the web and then edited. By doing so there are 4 variables in the XML that are often set from where it is copied from that should be. The variables object, select, icon and preview all being set to 1 is what causes this issue, changing these all to be set to 0 (but not removing them!) will cause the custom view to display correctly.

First we have the layoutXML used for the Filtered Contact view shown in the first screenshot that causes the misaligned columns.

"<grid name='resultset' object='1' jump='name' select='1' preview='1' icon='1'>" +
  "  <row name='result' id='accountid'>" +
    "    <cell name='name' width='300' />" +
    "    <cell name='emailaddress1' width='200' />" +
    "    <cell name='telephone1' width='100' />" +
    "    <cell name='accountnumber' width='100' />" +
    "    <cell name='primarycontactid' width='150' />" +
    "    <cell name='address1_city' width='100' />" +
    "
  </row>" +
  "</grid>"

Now we change the XML to the XML shown below, which fixes the column misalignment.

"<grid name='resultset' object='0' jump='name' select='0' preview='0' icon='0'>" +
  "  <row name='result' id='accountid'>" +
    "    <cell name='name' width='300' />" +
    "    <cell name='emailaddress1' width='200' />" +
    "    <cell name='telephone1' width='100' />" +
    "    <cell name='accountnumber' width='100' />" +
    "    <cell name='primarycontactid' width='150' />" +
    "    <cell name='address1_city' width='100' />" +
    "
  </row>" +
  "</grid>"