The following tips were compiled from frequently asked user questions posted in the C1ComboBox forum.
Tip 1: Use Callback Mode to Load C1ComboItem on Demand
C1ComboBox supports callback mode to save internet traffic. To enable callback mode, first set the EnableCallBackMode property to True. Then add an ItemsRequested event handler to add items to C1ComboBox. The following code enables call back mode for C1ComboBox. For example:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
c1ComboBoxtest.EnableCallBackMode = true;
c1ComboBoxtest.ItemsRequested += Requested;
}
}
protected void Requested(object sender, C1ComboBoxItemsRequestedEventArgs args)
{
// get a data table from database
DataTable dt = GetData(args.FilterText);
int itemOffset = args.ClientItemsNumber;
int endOffset = Math.Min(itemOffset + ItemsPerRequest, dt.Rows.Count);
args.EndOfItems = endOffset == dt.Rows.Count;
for (int i = itemOffset; i < endOffset; i++)
{
C1ComboBoxItem item = new C1ComboBoxItem(dt.Rows[i]["Company"].ToString(),
dt.Rows[i]["Company"].ToString());
c1ComboBoxtest.Items.Add(item);
}
int count = dt.Rows.Count;
if (count == 0)
{
args.Message = "No Match Found";
}
else
{
args.Message = String.Format("Items <b>1</b>-<b>{0}</b> out of <b>{1}</b>",
endOffset, dt.Rows.Count);
}
}
private static DataTable GetData(string text)
{
string sql;
if (text.Trim().Length>0)
{
sql = "SELECT * FROM Customers WHERE Company LIKE @text + '%'";
}
else
{
sql = "SELECT * FROM Customers";
}
OleDbDataAdapter adapter = new OleDbDataAdapter(sql,
"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\\C1ListDemo.mdb;Persist Security Info=True");
adapter.SelectCommand.Parameters.AddWithValue("@text", text);
DataTable data = new DataTable();
adapter.Fill(data);
return data;
}
Tip 2: Set ComboBoxItem Image
An image icon can be added to each C1ComboBoxItem. The following sample demonstrates how to add icons to C1ComboBoxItems. For example:
<cc1:C1ComboBox ID="c1ComboBox" runat="server">
<Items>
<cc1:C1ComboBoxItem Value="mastercard"
Text="Mastercard"
ImageUrl="card-types/mastercard.png"
DisabledImageUrl="card-types/mastercard_d.png"
HighLightedImageUrl="card-types/mastercard_h.png"> </cc1:C1ComboBoxItem>
<cc1:C1ComboBoxItem Value="express"
Text="American-express"
ImageUrl="card-types/american-express.png"
DisabledImageUrl="card-types/american-express_d.png"
HighLightedImageUrl="card-types/american-express_h.png"></cc1:C1ComboBoxItem>
<cc1:C1ComboBoxItem Value="electron"
Text="Visa-electron"
ImageUrl="card-types/visa-electron.png"
DisabledImageUrl="card-types/visa-electron_d.png"
HighLightedImageUrl="card-types/visa-electron_h.png"></cc1:C1ComboBoxItem>
<cc1:C1ComboBoxItem Value="visa"
Text="Visa"
ImageUrl="card-types/visa.png"
DisabledImageUrl="card-types/visa_d.png"
HighLightedImageUrl="card-types/visa_h.png"></cc1:C1ComboBoxItem>
</Items>
</cc1:C1ComboBox>
Tip 3: Disable C1ComboBox on the Client Side
C1ComboBox can be enabled or disabled on the client side using JavaScript. For example:
function applayEnabled() {
var combo = $find('<%= c1ComboBoxtest.ClientID%>');
var v = $get('inputEnabled').checked;
combo.set_enabled(v);
}
Tip 4: Use Multiple Selection Mode
C1ComboBox has two selection modes: single and multiple. The mode can be changed by setting the SelectionMode.
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
c1ComboBox.SelectionMode = C1ComboBoxSelectionMode.Multiple;
}
}
Tip 5 Multiple Column Support
C1ComboBox supports multiple-column items. You can easity create a grid-like drop-down list. For example:
<cc1:C1ComboBox DropDownResizable="true" ID="C1ComboBox6" runat="server">
<Columns>
<cc1:C1ComboBoxColumn HeaderText="header1"></cc1:C1ComboBoxColumn>
<cc1:C1ComboBoxColumn HeaderText="header2"></cc1:C1ComboBoxColumn>
<cc1:C1ComboBoxColumn HeaderText="header3"></cc1:C1ComboBoxColumn>
</Columns>
<Items>
<cc1:C1ComboBoxItem Text="item1">
<Cells>
<cc1:C1ComboCell Text="item1"></cc1:C1ComboCell>
<cc1:C1ComboCell Text="test2"></cc1:C1ComboCell>
<cc1:C1ComboCell Text="test3"></cc1:C1ComboCell>
</Cells>
</cc1:C1ComboBoxItem>
<cc1:C1ComboBoxItem Text="item2">
<Cells>
<cc1:C1ComboCell Text="item2"></cc1:C1ComboCell>
<cc1:C1ComboCell Text="test2"></cc1:C1ComboCell>
<cc1:C1ComboCell Text="test3"></cc1:C1ComboCell>
</Cells>
</cc1:C1ComboBoxItem>
<cc1:C1ComboBoxItem Text="item3">
<Cells>
<cc1:C1ComboCell Text="item3"></cc1:C1ComboCell>
<cc1:C1ComboCell Text="test2"></cc1:C1ComboCell>
<cc1:C1ComboCell Text="test3"></cc1:C1ComboCell>
</Cells>
</cc1:C1ComboBoxItem>
</Items>
</cc1:C1ComboBox>
Tip 6 Make Filtering Case-Sensitive
If any text is typed into the textbox of the C1ComboBox control, the C1ComboBoxItems in the drop-down list will be filtered according to the text. The filtering is case-insensitive by default, but you can easily make it case-sensitive by setting the IsCaseSensitive property to True.
|
