Intersoft Community - WebGrid Enterprise - WebGrid's NewRow not displaying CellTemplate

WebGrid's NewRow not displaying CellTemplate

niven — Wed, 22 Sep 2010 05:58:24 GMT

Hi Shawn,

I apologize for the video. I have re-upload the video and have tested it.

Edit:

I have attach a workaround for your issue.

I put my code inside the AddNewRow function.

//Images
var link = document.createElement('img');
link.setAttribute('src', 'images/1.gif');
newRow.GetElement().getElementsByTagName("TD")[2].appendChild(link);

You have to put the code after the newRow.AddPendingChanges(). If you put the code before newRow.AddPendingChanges(). The element of the cell is not created yet. This is why the image won't rendered before AcceptAllChanges. Hopefully this workaround can be fit in on your scenario.

Thank you and have a nice day.

Best regards,

Niven Prasetya

WebGrid's NewRow not displaying CellTemplate

SAgosto — Tue, 21 Sep 2010 10:27:47 GMT

Hi Shawn,
I have attach a video and a sample of mine using a few method of your code.
As you see in the video, I have define a templated cell with an image inside. By the time I click on the Add new 10 rows button, the new rows will be automatically add without an image on templated cell yet. But the image on templated cell will be show by the time you accept all changes.
It is already templated cell behaviour that it will not show what inside the templated cell when the changes haven't apply yet.
Please kindly inform me if this is the right scenario as you wanted? If not, please kindly change what inside my code since we are using a different database when run it.
Hope this can solve your issue.

Best regards,
Niven Prasetya

The AVI won't play for me. Is it corrupted? I tried various players.

I don't see any changes in the code but it sounds like the template controls won't be available until the data is accepted. This is a bug to me. Other controls are rendered properly when a NewRow is created but not the CellTemplate? I don't understand why.

WebGrid's NewRow not displaying CellTemplate

niven — Tue, 21 Sep 2010 00:44:30 GMT

Hi Shawn,

I have attach a video and a sample of mine using a few method of your code.

As you see in the video, I have define a templated cell with an image inside. By the time I click on the Add new 10 rows button, the new rows will be automatically add without an image on templated cell yet. But the image on templated cell will be show by the time you accept all changes.

It is already templated cell behaviour that it will not show what inside the templated cell when the changes haven't apply yet.

Please kindly inform me if this is the right scenario as you wanted? If not, please kindly change what inside my code since we are using a different database when run it.

Hope this can solve your issue.

Best regards,

Niven Prasetya

WebGrid's NewRow not displaying CellTemplate

SAgosto — Mon, 20 Sep 2010 14:13:20 GMT

Hi Shawn,

I can't replicate your issue, My CellTemplate WebGrid can show an image just fine.
Would you mind to send me your sample and let me try yours on my side?

Thank you.
Have a nice day.

Best regards,
Niven Prasetya

