Services
Support
Store
©2015 Intersoft Solutions. All rights reserved.

User Profile & Activity

Shawn August Member
Page
of 19
Problem changing the row cells background color
Posted: January 5, 2011 10:01 AM
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
Posted: January 4, 2011 9:58 AM

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
Posted: December 30, 2010 11:05 AM

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
Posted: December 29, 2010 4:24 PM

It seems like the pending edit will change the red background color after the row loses focus. Is there a way around this? I have a need to make some cell updates and then change the row's background but no matter what, the edit seems to be overriding the red background.

 

I was thinking of using the grid's OnRowSelect event but I don't seem to find a way to revert back to the grid row's background color to "undo" the red.

How to show/hide a WebGrid column including header/footer
Posted: December 9, 2010 2:04 PM

I’ll update the news to this thread when the nightly-build (pre-release) hotfix of WebGrid that address work item #863 issue is available.

Thank you for your cooperation and patience. J

 

FYI. I hope this helps but this bug opens up a bunch of other issues when creating a NewRow where the column alignment is completely off. Take a look at this screenshot and notice that the fields don't align with the other binding fields (Look for the checkbox control).

 

 

WebGrid's WebGridRowChanges collection missing updates from the client side UI
Posted: December 9, 2010 11:15 AM

Hello,

What I meant is you can use Client-side events such as OnAddPendingChanges where you can customize the row changes collection using the parameter provided.

Or, if you prefer to use Server-side, you can try BatchUpdate Server-side events. In this event, you can get the pending row collection using BatchUpdateEventArgs provided.

 

Hope this helps. Thank you.

 

I don't think you understand my issue.  The BatchUpdateEventArgs's PendingChanges (List<WebRowChanges>) appears to be missing updates that were made on the client side.  As I said, it is not reproducable but pops up time to time. We have validation on the WebGrid to ensure the data exists so it is definately entered into the WebGrid.  I also have auditing on the database to ensure the data isn't being overwritten or deleted.

 

    /// <summary>
        /// Handles the Treaty Claim's DataGrid control's OnBatchUpdate event
        /// </summary>
        /// <param name="sender">Sender</param>
        /// <param name="e">Event arugments</param>
        protected void grdTreatyClaims_OnBatchUpdate(object sender, ISNet.WebUI.WebGrid.BatchUpdateEventArgs e)
        {
            // Perform Treaty Claims Grid's batch update
            if (e == null) { return; }
            this.PerformTreatyClaimsGridBatchUpdate(this.GeniusClaimAmountMaster, e.PendingChanges);
        }
/// <summary>
        /// Perform batch update on the Treaty Claims Grid control's source
        /// </summary>
        /// <param name="source">Source to update</param>
        /// <param name="rowChanges">Row Changes to process</param>
        /// <returns>Updated source after batch update</returns>
        private List<Data.GeniusClaimAmountMaster> PerformTreatyClaimsGridBatchUpdate(List<Data.GeniusClaimAmountMaster> source, List<WebGridRowChanges> rowChanges)
        {
            Common.Utility.TraceLogger.Instance.Write("PerformTreatyClaimsGridBatchUpdate [START]"); 
            
            if (rowChanges == null) { return source; }
            
            // Perform change updates
            Data.GeniusClaimAmountMaster item = new Data.GeniusClaimAmountMaster();
            if (source == null) { source = new List<Data.GeniusClaimAmountMaster>(); }
            foreach (WebGridRowChanges rowChangesItem in rowChanges)
            {
                if (rowChangesItem.KeyValue != null)
                {
                    switch (rowChangesItem.RowState)
                    {
                        // Add
                        case RowState.Added:
                            Controllers.FWBWebControls.Treaty.TreatyClaimsGridController.MapRowChangesToObject(item, rowChangesItem);
                            if (item != null)
                            {
                                item.IsDirty = true;
                                source.Add(item);
                            }
                            break;
                        // Update
                        case RowState.Modified:
                            item = Controllers.FWBWebControls.Treaty.TreatyClaimsGridController.GetGeniusClaimAmountMaster(source, rowChangesItem.KeyValue.ToString());
                            if (item != null)
                            {
                                Controllers.FWBWebControls.Treaty.TreatyClaimsGridController.MapRowChangesToObject(item, rowChangesItem);
                                item.IsDirty = true;
                            }
                            break;
                        // Delete
                        case RowState.Deleted:
                            item = Controllers.FWBWebControls.Treaty.TreatyClaimsGridController.GetGeniusClaimAmountMaster(source, rowChangesItem.KeyValue.ToString());
                            if (item != null) { item.IsDeleted = true; }
                            break;
                    }
                }
            }

            Common.Utility.TraceLogger.Instance.Write("PerformTreatyClaimsGridBatchUpdate [END]");

            return source;
        }
Toggle the display of the "Add New Row" box
Posted: December 9, 2010 11:06 AM

Hi Shawn,

I apologize for the misunderstanding. I think I am getting lost and want to clear the questions first.

So you want to access the new row but you dont want your users to add something within the new row field? If you want this scenario, I can suggest you to handle this scenario on OnRowSelect client-side event and set the validation if the ColumnType is new row then set to no edit type.

And If below is not the scenario you wanted, have you tried my previous snippet code that hide the new row? Even it is hidden, you can still adding a new row. Only the style was hidden you still can access it.

Thank you and have a nice day.

Once again, I apologize for my misunderstanding.

Regards,
Niven.

 

I'll try to explain.

 

Is there a client-side event that occurs when the user clicks on the default "Add New Row" row that is displayed when the WebGrid is enabled to allow new rows? I need to perform some logic such as defaulting and loading controls on a new row.  I didn't find any event so I am using a button and its OnClick event.

So, I need a way to completely hide that "Add New Row' row which is done using the server-side code that I provided above. However, the user is still able to click into that row by clicking on that * character as I showed you.  I need to prevent that.

NetFrameworkVersion is null or not an object
Posted: December 8, 2010 2:09 PM

Hello,

The fix is not included in SP1. Please try the attached hotfix.  You should able to run without those error with this hotfix. FYI, this is a nightly build (disclaimer: on). Please let us know any feedback or issue when using this hotfix.

Regards,
Handy

 

I got this same error with the *.6 WebInput version provided in the 2010 R1 SP1 but the latest fix (Version *.7) fixed the problem.

 

Thanks.

Cell's ActivateEdit causing JS exception when cell isn't in scrolling window within WebGrid
Posted: December 8, 2010 11:46 AM

Actually, it appears to be a either the ActivateEdit and/or the Row's Select() Method... Really odd.. I can't seem to reproduce in another project. No problem with either method if the scrollbar is all the way to the LEFT... Very odd.

WebGrid's WebGridRowChanges collection missing updates from the client side UI
Posted: December 8, 2010 10:04 AM

Hello,

Could you explain what scenario do you apply in Client-side UI? Is there anything related with Client binding with Batch Update?

If it is based on Batch update, you can use the parameters available in Batch update Client-side events.

Hope this helps.

 

Thank you.

 

I am sorry, I don't follow you. Can you explain more?

 

Thanks.

All times are GMT -5. The time now is 4:32 AM.
Previous Next