You are currently browsing the category archive for the ‘Look and Feel’ category.

Here is some simple code that you can use to bind your GridView to your MS CRM BusinessEntityCollection data.

 

// Retrieve the accounts.
BusinessEntityCollection accounts = service.RetrieveMultiple(query);

// Define your Dataset and DataTable
DataSet ds = new DataSet();
DataTable dt = new DataTable();

// Set Column headers for the DataTab.e
dt.Columns.Add("name");
dt.Columns.Add("Address1");
dt.Columns.Add("Address2");
dt.Columns.Add("City");
dt.Columns.Add("MainPhone");
dt.Columns.Add("accountid");

//Iterate the BusinessEntityColleciton
foreach (BusinessEntity Account in accounts.BusinessEntities)
{
    account a = (account)Account;
    DataRow dr = dt.NewRow();
    dr["name"] = a.name;
    dr["Address1"] = a.address1_line1;
    dr["Address2"] = a.address1_line2;
    dr["City"] = a.address1_city;
    dr["MainPhone"] = a.telephone1;
    dr["accountid"] = a.accountid.Value;
    dt.Rows.Add(dr);
}

ds.Tables.Add(dt);

// You are now ready to bind your DataSet to your GridView
GridView1.DataSource = ds;
GridView1.DataBind();
Advertisements

I’m a big fan of Microsoft CRM User Interface. Whenever I’ve been asked to build custom browser based business application, I always look to MS CRM UI for inspiration.

One of my favourite component besides GridView is the alphabetic filter under the GridView. It makes finding a record in your current view so easy. Espically if you have 100 or 200 records in the Grid.

So this is what my alphabetic filter looks like.

2I use  a table to create the alphabatic filter row. The html below shows how that is done.

<table style="background:#e0e3e8;font-size: 11px; font-family: Tahoma; width:100%"   id="crmGrid" cellSpacing="0" cellPadding="2">
<tr title="View records that start with this letter" style="width:100%">
<td title="View all records" style="FONT-WEIGHT: normal; COLOR:#000000; height: 17px;" noWrap width="5%" id="All" onMouseOver="BoldText('All');" onMouseout="NormalText('All');" onclick="FilterClick('All');">All</td>
<td title="View records that start with numbers from 0 to 9"  style="width: 18px; height: 17px;" id="#" onMouseOver="BoldText('#');" onMouseout="NormalText('#');" onclick="FilterClick('#');">#</td>
<td id="A" onMouseOver="BoldText('A');" onMouseout="NormalText('A');" onclick="FilterClick('a');">A</td>
<td ID="b" style="height: 17px" onMouseOver="BoldText('B');" onMouseout="NormalText('B');" onclick="FilterClick('b');">B</td>
<td ID="c" style="height: 17px" onMouseOver="BoldText('c');" onMouseout="NormalText('c');" onclick="FilterClick('c');">C</td>
<td ID="d" style="height: 17px" onMouseOver="BoldText('d');" onMouseout="NormalText('d');" onclick="FilterClick('d');">D</td>
<td ID="e" style="height: 17px" onMouseOver="BoldText('e');" onMouseout="NormalText('e');" onclick="FilterClick('e');">E</td>
<td ID="f" style="height: 17px" onMouseOver="BoldText('f');" onMouseout="NormalText('f');" onclick="FilterClick('f');">F</td>
<td ID="g" style="height: 17px" onMouseOver="BoldText('g');" onMouseout="NormalText('g');" onclick="FilterClick('g');">G</td>
<td ID="h" style="height: 17px" onMouseOver="BoldText('h');" onMouseout="NormalText('h');" onclick="FilterClick('h');">H</td>
<td ID="i" style="height: 17px" onMouseOver="BoldText('i');" onMouseout="NormalText('i');" onclick="FilterClick('i');">I</td>
<td ID="j" style="height: 17px" onMouseOver="BoldText('j');" onMouseout="NormalText('j');" onclick="FilterClick('j');">J</td>
<td ID="k" style="height: 17px" onMouseOver="BoldText('k');" onMouseout="NormalText('k');" onclick="FilterClick('k');">K</td>
<td ID="l" style="height: 17px" onMouseOver="BoldText('l');" onMouseout="NormalText('l');" onclick="FilterClick('l');">L</td>
<td ID="m" style="height: 17px" onMouseOver="BoldText('m');" onMouseout="NormalText('m');" onclick="FilterClick('m');">M</td>
<td ID="n" style="height: 17px" onMouseOver="BoldText('n');" onMouseout="NormalText('n');" onclick="FilterClick('n');">N</td>
<td ID="o" style="height: 17px" onMouseOver="BoldText('o');" onMouseout="NormalText('o');" onclick="FilterClick('o');">O</td>
<td ID="p" style="height: 17px" onMouseOver="BoldText('p');" onMouseout="NormalText('p');" onclick="FilterClick('p');">P</td>
<td ID="q" style="height: 17px" onMouseOver="BoldText('q');" onMouseout="NormalText('q');" onclick="FilterClick('q');">Q</td>
<td ID="r" style="height: 17px" onMouseOver="BoldText('r');" onMouseout="NormalText('r');" onclick="FilterClick('r');">R</td>
<td ID="s" style="height: 17px" onMouseOver="BoldText('s');" onMouseout="NormalText('s');" onclick="FilterClick('s');">S</td>
<td ID="t" style="height: 17px" onMouseOver="BoldText('t');" onMouseout="NormalText('t');" onclick="FilterClick('t');">T</td>
<td ID="u" style="height: 17px" onMouseOver="BoldText('u');" onMouseout="NormalText('u');" onclick="FilterClick('u');">U</td>
<td ID="v" style="height: 17px" onMouseOver="BoldText('v');" onMouseout="NormalText('v');" onclick="FilterClick('v');">V</td>
<td ID="w" style="height: 17px" onMouseOver="BoldText('w');" onMouseout="NormalText('w');" onclick="FilterClick('w');">W</td>
<td ID="x" style="height: 17px" onMouseOver="BoldText('x');" onMouseout="NormalText('x');" onclick="FilterClick('x');">X</td>
<td ID="y" style="height: 17px" onMouseOver="BoldText('y');" onMouseout="NormalText('y');" onclick="FilterClick('y');">Y</td>
<td ID="z" style="height: 17px" onMouseOver="BoldText('Z');" onMouseout="NormalText('Z');" onclick="FilterClick('z');">Z</td>
</tr>
</table>