Please click the "Add 10 new rows" and notice the button is not displayed for any of the 10 rows.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BatchUpdateDeleteRow.aspx.cs" Inherits="BatchUpdateDeleteRow" %>
<%@ 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>BatchUpdateDeleteRow</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 WebGrid_SetFieldText(field, text, updateValueField) {
		        try {
		            // Set field's text
		            // NOTE: Default the value to the text if flag is not specified
		            if (field == null) { return; }
		            if (typeof (updateValueField) == "undefined") { updateValueField = true; }
		            field.SetText(text, updateValueField, true);
		        }
		        catch (ex) { ShowJSException(ex); }
		    }

		    function AddNewRowForceNewData() 
		    {
		        var grdInurings = ISGetObject("WebGrid1");
			
		        // Create new row
		        var newRow = grdInurings.RootTable.NewRow();
		        if (newRow == null) { return false; }

		        // Default new row's data
		        // NOTE: Scroll to row before new row to avoid lag from WebGrid loading more data (if exist)
		        grdInurings.ClearSelection();

		        // Address
		        var cells = newRow.GetCells();
		        var address = cells.GetNamedItem("Address");
		        if (address != null) { WebGrid_SetFieldText(address, ""); }

		        // Customer ID
		        var customerID = cells.GetNamedItem("CustomerID");
		        if (customerID != null) 
		        {
		            window.alert("Why does this field need to be set for a new row when the ID is not set until the data is committed?");
		            var now = new Date();
		            WebGrid_SetFieldText(customerID, String((now.getSeconds() + now.getMilliseconds())));
		        }
		        newRow.AddPendingChanges();

		        // Focus
		        newRow.Select();
		        
		        return true;
		    }

		    function AddNewRows(numOfNewRows, numOfDeleteRows) 
		    {
		        var grdInurings = ISGetObject("WebGrid1");
		        if (typeof (numOfDeleteRows) == "undefined") { numOfDeleteRows = 0; }		        
		        for (var index = 0; index < numOfNewRows; index++)
		        {
		            var newRow = AddNewRow();
		            if (index < numOfDeleteRows) 
		            {
		                WebGrid_DeleteRow(newRow);
		            }
		        }
		        
		        return true;
		    }

		    function AddNewRow() 
		    {
		        // Create new row
		        var grdInurings = ISGetObject("WebGrid1");
		        var newRow = grdInurings.RootTable.NewRow();
		        if (newRow == null) { return false; }

		        // Default new row's data
		        // NOTE: Scroll to row before new row to avoid lag from WebGrid loading more data (if exist)
		        grdInurings.ClearSelection();

		        // Address
		        var cells = newRow.GetCells();
		        var address = cells.GetNamedItem("Address");
		        if (address != null) { WebGrid_SetFieldText(address, ""); }

		        // Customer ID
		        var customerID = cells.GetNamedItem("CustomerID");
		        if (customerID != null) 
		        {
		            var now = new Date();
		            WebGrid_SetFieldText(customerID, String((now.getSeconds() + now.getMilliseconds())));
		        }
		        newRow.AddPendingChanges();
		        return newRow;
		    }

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

		    function WebGrid_DeleteSelectedRow() 
		    {
		        try {
		            WebGrid_DeleteRow(WebGrid_GetSelectedRow());
		            
		        }
		        catch (ex) { ShowJSException(ex); }
		    }
		    
		    function WebGrid_DeleteRow(row)	
		    {
		        try 
		        {

		            if (row == null) { return; }
		            row.Delete();
		            row.AddPendingChanges();

		            var rowElement = row.GetElement();
		            //if (rowElement != null) { rowElement.style.display = "none"; }
		        }
		        catch (ex) { ShowJSException(ex); }
		    }

		    function WebGrid_UpdateSelectedRow()
		    {
		        try 
		        {
		            var grdInurings = ISGetObject("WebGrid1");
		             var updateRow = WebGrid_GetSelectedRow();
		            var cells = updateRow.GetCells();
		            var now = new Date()
		            // Get grid
		            

		            // Indicate edit is occurring
		            grdInurings.ClearSelection();
		            updateRow.Select();
		            updateRow.BeginEdit();
		            
		            WebGrid_SetFieldText(cells.GetNamedItem("PortfolioNameList"), String("Hello World" + (now.getSeconds() + now.getMilliseconds())));

		            // Indicate row's data has been changed and set row stats to edit
		            updateRow.Update();
		            updateRow.SetDataChanged();
		            updateRow.AddPendingChanges();
		            grdInurings.MarkEdit();
		 
            
		        }
		        catch (ex) { ShowJSException(ex); }
		    }

		    //=================================================================
		    // Function     : grdInurings_OnRowContextMenu
		    // Description  : This method will create Context menu based on the
		    //              : row.
		    //=================================================================
		    function grdInurings_OnRowContextMenu(controlId, rowType, rowElement, menuObject) {
		        try {
		             
		            // Manage Portfolios
		            var managePortfolios = new WebMenuItem();
		              managePortfolios.Text = "Manage Portfolios";
		            managePortfolios.Name = "itmManagePortfolios";
		            managePortfolios.OnClick = "WebGrid_UpdateSelectedRow";
		            menuObject.Items.Add(managePortfolios);

		            
		        }
		        catch (ex) { ShowJSException(ex); }
		    }
		</script>
	</HEAD>
	<body MS_POSITIONING="GridLayout">
		<form id="Form1" method="post" runat="server">
		<input type="button" value="Update Selected Row" onclick="javascript:WebGrid_UpdateSelectedRow();" />
		<input type="button" value="New Row Causing More Data To Load" onclick="javascript:AddNewRowForceNewData();" />
		<input type="button" value="Add 5 new rows and delete 2" onclick="javascript:AddNewRows(5, 2);" />
		<input type="button" value="Delete Selected Row" onclick="javascript:WebGrid_DeleteSelectedRow();" />
		<input type="button" value="Add 10 new rows" onclick="javascript:AddNewRows(10);" />
		<asp:button runat="server" Text="Check WebRowChanges" OnClick="PerformInuringsGridBatchUpdate" />
			<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="grdInurings_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>

WebGrid's NewRow not displaying CellTemplate

niven — Thu, 16 Sep 2010 22:45:04 GMT

Hi Shawn,

I think there's a misscommunication between us.

Could you please kindly send me a simple sample of your scenario to let me know what kind of issue occured?

If not, please kindly change my given sample into the issue you have experienced.

Thank you and have a nice day.

Best regards,

Niven Prasetya

WebGrid's NewRow not displaying CellTemplate

SAgosto — Thu, 16 Sep 2010 09:14:07 GMT

Hi Shawn,

As I mention in the previous post. If the image on TemplatedCell was already pre-defined by the time the Grid was made, it will automatically show the image when you creating rows on the client side.
But TemplatedCell can't handle a post-defined image (The Grid already made, then creating rows with inputing an image inside the TemplatedCell). The TemplatedCell ability is to add ASP.NET server controls to the WebGridCell using the new Template Column Type. When using the Template column Type, you can put any server side controls inside the CellTemplate property of the WebGridColumn.
If you really want this features. You can go to our TDN http://dev2.intersoftpt.com/. Under Create New Item dockitems, choose Feature Request. You can input any features you need on the next development.
Thank you and have a nice day.

