Intersoft Community - WebGrid Enterprise - Problem changing the row cells background color

Problem changing the row cells background color

SAgosto — Fri, 07 Jan 2011 10:42:32 GMT

Tyr using CSS instead of directly modifying the cell background color style. Here is the snippet:
<style type="text/css">
    .CustomRowColor
    {
        background-color: "#DC143C" !important;
    }
</style>
Instead of:
cell.style.setAttribute("backgroundColor", "Red", true);
Try:
cell.className += " CustomRowColor";

This is on the right track. However, it might be necessary to remove that style. Here's a quick function that allows the adding/removing of a particular CSS to satisfy this problem.

Thanks for your help!

function WebGrid_SetRowCSS(gridID, row, css, addCSS) 
{
    var returnVal = false;

    try 
    {    
        // Set row's CSS
        if (row == null) { return false; }
        var rowCells = row.GetCells();
        if (rowCells == null) { return false; }

        // Get grid
        var grid = WebGrid_GetGrid(gridID);
        if (grid == null) { return false; }

        // Check if adding or removing CSS
        // NOTE: Assume adding
        if (typeof (addCSS) == "undefined") { addCSS = true; }
        
        // Get table's column length and starting position (Check Grouped Columns)
        var columnLength = grid.RootTable.Columns.length;
        indexNumber = (grid.RootTable.GroupedColumns.length > 0) ? 2 : 1;        
        var rowObject = row;
        if (rowObject.Type.toUpperCase() != "GROUPHEADER") 
        {
            for (var i = 1; i <= columnLength; i++)
            {
                var rowElement = rowObject.RowElement;
                if (rowElement != null) 
                {
                    var cell = rowElement.cells[i];
                    if (cell != null) 
                    {
                        // Set/Remove CSS
                        // NOTE: Only set CSS if it doesn't already exist
                        var cellCSS = cell.className;
                        if (addCSS == true)
                        {
                            if (cellCSS.match(css) == null)
                            {
                                cell.className += " " + css;
                            }
                        }
                        else 
                        {
                            cell.className = cellCSS.replace(css, "");
                        }                          
                    }
                }
            }
        }
        
        returnVal = true;
    }
    catch (ex) { ShowJSException(ex); returnVal = false; }

    return returnVal;
}

Problem changing the row cells background color

Glayaar — Thu, 06 Jan 2011 22:47:22 GMT

Tyr using CSS instead of directly modifying the cell background color style. Here is the snippet:

<style type="text/css">
    .CustomRowColor
    {
        background-color: "#DC143C" !important;
    }
</style>

Instead of:

cell.style.setAttribute("backgroundColor", "Red", true);

Try:

cell.className += " CustomRowColor";

Problem changing the row cells background color

SAgosto — Thu, 06 Jan 2011 09:18:13 GMT

I proprose applying a custom attribute during the WebGrid_SetRowBackgroundColor and re-apply the custom style during the AfterExitEditMode if the custom attribute exist.

I also found an alternative if you do not wish to have the modified row style in the Grid at all, you could just disable it in the BatchUpdate settings.
<BatchUpdateSettings HighlightChanges="false" />
This way, you do not have to implement the AfterExitEditMode event handler.

I don't see how making ANY changes within the AfterExitEditMode event will work given the background color is changed after? I provided sample code above to prove that.

Problem changing the row cells background color

Glayaar — Wed, 05 Jan 2011 22:50:14 GMT

I proprose applying a custom attribute during the WebGrid_SetRowBackgroundColor and re-apply the custom style during the AfterExitEditMode if the custom attribute exist.

I also found an alternative if you do not wish to have the modified row style in the Grid at all, you could just disable it in the BatchUpdate settings.

<BatchUpdateSettings HighlightChanges="false" />

This way, you do not have to implement the AfterExitEditMode event handler.

Problem changing the row cells background color

SAgosto — Wed, 05 Jan 2011 10:01:46 GMT

Try adding a custom attribute in the row element during the WebGrid_SetRowBackgroundColor

rowObject.RowElement.setAttribute("CustomRowColor", "customrowcolor");

And during the AfterExitEditMode only modify the cell color if the custom attribute is applied in the row element

