Intersoft Community - WebGrid Enterprise - How do I Insert a ListItem into a DropDownList?

How do I Insert a ListItem into a DropDownList?

Glayaar — Sun, 14 Feb 2010 22:07:31 GMT

Here is the updated snippet for OPTION element:

function _WebGrid_OnEnterEditMode(controlId, tblName, editObject) {   
    //The workaround provided for the user for this issue
    
    var _WebGrid = ISGetObject(controlId);

    var cellObj = editObject.ToCellObject();

    if (cellObj.Name == "Priority_WebGridColumn") {
        
        var options = editObject.element.getElementsByTagName('option');
        if (options[0].text !=  '--- PLEASE SELECT ---') {
            var newOpt = document.createElement('option');
            newOpt.setAttribute('value', '0');
            newOpt.innerHTML = '--- PLEASE SELECT ---';
            editObject.element.insertBefore(newOpt, options[0]);
        }
    }

    return true;
}

The basic idea of the function is the same, however this snippet will insert a OPTION HTML element instead of OPTGROUP.

Regarding the issue in the other thread, I will reply my response in that thread in order to kept the discussion in this thread on topic.

How do I Insert a ListItem into a DropDownList?

DJBadin — Fri, 12 Feb 2010 01:36:48 GMT

Hi,

The example you gave creates an OPTGROUP element.

It does not add and OPTION to the top of the OPTION List like my Server Side Code does for RefurbPriority_DropDownList.

With your code, I am not able to set the Selected Index using your workaround for IE you gave me in

http://www.intersoftpt.com/Community/WebGrid/DropDownList-Default-Value-Not-Selected-in-Edit-Mode-when-using-IE/

How do I add an OPTION to the top of the OPTION List like my Server Side Code does for RefurbPriority_DropDownList?

Doug

How do I Insert a ListItem into a DropDownList?

Glayaar — Mon, 08 Feb 2010 22:10:24 GMT

You could try inserting the new element during OnEnterEditMode WebGrid client side event handler. Here is the snippet that I used to achieve your desired result:

function _WebGrid_OnEnterEditMode(controlId, tblName, editObject) {
    var _WebGrid = ISGetObject(controlId);

    var cellObj = editObject.ToCellObject();

    if (cellObj.Name == "Priority_WebGridColumn") {

        if (editObject.element.getElementsByTagName('optgroup').length == 0) {
            var newGrp = document.createElement('optgroup');
            newGrp.setAttribute('label', '--- PLEASE SELECT ---');

            var length = editObject.element.length;
            for (var i = 0; i < length; i++) {
                newGrp.appendChild(editObject.element.options[0]);
            }

            editObject.element.appendChild(newGrp);
        }
    }

    return true;
}

How do I Insert a ListItem into a DropDownList?

DJBadin — Mon, 08 Feb 2010 18:06:32 GMT

How do I Insert a ListItem into a DropDownList for a WebGridColum of EditType DropDownList.

With an asp:DropDownList I can use it's OnPreRender Event to Insert "--- PLEASE SELECT ---" at the top of List retrieved from the Database as in the code below. I have not been able to figure out how to get a reference to the generated DropDownList Server Side to do this.

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

<%@ Import Namespace="System.Data" %>


<%@ Register assembly="ISNet.WebUI.WebGrid" namespace="ISNet.WebUI.WebGrid" tagprefix="ISWebGrid" %>

