I recently was asked if there was a way to put inputs that are of similar manor on a form in a cross-tab grid format. Similar to this:
| Col 1 | Col 2 | Col 3 | |
| Row 1 | |||
| Row 2 |
Let’s see how this can be done. Start by creating your attributes. For simplicity sake I created 6 attributes:
- row1col1
- row1col2
- row1col3
- row2col1
- row2col2
- row2col3
From there I added them to a section of my form. Making sure the new section is formatted for 4 columns. I then add the attributes to the section but leave the first column empty. Also make sure to turn the labels off for each attribute. Here is what the form looks like in the designer.
From there you will need to add jquery to your webresouces and add it to the form properties. If you do not have jquery you can download it at . It is a very powerful javascript library that makes working with the DOM much cleaner and more precise. Once you have jquery you will need to create an onload function to be called. Here is what the code would look like:
Form_OnLoad = function () {
$("#jm1_row1col1_d").prev('td').html("<br><span style='font-weight:bold; float:right;'>Row #1</span>");
$("#jm1_row2col1_d").prev('td').html("<span style='font-weight:bold; float:right;'>Row #2</span>");
$("#jm1_row1col1_d").prepend("Column #1").css("color","#333").css("text-align","center").css("font-weight","bold");
$("#jm1_row1col2_d").prepend("Column #2").css("color","#333").css("text-align","center").css("font-weight","bold");
$("#jm1_row1col3_d").prepend("Column #3").css("color","#333").css("text-align","center").css("font-weight","bold");
$("#jm1_row1col1_d").parent().css("height","40px");
};
What you will notice here is that I use the jquery selector function to select the label and textbox td’s that CRM uses to layout the form. At first I select the empty td cell using the prev() function in jquery to put in some html text. Notice I put a <br> tag before the text for row 1. This is used to move the first row header down a little to accommodate the height difference when we put in a column header. For row 2 I do not add the <br> tag as it will line up fine. After that I get each row 1 textbox and prepend text with some css styles. This text will be the headers for your columns. After I add all the header text I will set the height of the <tr> for row 1 to 40px to allow for the textbox to show properly. Here is what the resulting form looks like after the onload function fires.
Post by: Jeff Macfie,