The Id of each cell is very important. And I will explain in a bit. Note that I use three JavaScript functions in each row. 1st is the fuction that makes the alphabet bold when you hover the mouse over it, the 2nd is the one that makes it normal of mouse out and the last one is the one that filters the grid. 

The code of the javascript functions below.


function BoldText(id) {
  if (document.getElementById) {
        document.getElementById(id).style.fontWeight = 'bold';
        document.getElementById(id).style.color = '#000000';
  }
  else if (document.all) {
    document.all[id].style.fontWeight = 'bold';
  }
}

function NormalText(id) {
  if (document.getElementById) {
    if(document.getElementById(id).style.color != '#000088'){
        document.getElementById(id).style.color = '#000000';
        document.getElementById(id).style.fontWeight = 'normal';
        }
  }
  else if (document.all) {
    document.all[id].style.fontWeight = 'normal';
  }
}

function FilterClick(id) {
  if (document.getElementById) {
        document.getElementById('All').style.fontWeight = 'normal';
        document.getElementById('#').style.fontWeight = 'normal';
        document.getElementById('A').style.fontWeight = 'normal';
        document.getElementById('b').style.fontWeight = 'normal';
        document.getElementById('c').style.fontWeight = 'normal';
        document.getElementById('d').style.fontWeight = 'normal';
        document.getElementById('e').style.fontWeight = 'normal';
        document.getElementById('f').style.fontWeight = 'normal';
        document.getElementById('g').style.fontWeight = 'normal';
        document.getElementById('h').style.fontWeight = 'normal';
        document.getElementById('i').style.fontWeight = 'normal';
        document.getElementById('j').style.fontWeight = 'normal';
        document.getElementById('k').style.fontWeight = 'normal';
        document.getElementById('l').style.fontWeight = 'normal';
        document.getElementById('m').style.fontWeight = 'normal';
        document.getElementById('n').style.fontWeight = 'normal';
        document.getElementById('o').style.fontWeight = 'normal';
        document.getElementById('p').style.fontWeight = 'normal';
        document.getElementById('q').style.fontWeight = 'normal';
        document.getElementById('r').style.fontWeight = 'normal';
        document.getElementById('s').style.fontWeight = 'normal';
        document.getElementById('t').style.fontWeight = 'normal';
        document.getElementById('u').style.fontWeight = 'normal';
        document.getElementById('v').style.fontWeight = 'normal';
        document.getElementById('w').style.fontWeight = 'normal';
        document.getElementById('x').style.fontWeight = 'normal';
        document.getElementById('y').style.fontWeight = 'normal';
        document.getElementById('z').style.fontWeight = 'normal';
        document.getElementById(id).style.fontWeight = 'bold';
        document.getElementById(id).style.color= '#000088';
        var button = document.getElementById("FilterClickButton");
        button.innerText = id;
        button.click();
  }
}

Look closely at the last function and you will see that in the last 3 lines I get a reference to a asp.net button (The button is not visible on the page), set the text to be the ID of the alphabet that the user clicks to the text of the button and then finally I call the click event of the asp.net button. I do this so that in the code behind I can check which alaphabet was clicked and what alphabet I need to filter the grid on.

Every MS CRM consultant/Developer at some point will be asked to create a custom webpage that is launched either from within MS CRM or is loaded into MS CRM. And even though it might not be an explicit requirement you know its going to feel good if you make it look and feel like MS CRM.

