ComponentArt

Adding a ComponentArt menu to a web site is something that I have to do frequently, here is template code to do that quickly

Menu code:

<ComponentArt:Menu id="Menu1"
    ExpandDelay="50"
    DefaultGroupCssClass="Group"
    SiteMapXmlFile="menuData.xml"
    ImagesBaseUrl="images/"
    DefaultItemLookID="DefaultItemLook"
    EnableViewState="false" Width="100%"
    runat="server">
    <ItemLooks>
        <ComponentArt:ItemLook LookID="DefaultItemLook" CssClass="Item" 
            HoverCssClass="ItemH" ExpandedCssClass="ItemExp" LabelPaddingLeft="5" 
            LabelPaddingRight="15" LabelPaddingTop="2" LabelPaddingBottom="2" 
            RightIconUrl="arrow.gif" RightIconWidth="15" RightIconHeight="10" 
            RightIconVisibility="WhenExpandable" />
        <ComponentArt:ItemLook LookID="EdgeLook" CssClass="ItemEdge" />
        <ComponentArt:ItemLook LookID="BreakItem" ImageUrl="break.gif" ImageHeight="1" ImageWidth="100%" />
    </ItemLooks>
</ComponentArt:Menu>

Create MenuData.xml like this:

<SiteMap>
 <item text=" " width="5px" LookID="EdgeLook" />
 <item text="Home" NavigateUrl="Default.aspx"  />


 <item text=" " width="5px" LookID="EdgeLook" />
 <item text="Photo Album" NavigateUrl="PhotoAlbums.aspx"  />


 <item text=" " width="5px" LookID="EdgeLook" />
 <item text="Photo Caption Contest" NavigateUrl="PhotoCaptionContest.aspx"  />


 <item text=" " width="5px" LookID="EdgeLook" />
 <item text=" " width="100%" />
</SiteMap>

Then add the .css file:

.Group
{
 border:solid 1px black; 


 background-repeat:repeat;
 background-position:left;
 padding-bottom: 0px;
 padding-top:0px;
 padding-left:2px;
 padding-right: 2px; 
 text-align: center;
 height:22px; 
 vertical-align:middle;
 font-size:12px; 
 color:white;


}
.test { }


.ItemEdge
{
 font-family: verdana;
 background-image :url(/images/menuBG2.gif);
 border:solid 0px black; 
 cursor:pointer;
}
.Item
{
 font-family: verdana;
 background-image :url(/images/menuBG.gif);
 border:solid 0px black; 
 cursor:pointer;
}


.ItemH
{
 font-family: verdana; 
 background-image :url(/images/menuBG.gif);
 color:silver; 
 border:solid 0px black; 
 cursor:pointer;
}


.ItemExp
{
  color:black; 
  font-size:12px; 
  border:solid 0px black; 
  cursor:pointer;
}


 

This is a small piece of code that I got in response to a request on the CA fourm. I'm posting it here so that I can find it more easily when I need it.

 The issue is that when I open an older site to edit it, sometimes the ComponentArt dll gets updated. Then, the client will call sometime later and complain about the licensing 'nag' screen.

 This code will do something if the menu is not properly licensed

 if not menu1.islicensed() then


     'do something


    menu1.visible = false


end if

In this example we have one grid that is in 'callback' mode and is doing inserts and deletes. We need to rebind a second grid when the first finishes its insert/delete

