New Row Values are left aligned

Glayaar — Thu, 13 May 2010 23:20:21 GMT

Unfortunately, WebGrid will not use the CellStyle text align property for the new row cell style. As a workaround, you will need to use the OnRowSelect client side event handler in order to apply the text align style for the new row. Here is the snippet:

function OrderDetails_WebGrid_OnRowSelect(controlId, tblName, rowIndex, rowEl)
{
	var OrderDetails_WebGrid = ISGetObject(controlId);

	if (rowEl.getAttribute("type") == "NewRow")
	{
	    var rowObj = OrderDetails_WebGrid.GetRowByElement(rowEl);
	    var rightCell = ['Quantity_WebGridColumn', 'UnitPrice_WebGridColumn'];

	    for (var i = 0; i < rightCell.length; i++)
	    {
	        rowObj.GetCell(rightCell[i]).CellElement.style.textAlign = "right";
	    }   

	}

	return true;
}

New Row Values are left aligned

DJBadin — Thu, 13 May 2010 10:51:38 GMT

I have a WebGrid with Server-Side Binding.

I have inserted an example that uses the NorthWind Database. You are going to have to change the Connection String.

When clicking on the new row to activate it, the default values for the Quantity and Price Columns are displayed left aligned. Even editing the Quantity and Price Columns, the values remain left aligned.

For the existing rows, the Quantity and Price Columns are right aligned even during editing.

How can I make the Quantity and Price Columns right aligned in the new row as they are in the existing rows?

Thanks,

Doug

<%@ Page Language="C#" %>

<%@ Register assembly="ISNet.WebUI.WebCombo" namespace="ISNet.WebUI.WebCombo" tagprefix="ISWebCombo" %>
<%@ Register Assembly="ISNet.WebUI.WebGrid" Namespace="ISNet.WebUI.WebGrid" TagPrefix="ISWebGrid" %>
<%@ Register Assembly="ISNet.WebUI.WebInput" Namespace="ISNet.WebUI.WebControls" TagPrefix="ISWebInput" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
</head>

<script language="javascript" type="text/javascript">
</script>

<body>
    <form id="form1" runat="server">

	<asp:TextBox ID="CustomerID_TextBox" runat="server" Visible="false" Text="ALFKI"/>
	<asp:TextBox ID="OrderID_TextBox" runat="server" Visible="false" Text="10643"/>

	<br />

		<ISWebGrid:WebGrid
			ID="OrderDetails_WebGrid"
			runat="server"
			DataSourceID="OrderDetails_SqlDataSource"
			DefaultStyleMode="Win7"
			Height="300px"
			UseDefaultStyle="True"
			Width="620px"
		>
			<LayoutSettings
				AllowAddNew="Yes"
				AllowDelete="Yes"
				AllowEdit="Yes"
				AllowSorting="Yes"
			>
			</LayoutSettings>
			<RootTable
				DataKeyField="OrderID"
			>
				<Columns>
					<ISWebGrid:WebGridColumn
						Name="ProductID_WebGridColumn"
						Bound="True"
						DataMember="ProductID"
						Caption="Product Number"
						Width="130px"
					>
						<ValueList
							DataTextField="ProductID"
							DataValueField="ProductID"
						>
						</ValueList>
						<HeaderStyle
							Font-Bold="true"
							HorizontalAlign="Center"
						/>
					</ISWebGrid:WebGridColumn>
					<ISWebGrid:WebGridColumn
						Name="ProductName_WebGridColumn"
						Bound="False"
						DataMember="ProductName"
						Caption="Product Name"
						Width="300px"
					>
						<HeaderStyle
							Font-Bold="true"
							HorizontalAlign="Center"
						/>
					</ISWebGrid:WebGridColumn>
					<ISWebGrid:WebGridColumn
						Name="Quantity_WebGridColumn"
						Bound="True"
						DataMember="Quantity"
						DataType="System.Decimal"
						CustomEditorName="WebInputNET"
						Caption="Quantity"
						Width="70px"
						DataFormatString="#,###"
						DefaultValue="1"
					>
						<CellStyle
							HorizontalAlign="Right"
						/>
						<HeaderStyle
							Font-Bold="true"
							HorizontalAlign="Right"
						/>
					</ISWebGrid:WebGridColumn>
					<ISWebGrid:WebGridColumn
						Name="UnitPrice_WebGridColumn"
						Bound="True"
						DataMember="UnitPrice"
						DataType="System.Decimal"
						Caption="Price"
						Width="80px"
						DataFormatString="$#,###.00"
						DefaultValue="45"
					>
						<CellStyle
							HorizontalAlign="Right"
						/>
						<HeaderStyle
							Font-Bold="true"
							HorizontalAlign="Right"
						/>
					</ISWebGrid:WebGridColumn>
				</Columns>
			</RootTable>
		</ISWebGrid:WebGrid>

		<asp:SqlDataSource
			ID="OrderDetails_SqlDataSource"
			runat="server"
			ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString2005 %>"
			SelectCommand="
					SELECT
						*
					FROM
						[Order Details]
					WHERE
						[OrderID]	= @OrderID
					ORDER BY
						[OrderID]
					"
		>
			<SelectParameters>
				<asp:ControlParameter
					Name="OrderID"
					ControlID="OrderID_TextBox"
					PropertyName="Text"
					DefaultValue=""
				/>
			</SelectParameters>
		</asp:SqlDataSource>

    </form>
</body>
</html>

Intersoft Community - WebGrid Enterprise - New Row Values are left aligned

New Row Values are left aligned

New Row Values are left aligned