Best regards,
Niven Prasetya.

The CellTemplate is defined within the markup and still does not show up. Was this fixed after WebGrid (7.0.7200.403)? Can you give me a very basic example that you verifies works for you and I will test locally?

WebGrid's NewRow not displaying CellTemplate

niven — Wed, 15 Sep 2010 21:34:30 GMT

Hi Shawn,

As I mention in the previous post. If the image on TemplatedCell was already pre-defined by the time the Grid was made, it will automatically show the image when you creating rows on the client side.

But TemplatedCell can't handle a post-defined image (The Grid already made, then creating rows with inputing an image inside the TemplatedCell). The TemplatedCell ability is to add ASP.NET server controls to the WebGridCell using the new Template Column Type. When using the Template column Type, you can put any server side controls inside the CellTemplate property of the WebGridColumn.

If you really want this features. You can go to our TDN http://dev2.intersoftpt.com/. Under Create New Item dockitems, choose Feature Request. You can input any features you need on the next development.

Thank you and have a nice day.

Best regards,

Niven Prasetya.

WebGrid's NewRow not displaying CellTemplate

SAgosto — Tue, 14 Sep 2010 10:36:41 GMT

Also, is there a timeline for this bug to be fixed? The CellTemplate elements should be displayed when creating rows on the client-side.

WebGrid's NewRow not displaying CellTemplate

SAgosto — Tue, 14 Sep 2010 10:35:15 GMT

Hi Shawn,
Did you use BatchUpdate? As far as I know, AddPendingChanges is used for BatchUpdate scenario as a trigger when you done with any updates (Add, Update,Delete, etc).
If you want to add new row, you can use the code I have given to you.
On my sample, I'm not using auto increment for PK. If you want to use an auto increment you can refer to our sample, BatchUpdate_Enterprise. On BatchUpdate_Enterprise sample, there is a SelectIdentityQuery handler (App_Code/dsNorthwind_Extended.cs) which will check what is the latest number and after will be automatically increment.
Have a nice day.

Best regards,
Niven Prasetya.

I need to call the row's AddPendingChanges() method to add/update rows using JavaScript in a WebGrid with BatchUpdate turned on. Oddly, I don't need to do call this method when deleting rows as it still ends up in the WebGridRowChanges collection? Also, in my other thread (http://www.intersoftpt.com/Community/WebGrid/How-to-delete-rows-using-BatchUpdate-scenario/), I don't get the new Delete icon after the row's Delete() method is called so I am not sure why the icon doesn't change and why I don't need to call the AddPendingChanges() like adding/updating rows.

When creating a new row, is it necessary to call the row's Update() method after the field's are defaulted? I don't seem to need to do that for creating new rows but for updating rows.

WebGrid's NewRow not displaying CellTemplate

niven — Mon, 13 Sep 2010 22:53:54 GMT

Hi Shawn,

Did you use BatchUpdate? As far as I know, AddPendingChanges is used for BatchUpdate scenario as a trigger when you done with any updates (Add, Update,Delete, etc).

If you want to add new row, you can use the code I have given to you.

On my sample, I'm not using auto increment for PK. If you want to use an auto increment you can refer to our sample, BatchUpdate_Enterprise. On BatchUpdate_Enterprise sample, there is a SelectIdentityQuery handler (App_Code/dsNorthwind_Extended.cs) which will check what is the latest number and after will be automatically increment.

Have a nice day.

Best regards,

Niven Prasetya.

WebGrid's NewRow not displaying CellTemplate

SAgosto — Wed, 18 Aug 2010 13:05:32 GMT

I have a button that simply adds a new row to a WebGrid and defaults some data. However, I noticed that a CellTemplate column that has an Image isn't being displayed. This renders as expected for every row that is bound to the grid just not any new row added via Client Side. I tried with a Button too and that also didn't render.

I also tried using the Grid's InitializeLayout to set this column programatically using a custom class and the ITemplate interface (InstantiateIn method) but it had the same problem.

        <ISWebGrid:WebGridColumn Caption=" "                        Name="AddPortfolio"         DataMember=""                                            HiddenDataMember="ScenarioPortfolioID" 
                                 DataType="System.String"           ColumnType="Template"       EditType="NoEdit"        NewRowEditType="SameAsEditType" FilterEditType="NoEdit"        Width="65px" 
                                 ButtonText="Add Portfolio">
            <ButtonStyle BackColor="AliceBlue">
                <Padding Top="2px" Left="1px" Right="1px" Bottom="1px" />
            </ButtonStyle>
            <CellTemplate>
                <img runat="server" id="imgPortfolio" src="~/Images/Buttons/process_off.gif" alt="Manage this treaty's portfolios"
                     border="0" style="padding-top: 1px;" 
                     onclick="javascript:UpdatePortfolioList();" onmouseout="javascript:MM_swapImgRestore()" onmouseover="javascript:MM_swapImage(this.id, '', '../Images/Buttons/process_on.gif',1)" />
            </CellTemplate>
        </ISWebGrid:WebGridColumn>