function WebGrid1_OnAfterExitEditMode(controlId, tableName, editObject) {
    var grid = ISGetObject(controlId);
    var selObj = grid.GetSelectedObject();
    var row = selObj.ToRowObject();
    var rowCells = row.GetCells();

    var columnLength = grid.RootTable.Columns.length;
    var rowObject = row;

    var rowElement = rowObject.RowElement;

    if (rowElement != null && rowElement.getAttribute("CustomRowColor") == "customrowcolor") {
        for (var i = 1; i <= columnLength; i++) {
            var cell = rowElement.cells[i];
            if (cell != null) { cell.style.setAttribute("backgroundColor", "Red", true); }
        }
    }
}

This is the same problem as I described above. The row's background is changed by Intersoft *AFTER* the WebGrid's OnAfterExitEditMode. Therefore, the background that I changed is not persiste

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SetRowBackgroundColor.aspx.cs" Inherits="SetRowBackgroundColor" %>
<%@ Register TagPrefix="iswebgrid" Namespace="ISNet.WebUI.WebGrid" Assembly="ISNet.WebUI.WebGrid" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
	<HEAD runat=server>
		<title>SetRowBackgroundColor</title>
		<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
		<meta name="CODE_LANGUAGE" Content="C#">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<script language="javascript">
		 
		    function WebGrid1_OnRowContextMenu(controlID, rowType, rowElement, menuObject) 
            {
                try 
                {
                    // Seperator
                    var separator = new WebMenuItem();
                    separator.Type = "Separator";
                    separator.Name = "wmiSeperator";
                    menuObject.Items.Add(separator);

                    var changeBackgroundColor = new WebMenuItem();
                    changeBackgroundColor.Text = "ChangeBackgroundColor";
                    changeBackgroundColor.Name = "wmiChangeBackgroundColor";
                    changeBackgroundColor.OnClick = "ChangeBackgroundColor";
                    menuObject.Items.Add(changeBackgroundColor);                              
                }
                catch (ex) { ShowJSException(ex); }
            } 
             
            function ChangeBackgroundColor()
            {
                var returnVal = false;
             
                try {
                     
                    var row = WebGrid_GetSelectedRow("WebGrid1");       
                    if (row == null) { return; }
                    
                    WebGrid_SetRowBackgroundColor("WebGrid1", row, "red"); 
                    
                    returnVal = true;
                }
                catch (ex) { ShowJSException(ex); returnVal = false; }
                
                return returnVal;
            }

            function WebGrid_GetSelectedRow(gridID) {

                try {
                    // Get selected row
                    var grid = ISGetObject(gridID);
                    if (grid == null) { return; }
                    var selObj = grid.GetSelectedObject();
                    if (selObj == null) { return; }
                    return selObj.ToRowObject();
                }
                catch (ex) { ShowJSException(ex); }
            }

            function WebGrid_SetRowBackgroundColor(gridID, row, color) {
                var returnVal = false;

                try {
                    // Set row's background color
                    if (row == null) { return false; }
                    var rowCells = row.GetCells();
                    if (rowCells == null) { return false; }

                    // Get grid
                    var grid = ISGetObject(gridID);
                    if (grid == null) { return false; }

                    // Get table's column length and starting position (Check Grouped Columns)
                    var columnLength = grid.RootTable.Columns.length;
                    if (grid.RootTable.GroupedColumns.length > 0) {
                        indexNumber = 2;
                    }
                    else {
                        indexNumber = 1;
                    }

                    var rowObject = row;
                    if (rowObject.Type.toUpperCase != "GROUPHEADER") {
                        for (var i = 1; i <= columnLength; i++) {
                            var rowElement = rowObject.RowElement;
                            if (rowElement != null) {
                                var cell = rowElement.cells[i];
                                if (cell != null) { cell.style.setAttribute("backgroundColor", color, true); }
                            }
                        }
                    }

                    returnVal = true;
                }
                catch (ex) { ShowJSException(ex); returnVal = false; }

                return returnVal;
            }

            function WebGrid1_OnAfterExitEditMode(controlId, tableName, editObject) 
            {
                var grid = ISGetObject(controlId);
                var selObj = grid.GetSelectedObject();
                var row = selObj.ToRowObject();
                var rowCells = row.GetCells();
                var columnLength = grid.RootTable.Columns.length;
                var rowObject = row;
                window.alert("WebGrid1_OnAfterExitEditMode");
                for (var i = 1; i <= columnLength; i++) 
                {
                    var rowElement = rowObject.RowElement;
                    if (rowElement != null) 
                    {
                        var cell = rowElement.cells[i];
                        if (cell != null) 
                        {
                            cell.style.setAttribute("backgroundColor", "Red", true);
                        }
                    }
                }
            }
            
		</script>
	
	</HEAD>
	<body MS_POSITIONING="GridLayout">
		<form id="Form1" method="post" runat="server">
		
			<iswebgrid:webgrid id=WebGrid1 runat="server" Height="279px" Width="896px" 
			DefaultStyleMode="Elegant"
                                    UseDefaultStyle="True"
			OnInitializeDataSource="WebGrid1_InitializeDataSource">
                    <LayoutSettings AutoHeight="false" AutoWidth="false" AllowBatchUpdate="true" BatchUpdateSettings-PromptUnsavedChanges="false"
        BatchUpdateSettings-AutomaticObjectUpdate="false" AllowEdit="Yes" EditOnClick="True"
        AllowAddNew="Yes" AllowDelete="Yes" PromptBeforeDelete="true" NewRowLostFocusAction="AlwaysPrompt"
        ResetNewRowValuesOnError="True" RowHeightDefault="22px" AllowFilter="Yes" AllowSelectColumns="Yes"
        AllowSorting="Yes" HideColumnsWhenGrouped="Default" AllowExport="Yes" InProgressUIBehavior="ChangeCursorToHourGlass"
        ApplyFiltersKey="Enter" AllowColumnFreezing="Yes" ShowFilterStatus="True" PagingMode="VirtualLoad"
        VerboseEditingInformation="False" FilterBarVisible="True" PagingExportMode="ExportAllData"
        CellPaddingDefault="0" AlwaysShowHelpButton="False" VirtualPageSize="25"          
        >
        <ClientSideEvents OnRowContextMenu="WebGrid1_OnRowContextMenu" OnAfterExitEditMode="WebGrid1_OnAfterExitEditMode" />
					<HeaderStyle BorderStyle="Solid" BorderWidth="1px" BackColor="#ECE9D8" ForeColor="Black" Height="20px"
						Font-Size="8pt" Font-Names="Verdana" BorderColor="#ACA899">
						<BorderSettings>
							<Left Color="White"></Left>
							<Top Color="White"></Top>
						</BorderSettings>
					</HeaderStyle>
					<FrameStyle BackColor="#F1EFE2"></FrameStyle>
					<GroupByBox>
						<LabelStyle BorderStyle="Solid" BorderWidth="1px" BackColor="White" Font-Size="8pt" Font-Names="Verdana"
							BorderColor="Navy"></LabelStyle>
						<Style BackColor="Gray">
						</Style>
					</GroupByBox>
					<EditTextboxStyle BorderStyle="None" BorderWidth="0px" Font-Size="8pt" Font-Names="Verdana"></EditTextboxStyle>
					<NewRowStyle BackColor="White" ForeColor="DarkGray" Font-Size="8pt" Font-Names="Verdana"></NewRowStyle>
					<FocusCellStyle BorderStyle="Solid" BorderWidth="1px" BorderColor="Navy"></FocusCellStyle>
					<RowStyle CustomRules="text-overflow: ellipsis; overflow-x: hidden" BackColor="White" Font-Size="8pt"
						Font-Names="Verdana"></RowStyle>
					<GroupRowInfoStyle BorderStyle="Solid" BorderWidth="1px" BackColor="#F1EFE2" Font-Size="8pt" Font-Names="Verdana"
						BorderColor="White">
						<BorderSettings>
							<Bottom Color="Silver"></Bottom>
							<Right Color="Silver"></Right>
						</BorderSettings>
					</GroupRowInfoStyle>
					<SelectedRowStyle BackColor="LightSteelBlue"></SelectedRowStyle>
					<AlternatingRowStyle CustomRules="text-overflow: ellipsis; overflow-x: hidden" BackColor="AntiqueWhite"
						Font-Size="8pt" Font-Names="Verdana"></AlternatingRowStyle>
					<StatusBarStyle BorderStyle="Solid" BorderWidth="1px" BackColor="#ECE9D8" Font-Size="8pt" Font-Names="Verdana"
						BorderColor="#ACA899">
						<Padding Bottom="2px" Left="2px" Top="2px" Right="2px"></Padding>
					</StatusBarStyle>
					<StatusBarCommandStyle>
						<Over BorderWidth="1px" BorderColor="Navy" BorderStyle="Solid" BackColor="CornflowerBlue"></Over>
						<Normal>
							<Padding Bottom="1px" Left="1px" Top="1px" Right="1px"></Padding>
						</Normal>
						<Active BackColor="RoyalBlue" BaseStyle="Over"></Active>
					</StatusBarCommandStyle>
					<PreviewRowStyle ForeColor="#0000C0"></PreviewRowStyle>
				</LayoutSettings>
				<RootTable DataKeyField="CustomerID" Caption="Customers" GridLineStyle="NotSet">
					<Columns>
					        <ISWebGrid:WebGridColumn Caption="Portfolio Name" Name="PortfolioNameList"  
                                                DataType="System.String" ColumnType="Text" EditType="NoEdit" NewRowEditType="NoEdit"
                                                FilterEditType="TextBox" Width="100px">
                                            </ISWebGrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Address" DataMember="Address" Name="Address" Width="100px"></iswebgrid:WebGridColumn>
						 
					 <ISWebGrid:WebGridColumn Caption=" " Name="AddPortfolio" DataMember=""
                        ButtonText="Add Portfolio" DataType="System.String" ColumnType="Template" EditType="NoEdit"
                        NewRowEditType="SameAsEditType" FilterEditType="NoEdit" Width="65px">
                        <ButtonStyle BackColor="AliceBlue">
                            <Padding Top="2px" Left="1px" Right="1px" Bottom="1px" />
                        </ButtonStyle>
                        <CellTemplate>
                            <img runat="server" id="imgPortfolio"  alt="Manage this treaty's portfolios"
                                border="0" style="padding-top: 1px;"  
                             />
                        </CellTemplate>
                    </ISWebGrid:WebGridColumn>
                    
                <iswebgrid:WebGridColumn Caption="City" DataMember="City" Name="City" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="CompanyName" DataMember="CompanyName" Name="CompanyName" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="ContactName" DataMember="ContactName" Name="ContactName" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="ContactTitle" DataMember="ContactTitle" Name="ContactTitle" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Country" DataMember="Country" Name="Country" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="CustomerID" DataMember="CustomerID" Name="CustomerID" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Fax" DataMember="Fax" Name="Fax" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Phone" DataMember="Phone" Name="Phone" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="PostalCode" DataMember="PostalCode" Name="PostalCode" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Region" DataMember="Region" Name="Region" Width="100px"></iswebgrid:WebGridColumn>
					</Columns>
				</RootTable>
			</iswebgrid:webgrid>
			 
		</form>
	</body>