<!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>
    
	<script runat="server">
		
		protected void _WebGrid_InitializeLayout(object sender, LayoutEventArgs e)
		{
			ISNet.WebUI.WebGrid.WebValueList Priority_WebValueList = _WebGrid.GetTableByName("").Columns.GetNamedItem("Priority_WebGridColumn").ValueList;

			SortedList Priority_SortedList = new SortedList();

			Priority_SortedList.Add("ASSESS - 1", "1");
			Priority_SortedList.Add("ASSESS - 2", "2");
			Priority_SortedList.Add("ASSESS - 3", "3");
			Priority_SortedList.Add("DISPOSE", "D");
			Priority_SortedList.Add("UNDECIDED", "");

			Priority_WebValueList.DataSource = Priority_SortedList;
			Priority_WebValueList.DataTextField = "Key";
			Priority_WebValueList.DataValueField = "Value";

			RefurbPriority_DropDownList.DataSource = Priority_SortedList;
			RefurbPriority_DropDownList.DataTextField = "Key";
			RefurbPriority_DropDownList.DataValueField = "Value";

			RefurbPriority_DropDownList.SelectedValue = "";

			RefurbPriority_DropDownList.DataBind();
		}


		protected void Company_DropDownList_PreRender(object sender, EventArgs e)
		{
			DropDownList _DropDownList = (DropDownList) sender;
			_DropDownList.Items.Insert(0, "--- PLEASE SELECT ---");
		}
				
	</script>

</head>

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

	<table>
		<tr>
			<td>PRIORITY</td>
			<td>COMPANY</td>
		</tr>
		<tr>
			<td>
				<ASP:DROPDOWNLIST 
					ID="RefurbPriority_DropDownList" 
					runat="server"
				>
				</ASP:DROPDOWNLIST>
			</td>
			<td>
				<ASP:DROPDOWNLIST 
					ID="Company_DropDownList" 
					runat="server" 
					DataValueField="CustomerID"
					DataTextField="CompanyName"
					DataSourceID="Company_SqlDataSource"
					onPreRender="Company_DropDownList_PreRender"
				>
				</ASP:DROPDOWNLIST>
				
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<ISWebGrid:WebGrid 
					ID="_WebGrid"
					runat="server"
					DataSourceID="Orders_SqlDataSource"
					Height="250px"
					UseDefaultStyle="True"
					DefaultStyleMode="Win7"
					OnInitializeLayout="_WebGrid_InitializeLayout"
				>
					<LayoutSettings
						AllowEdit="Yes"
						AllowSorting="Yes"
						AllowBatchUpdate="true"
					>
						<BatchUpdateSettings
							AllowReviewChanges="true"
							AutomaticObjectUpdate="false"
						/>
					</LayoutSettings>
					<RootTable
						DataKeyField="OrderID"
					>
						<Columns>
							<ISWebGrid:WebGridColumn
								Name="Priority_WebGridColumn"
								Bound="True"
								DataMember="REFURB_PRIORITY"
								EditType="DropdownList"
								Caption="PRIORITY"
								Width="100px"
								NullText=""
								DefaultValue=""
								InputRequired="true"
								InputRequiredErrorText="Priority Needed"
							>
							</ISWebGrid:WebGridColumn>
							<ISWebGrid:WebGridColumn
								Name="Company_WebGridColumn"
								Bound="True"
								EditType="DropdownList"
								Caption="Company"
								Width="100px"
								InputRequired="false"
							>
								<ValueList
									DataSourceID="Company_SqlDataSource"
									DataTextField="CompanyName"
									DataValueField="CustomerID"
								>
								</ValueList>
							</ISWebGrid:WebGridColumn>
							<ISWebGrid:WebGridColumn
								Caption="Order ID"
								EditType="NoEdit"
								DataMember="OrderID"
								Name="OrderID_WebGridColumn"
								Width="100px"
							>
								<CellStyle ForeColor="Black"/>
							</ISWebGrid:WebGridColumn>

						</Columns>
					</RootTable>
				</ISWebGrid:WebGrid>
				</td>
		</tr>
	</table>
	
	<asp:SqlDataSource
		ID="Company_SqlDataSource"
		runat="server"
		ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString2005 %>"
		SelectCommand="SELECT [CustomerID], [CompanyName] FROM [Customers] ORDER BY [CustomerID]"
	></asp:SqlDataSource>

	<asp:SqlDataSource
		ID="Orders_SqlDataSource"
		runat="server"
		ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString2005 %>"
		SelectCommand="SELECT TOP 5 [OrderID], [CustomerID], '' AS REFURB_PRIORITY, '' AS GRAPHICS_NEW FROM [Orders] ORDER BY [OrderID]"
	></asp:SqlDataSource>

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