So to help anyone who hasn’t done this before I thought I’d give you a helping hand.
This is what the finished product looks like.

Gridview screenshot

Ok. So lets get our hands dirty. First have a look at the blue banner at the top of MS CRM detail forms.

This is the code that allows me to create that.

<div>
        <table id="header" class="tableheader">
            <tr><td class="header">Put your header here.</td></tr>
            <tr><td class="headerdetail">Put your screen details here</td></tr>
        </table>
</div>

This is what my CSS looks like

.header
{
     font-family:Tahoma;
     font-size:14pt;
     font-weight:Bold;
     padding-left:10px;
     padding-top:10px;
}

.headerdetail
{
     font-family:Tahoma;
     font-size:11pt;
     font-weight:normal;
     padding-left:10px;
     padding-bottom:15px;
}

If you want to find out more about how to make your html pages look and feel like MS CRM you should have a look at the “crm4 ux design guide.pdf” file that comes with the MS CRM 4.0 sdk.

Lets have a look at the grid now. As you might know the MS CRM grid header is completely seprate from the grid. So lets start by building the gridview header.

<table class=”gridtable”>
    <tr class=”gridHeader”>
         <td width=”5%” style=”height: 16px”></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td width=”20%” style=”height: 16px”><b>Street1</b></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td width=”15%” style=”height: 16px”><b>Street2</b></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td width=”15%” style=”height: 16px”><b>Street3</b></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td width=”10%” style=”height: 16px”><b>City</b></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td width=”10%” style=”height: 16px”><b>County</b></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td width=”10%” style=”height: 16px”><b>Postcode</b></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td width=”10%” style=”height: 16px”><b>Country</b></td>
          <td style=”height: 16px”><img src=”img/resize.gif” /></td>
          <td style=”height: 16px”><img src=”img/grid_Refresh.gif” /></td>
    </tr>
</table>

I’ve copied the images from the MS CRM images folder which can be found at “C:\Program Files\Microsoft Dynamics CRM Server\CRMWeb\_imgs” on the server where you’ve installed MS CRM.

.gridHeader
{
    background-color:#f0f0f0;
    font-family:Tahoma;
    font-size:11px;
    font-weight:normal;
    border-bottom-color:#999999;
    border-left-color:#d4d0c8;
    border-right-color:#d4d0c8;
    border-top-color:#d4d0c8;
}
.gridtable
{
    width:100%;
    border:1px solid #999999;
}

And now for the GridView. I’ve put my gridview in a div because I want the scroll bar to appear when the grid overflows. Also note that since i’ve already have a header I’ve removed the gridview header.

<div class="griddiv">
            <asp:GridView ID="GridView1" DataKeyNames="customeraddressid"
            runat="server" Width="98%" AutoGenerateColumns="False"
            ShowHeader="False" OnRowCreated="GridView1_RowCreated">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:Literal ID="RadioButtonMarkup"
                            runat="server"></asp:Literal>
                        </ItemTemplate>
                        <ItemStyle Width="5%" />
                    </asp:TemplateField>
                    <asp:BoundField DataField="line1" >

                        <ItemStyle Width="20%" />

                    </asp:BoundField>
                    <asp:BoundField DataField="line2" >
                        <ItemStyle Width="15%" />

                    </asp:BoundField>
                    <asp:BoundField DataField="line3" >
                        <ItemStyle Width="15%" />

                    </asp:BoundField>
                    <asp:BoundField DataField="city" >
                        <ItemStyle Width="10%" />

                    </asp:BoundField>
                    <asp:BoundField DataField="county" >
                        <ItemStyle Width="10%" />

                    </asp:BoundField>
                    <asp:BoundField DataField="postalcode">
                        <ItemStyle Width="10%" />
                    </asp:BoundField>
                    <asp:BoundField DataField="country" >
                        <ItemStyle Width="10%" />
                    </asp:BoundField>

                    <asp:BoundField DataField="customeraddressid"
                    Visible="False" />
                </Columns>
            </asp:GridView>
        </div>

Lets now put a line under the grid view. Nothing fancy here.

<hr class=”line”/>

Finally lets make our buttons look like MS CRM buttons.

<table align=”right”>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr>
                <td>

                        <asp:Button ID=”Addbtn” runat=”server” Text=”Add”

                        CssClass=”aspbutton” OnClick=”Addbtn_Click” />

                </td>

                <td>

                        <input type=”button” id=”Cancelbtn”

                        onclick=”closewindow();” value=”Cancel”

                        class=”aspbutton” />

                </td>

        </tr>
</table>

The css for the buttons below.

.aspbutton
{
    font-size:11px;
    font-family:Tahoma;
    height: 20px;
    width: 84px;
    text-align: center;
    cursor: pointer;
    border: 1px #3366CC solid;
    background-color: #CEE7FF;
}

By the way please do not request source code for this. There is not code to give away anymore. What you see on this page is what you get. (Thanks).