</HTML>

Problem changing the row cells background color

Glayaar — Tue, 04 Jan 2011 23:52:48 GMT

Try adding a custom attribute in the row element during the WebGrid_SetRowBackgroundColor

rowObject.RowElement.setAttribute("CustomRowColor", "customrowcolor");

And during the AfterExitEditMode only modify the cell color if the custom attribute is applied in the row element

function WebGrid1_OnAfterExitEditMode(controlId, tableName, editObject) {
    var grid = ISGetObject(controlId);
    var selObj = grid.GetSelectedObject();
    var row = selObj.ToRowObject();
    var rowCells = row.GetCells();

    var columnLength = grid.RootTable.Columns.length;
    var rowObject = row;

    var rowElement = rowObject.RowElement;

    if (rowElement != null && rowElement.getAttribute("CustomRowColor") == "customrowcolor") {
        for (var i = 1; i <= columnLength; i++) {
            var cell = rowElement.cells[i];
            if (cell != null) { cell.style.setAttribute("backgroundColor", "Red", true); }
        }
    }
}

Problem changing the row cells background color

SAgosto — Tue, 04 Jan 2011 09:58:25 GMT

By default in BatchUpdate mode the WebGrid will apply a style for modified row. This style is applied by setting the cell attribute, which will override the style you already applied. My previous post suggestion is to override this default style during the AfterExitEditMode event handler with the style you already defined.
In order to integrate the RowContextMenu and AfterExitEditMode method, you could assign a custom attribute to the row in RowContextMenu, for example CustomColor='CustomColor', in the AfterExitEditMode event handler you only assigned the Red color to the row which has the CustomColor attribute.

