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

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

Sorry for the delay. I was away on vacation.

Can you show me your example. I am simple trigger off a button click and using the RootTable's NewRow() method and then setting some default data and then the Row's AddPendingChanges method to display it.

Hello Shawn,

I apologize for the previous post. It seems that a templatedcell can't handle an "Add" method.

I've misread your issue, which I was doing a different kind of issue.

If you like, you can add this into future request via TDN.

Once again, I apologize for the inconvenience.

Best regards,

Niven Prasetya

Hello Shawn,

I apologize for the previous post. It seems that a templatedcell can't handle an "Add" method.

I've misread your issue, which I was doing a different kind of issue.

If you like, you can add this into future request via TDN.

Once again, I apologize for the inconvenience.

Best regards,

Niven Prasetya

I don't understand what you mean by an "Add" method. I don't see one in the object model.

Basically, I am just trying to create new rows within a WebGrid using JavaScript. I should be able to default data and have it appear the same way as if it was binding on the server-side. Is that possible? If not, what is the work around?

Thank you.

Hi Shawn,

I have attach a simple sample of creating a new rows using Javascript. Kindly advise me, is this the scenario you have been dealt with? If not

I have attach a video of my sample output.

Thank you and have a nice day.

Best regards,

Niven Prasetya

Hi Shawn,

I have attach a simple sample of creating a new rows using Javascript. Kindly advise me, is this the scenario you have been dealt with? If not

I have attach a video of my sample output.

Thank you and have a nice day.

Best regards,

Niven Prasetya

What's the difference between the AddPendingChanges method that I am using to add the row vs the Update that you are using?

I have the same problem.  Is the CategoryID field your PK? You are setting that in code when each new row is added. For me, the database will assign that record at the time the data is committed to the database. It seems that field needs to have a unique value. I do not want to set that field because it would indicate the record exists within the database when it does not yet.

Hi Shawn,

I have attach a simple sample of creating a new rows using Javascript. Kindly advise me, is this the scenario you have been dealt with? If not

I have attach a video of my sample output.

Thank you and have a nice day.

Best regards,

Niven Prasetya

 

What's the difference between the AddPendingChanges method that I am using to add the row vs the Update that you are using?

 

I have the same problem.  Is the CategoryID field your PK? You are setting that in code when each new row is added. For me, the database will assign that record at the time the data is committed to the database. It seems that field needs to have a unique value. I do not want to set that field because it would indicate the record exists within the database when it does not yet.

TTT

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.

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.

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

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.

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?

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 

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>

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

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.

 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