The core functionality involves placing a ComponentArt Callback control on the form, and placing the second grid within it, like so:

                 <ComponentArt:CallBack ID="Callback1" runat="server">  
                    <LoadingPanelClientTemplate>
                              <table cellspacing="20" cellpadding="0" border="0" style="background-color: White; border:solid 1px black ">
                                  <tr>
                                      <td style="font-size: 10px;">
                                          Loading...&nbsp;</td>
                                      <td>
                                          </td alt="loading..." src="../images/spinner.gif" mce_src="../images/spinner.gif" width="16" height="16" border="0">
                                  </tr>
                              </table>
                    </LoadingPanelClientTemplate>
                 
                    <Content>
                        <asp:PlaceHolder ID="PlaceHolder1" runat="server">
                            <ComponentArt:Grid ID="Grid2" 
                                RunningMode="Callback"  Visible="true"
                                CssClass="Grid" 
                                ShowHeader="false"
                                SearchTextCssClass="GridHeaderText" HeaderCssClass="GridHeader" FooterCssClass="GridFooter"
                                GroupByCssClass="GroupByCell" GroupByTextCssClass="GroupByText" PageSize="15"
                                PagerStyle="Numbered" PagerTextCssClass="GridFooterText" GroupingPageSize="5"
                                PreExpandOnGroup="true" ImagesBaseUrl="~/images/" TreeLineImagesFolderUrl="~/images/lines/"
                                TreeLineImageWidth="22" TreeLineImageHeight="19" IndentCellWidth="22" GroupingNotificationTextCssClass="GridHeaderText"
                                Width="300px" 
                                runat="server">
                            <Levels>
                                <ComponentArt:GridLevel DataKeyField="dex_row_id" 
                                    ShowTableHeading="false" ShowSelectorCells="false"
                                    RowCssClass="Row" ColumnReorderIndicatorImageUrl="reorder.gif" DataCellCssClass="DataCell"
                                    HeadingCellCssClass="HeadingCell" HeadingCellHoverCssClass="HeadingCellHover"
                                    AllowGrouping="false" HeadingCellActiveCssClass="HeadingCellActive" HeadingRowCssClass="HeadingRow"
                                    HeadingTextCssClass="HeadingCellText" SelectedRowCssClass="SelectedRow" GroupHeadingCssClass="GroupHeading"
                                    SortAscendingImageUrl="asc.gif" SortDescendingImageUrl="desc.gif" SortImageWidth="10"
                                    SortImageHeight="5"
                                    >
                                    <Columns>
                                        <ComponentArt:GridColumn DataField="dex_row_id"  Visible="false"  />
                                        <ComponentArt:GridColumn DataField="locncode" HeadingText="Location"  Visible="true"  />
                                        <ComponentArt:GridColumn DataField="lotnumbr" HeadingText="Lot"  Visible="true"  />
                                        <ComponentArt:GridColumn DataField="qtyAvail" HeadingText="Qty Available"  Visible="true"  />
                                    </Columns>
                                </ComponentArt:GridLevel>
                            </Levels>
                        </ComponentArt:Grid>
                        </asp:PlaceHolder>
                    </Content>
                         
    </ComponentArt:CallBack>

Then, place the following javascript on the form. Most of it is required for the grid1's 'callback' functionality, but the references to callback1 are added. More on that in a minute

     <script type="text/javascript">


    function Grid1_onItemBeforeDelete(sender, eventArgs)
    {
    if (!confirm("Delete record?"))
      eventArgs.set_cancel(true);
    }
    function insertRow()
    {
        Grid1.editComplete();
        <%= Callback1.ClientObjectId %>.Callback(1); 


    }
    function deleteRow(rowId)
    {
        Grid1.deleteItem(Grid1.getItemFromClientId(rowId));
        <%= Callback1.ClientObjectId %>.Callback(1); 
    }


    function Grid1_onCallbackError(sender, eventArgs)
    {
      if (confirm('Invalid data has been entered. View details?')) alert(eventArgs.get_errorMessage());
      Grid1.page(0);
    }
    </script>

Last, we put the following code in the code behind and we're done.

Note that in the code above we do 'Callback(1); ', the '1' is a parameter. That could be any param that you want to pass to the callback function, it is retrieved using 'e.parameter' in the Callback1_callback function.

     Public Sub CallBack1_Callback(ByVal sender As Object, ByVal e As ComponentArt.Web.UI.CallBackEventArgs) Handles Callback1.Callback
        'the user has chosen a new group, render the grid
        bindGrid2()
        Grid2.RenderControl(e.Output)


    End Sub