Can you explain this a bit more?

Thanks.

Problem changing the row cells background color

Glayaar — Sun, 02 Jan 2011 23:08:45 GMT

By default in BatchUpdate mode the WebGrid will apply a style for modified row. This style is applied by setting the cell attribute, which will override the style you already applied. My previous post suggestion is to override this default style during the AfterExitEditMode event handler with the style you already defined.

In order to integrate the RowContextMenu and AfterExitEditMode method, you could assign a custom attribute to the row in RowContextMenu, for example CustomColor='CustomColor', in the AfterExitEditMode event handler you only assigned the Red color to the row which has the CustomColor attribute.

Problem changing the row cells background color

SAgosto — Thu, 30 Dec 2010 11:05:13 GMT

In such scenario, you will need to re-apply the change background color logic in the AfterExitEditMode client side event handler. By default the WebGrid will apply the edited row with a predefined style. Here is the snippet to changed the background color during AfterExitEditMode event handler:

function WebGrid1_OnAfterExitEditMode(controlId, tableName, editObject) {
    var grid = ISGetObject(controlId);
    var selObj = grid.GetSelectedObject();
    var row = selObj.ToRowObject();
    var rowCells = row.GetCells();

    var columnLength = grid.RootTable.Columns.length;
    var rowObject = row;
    for (var i = 1; i <= columnLength; i++) {
        var rowElement = rowObject.RowElement;
        if (rowElement != null) {
            var cell = rowElement.cells[i];
            if (cell != null) { cell.style.setAttribute("backgroundColor", "Red", true); }
        }
    }
}

