Feb 09, 2016, 12:31 PM
Combobox with indention - select value initially
Hi,
I'm struggling around with a combobx that shall be used to show up indented items with comments and be able to initially select a value on page load.
I managed to show indention by adopting the following sample:
Custom drop down list
I also can select a value during a button click. I also can handle the selected value in code behind. But I don't get managed to select a value initially during page load - see lines 39-42 of code-behind.
Markup:
I'm struggling around with a combobx that shall be used to show up indented items with comments and be able to initially select a value on page load.
I managed to show indention by adopting the following sample:
Custom drop down list
I also can select a value during a button click. I also can handle the selected value in code behind. But I don't get managed to select a value initially during page load - see lines 39-42 of code-behind.
Markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestCustomDropDownList.aspx.cs" Inherits="skai_maschinendatenbank_webapp.Pages.TestCustomDropDownList" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Comboboxes - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>
.myindent1 { padding:3px 10px 3px 10px; }
.myindent2 { padding:3px 10px 3px 20px; }
.myindent3 { padding:3px 10px 3px 30px; }
.list-item {
font:normal 11px tahoma, arial, helvetica, sans-serif;
border:0px solid #fff;
border-bottom:1px solid #eeeeee;
white-space:normal;
color:#555;
}
.list-item h3 {
display:block;
font:inherit;
font-weight:bold;
margin:0px;
color:#222;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:ComboBox
runat="server"
ID="mycombobox"
Width="250"
Editable="false"
DisplayField="Name"
ValueField="ID"
QueryMode="Local"
ForceSelection="true"
TriggerAction="All"
EmptyText="Select department">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Abbrev" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Indent" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ListConfig>
<ItemTpl runat="server">
<Html>
<div class="list-item myindent{Indent}">
<h3>{Name}</h3>
{Abbrev:ellipsis(15)}
</div>
</Html>
</ItemTpl>
</ListConfig>
</ext:ComboBox>
<ext:Button runat="server" ID="btnSelect" Text="Select UI-Dev" OnDirectClick="btnSelect_DirectClick" />
<ext:Button runat="server" ID="btnShowSelect" Text="Show Selection" OnDirectClick="btnShowSelect_DirectClick" />
<ext:Label runat="server" ID="lblShowSelection" Text="{ show selection }" />
</form>
</body>
</html>using System;
using Ext.Net;
namespace skai_maschinendatenbank_webapp.Pages
{
public class UIDepartment
{
public long ID { get; set; }
public string Name { get; set; }
public string Abbrev { get; set; }
public int Indent { get; set; }
public UIDepartment(long id, string name, string abbrev, int indent)
{
this.ID = id;
this.Name = name;
this.Abbrev = abbrev;
this.Indent = indent;
}
}
// Source: https://examples2.ext.net/#/Form/ComboBox/Custom_Drop_Down_List/
public partial class TestCustomDropDownList : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new UIDepartment[4]
{
new UIDepartment(1L, "Head department", "IMPORTANT", 0),
new UIDepartment(2L, "Dev", "D", 1),
new UIDepartment(3L, "UI-Dev", "UI", 2),
new UIDepartment(4L, "Sales", "Sa", 1),
};
this.Store1.DataBind();
/* NOT WORKING: select initially on page-load: */
// this.mycombobox.Select(1); // 2nd item by index
// this.mycombobox.Select(2L); // 2nd item by value
// this.mycombobox.Value = 2L; // 2nd item by property-value
}
this.mycombobox.DirectEvents.Select.Event += Select_Event;
}
void Select_Event(object sender, DirectEventArgs e)
{
string selectedIDStr = this.mycombobox.SelectedItem.Value;
this.lblShowSelection.Text = DateTime.Now.ToLongTimeString() + " Select_Event -> " + selectedIDStr;
}
protected void btnSelect_DirectClick(object sender, Ext.Net.DirectEventArgs e)
{
long valueToSelect = 4L;
this.mycombobox.Select(valueToSelect);
this.lblShowSelection.Text = DateTime.Now.ToLongTimeString() + " btnSelect_DirectClick -> " + valueToSelect;
}
protected void btnShowSelect_DirectClick(object sender, Ext.Net.DirectEventArgs e)
{
string selectedIDStr = this.mycombobox.SelectedItem.Value;
this.lblShowSelection.Text = DateTime.Now.ToLongTimeString() + " btnShowSelect_DirectClick -> " + selectedIDStr;
}
}
}