This won't fix the problem because the cell edit that fires the OnAfterExitEditMode event occurs BEFORE the RowContextMenu's function fires. I don't understand what is then causing the row's background to be set back given the RowContextMenu's function is setting the background to red?

Problem changing the row cells background color

Glayaar — Wed, 29 Dec 2010 22:06:18 GMT

function WebGrid1_OnAfterExitEditMode(controlId, tableName, editObject) {
    var grid = ISGetObject(controlId);
    var selObj = grid.GetSelectedObject();
    var row = selObj.ToRowObject();
    var rowCells = row.GetCells();

    var columnLength = grid.RootTable.Columns.length;
    var rowObject = row;
    for (var i = 1; i <= columnLength; i++) {
        var rowElement = rowObject.RowElement;
        if (rowElement != null) {
            var cell = rowElement.cells[i];
            if (cell != null) { cell.style.setAttribute("backgroundColor", "Red", true); }
        }
    }
}

Problem changing the row cells background color

SAgosto — Wed, 29 Dec 2010 16:10:13 GMT

I am having a problem changing the row cells background color. To reproduce, right click on a row and click the ChangeBackGroundColor menu item. After the row loses focus, you will notice the row's background is red. However, if you make a change to one of the editable cells and then right click the row to click the ChangeBackGroundColor menu item, the row doesn't change background color after the row loses focus. How do I fix?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SetRowBackgroundColor.aspx.cs" Inherits="SetRowBackgroundColor" %>
<%@ Register TagPrefix="iswebgrid" Namespace="ISNet.WebUI.WebGrid" Assembly="ISNet.WebUI.WebGrid" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
	<HEAD runat=server>
		<title>SetRowBackgroundColor</title>
		<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
		<meta name="CODE_LANGUAGE" Content="C#">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<script language="javascript">
		 
		    function WebGrid1_OnRowContextMenu(controlID, rowType, rowElement, menuObject) 
            {
                try 
                {
                    // Seperator
                    var separator = new WebMenuItem();
                    separator.Type = "Separator";
                    separator.Name = "wmiSeperator";
                    menuObject.Items.Add(separator);

                    var changeBackgroundColor = new WebMenuItem();
                    changeBackgroundColor.Text = "ChangeBackgroundColor";
                    changeBackgroundColor.Name = "wmiChangeBackgroundColor";
                    changeBackgroundColor.OnClick = "ChangeBackgroundColor";
                    menuObject.Items.Add(changeBackgroundColor);                              
                }
                catch (ex) { ShowJSException(ex); }
            } 
             
            function ChangeBackgroundColor()
            {
                var returnVal = false;
             
                try {
                     
                    var row = WebGrid_GetSelectedRow("WebGrid1");       
                    if (row == null) { return; }
                    
                    WebGrid_SetRowBackgroundColor("WebGrid1", row, "red"); 
                    
                    returnVal = true;
                }
                catch (ex) { ShowJSException(ex); returnVal = false; }
                
                return returnVal;
            }

            function WebGrid_GetSelectedRow(gridID) {

                try {
                    // Get selected row
                    var grid = ISGetObject(gridID);
                    if (grid == null) { return; }
                    var selObj = grid.GetSelectedObject();
                    if (selObj == null) { return; }
                    return selObj.ToRowObject();
                }
                catch (ex) { ShowJSException(ex); }
            }

            function WebGrid_SetRowBackgroundColor(gridID, row, color) {
                var returnVal = false;

                try {
                    // Set row's background color
                    if (row == null) { return false; }
                    var rowCells = row.GetCells();
                    if (rowCells == null) { return false; }

                    // Get grid
                    var grid = ISGetObject(gridID);
                    if (grid == null) { return false; }

                    // Get table's column length and starting position (Check Grouped Columns)
                    var columnLength = grid.RootTable.Columns.length;
                    if (grid.RootTable.GroupedColumns.length > 0) {
                        indexNumber = 2;
                    }
                    else {
                        indexNumber = 1;
                    }

                    var rowObject = row;
                    if (rowObject.Type.toUpperCase != "GROUPHEADER") {
                        for (var i = 1; i <= columnLength; i++) {
                            var rowElement = rowObject.RowElement;
                            if (rowElement != null) {
                                var cell = rowElement.cells[i];
                                if (cell != null) { cell.style.setAttribute("backgroundColor", color, true); }
                            }
                        }
                    }

                    returnVal = true;
                }
                catch (ex) { ShowJSException(ex); returnVal = false; }

                return returnVal;
            }
		</script>
	
	</HEAD>
	<body MS_POSITIONING="GridLayout">
		<form id="Form1" method="post" runat="server">
		
			<iswebgrid:webgrid id=WebGrid1 runat="server" Height="279px" Width="896px" 
			DefaultStyleMode="Elegant"
                                    UseDefaultStyle="True"
			OnInitializeDataSource="WebGrid1_InitializeDataSource">
                    <LayoutSettings AutoHeight="false" AutoWidth="false" AllowBatchUpdate="true" BatchUpdateSettings-PromptUnsavedChanges="false"
        BatchUpdateSettings-AutomaticObjectUpdate="false" AllowEdit="Yes" EditOnClick="True"
        AllowAddNew="Yes" AllowDelete="Yes" PromptBeforeDelete="true" NewRowLostFocusAction="AlwaysPrompt"
        ResetNewRowValuesOnError="True" RowHeightDefault="22px" AllowFilter="Yes" AllowSelectColumns="Yes"
        AllowSorting="Yes" HideColumnsWhenGrouped="Default" AllowExport="Yes" InProgressUIBehavior="ChangeCursorToHourGlass"
        ApplyFiltersKey="Enter" AllowColumnFreezing="Yes" ShowFilterStatus="True" PagingMode="VirtualLoad"
        VerboseEditingInformation="False" FilterBarVisible="True" PagingExportMode="ExportAllData"
        CellPaddingDefault="0" AlwaysShowHelpButton="False" VirtualPageSize="25"          
        >
        <ClientSideEvents OnRowContextMenu="WebGrid1_OnRowContextMenu" />
					<HeaderStyle BorderStyle="Solid" BorderWidth="1px" BackColor="#ECE9D8" ForeColor="Black" Height="20px"
						Font-Size="8pt" Font-Names="Verdana" BorderColor="#ACA899">
						<BorderSettings>
							<Left Color="White"></Left>
							<Top Color="White"></Top>
						</BorderSettings>
					</HeaderStyle>
					<FrameStyle BackColor="#F1EFE2"></FrameStyle>
					<GroupByBox>
						<LabelStyle BorderStyle="Solid" BorderWidth="1px" BackColor="White" Font-Size="8pt" Font-Names="Verdana"
							BorderColor="Navy"></LabelStyle>
						<Style BackColor="Gray">
						</Style>
					</GroupByBox>
					<EditTextboxStyle BorderStyle="None" BorderWidth="0px" Font-Size="8pt" Font-Names="Verdana"></EditTextboxStyle>
					<NewRowStyle BackColor="White" ForeColor="DarkGray" Font-Size="8pt" Font-Names="Verdana"></NewRowStyle>
					<FocusCellStyle BorderStyle="Solid" BorderWidth="1px" BorderColor="Navy"></FocusCellStyle>
					<RowStyle CustomRules="text-overflow: ellipsis; overflow-x: hidden" BackColor="White" Font-Size="8pt"
						Font-Names="Verdana"></RowStyle>
					<GroupRowInfoStyle BorderStyle="Solid" BorderWidth="1px" BackColor="#F1EFE2" Font-Size="8pt" Font-Names="Verdana"
						BorderColor="White">
						<BorderSettings>
							<Bottom Color="Silver"></Bottom>
							<Right Color="Silver"></Right>
						</BorderSettings>
					</GroupRowInfoStyle>
					<SelectedRowStyle BackColor="LightSteelBlue"></SelectedRowStyle>
					<AlternatingRowStyle CustomRules="text-overflow: ellipsis; overflow-x: hidden" BackColor="AntiqueWhite"
						Font-Size="8pt" Font-Names="Verdana"></AlternatingRowStyle>
					<StatusBarStyle BorderStyle="Solid" BorderWidth="1px" BackColor="#ECE9D8" Font-Size="8pt" Font-Names="Verdana"
						BorderColor="#ACA899">
						<Padding Bottom="2px" Left="2px" Top="2px" Right="2px"></Padding>
					</StatusBarStyle>
					<StatusBarCommandStyle>
						<Over BorderWidth="1px" BorderColor="Navy" BorderStyle="Solid" BackColor="CornflowerBlue"></Over>
						<Normal>
							<Padding Bottom="1px" Left="1px" Top="1px" Right="1px"></Padding>
						</Normal>
						<Active BackColor="RoyalBlue" BaseStyle="Over"></Active>
					</StatusBarCommandStyle>
					<PreviewRowStyle ForeColor="#0000C0"></PreviewRowStyle>
				</LayoutSettings>
				<RootTable DataKeyField="CustomerID" Caption="Customers" GridLineStyle="NotSet">
					<Columns>
					        <ISWebGrid:WebGridColumn Caption="Portfolio Name" Name="PortfolioNameList"  
                                                DataType="System.String" ColumnType="Text" EditType="NoEdit" NewRowEditType="NoEdit"
                                                FilterEditType="TextBox" Width="100px">
                                            </ISWebGrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Address" DataMember="Address" Name="Address" Width="100px"></iswebgrid:WebGridColumn>
						 
					 <ISWebGrid:WebGridColumn Caption=" " Name="AddPortfolio" DataMember=""
                        ButtonText="Add Portfolio" DataType="System.String" ColumnType="Template" EditType="NoEdit"
                        NewRowEditType="SameAsEditType" FilterEditType="NoEdit" Width="65px">
                        <ButtonStyle BackColor="AliceBlue">
                            <Padding Top="2px" Left="1px" Right="1px" Bottom="1px" />
                        </ButtonStyle>
                        <CellTemplate>
                            <img runat="server" id="imgPortfolio"  alt="Manage this treaty's portfolios"
                                border="0" style="padding-top: 1px;"  
                             />
                        </CellTemplate>
                    </ISWebGrid:WebGridColumn>
                    
                <iswebgrid:WebGridColumn Caption="City" DataMember="City" Name="City" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="CompanyName" DataMember="CompanyName" Name="CompanyName" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="ContactName" DataMember="ContactName" Name="ContactName" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="ContactTitle" DataMember="ContactTitle" Name="ContactTitle" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Country" DataMember="Country" Name="Country" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="CustomerID" DataMember="CustomerID" Name="CustomerID" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Fax" DataMember="Fax" Name="Fax" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Phone" DataMember="Phone" Name="Phone" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="PostalCode" DataMember="PostalCode" Name="PostalCode" Width="100px"></iswebgrid:WebGridColumn>
						<iswebgrid:WebGridColumn Caption="Region" DataMember="Region" Name="Region" Width="100px"></iswebgrid:WebGridColumn>
					</Columns>
				</RootTable>
			</iswebgrid:webgrid>
			 
		</form>
	</body>
</HTML>