Oct 02, 2013, 7:08 AM
Componentcolumn with combobox
Hello,
When i use a combobox with a store in a Gridpanel/Componentcolumn, it initially does not render the text/value in the combobox.
When i don't use ForceSelection="true" it renders correctly but then it does not return the correct value from the combobox when entering keyboard-data in the combobox.
When using listitems instead of a store it works but this can't be the solution (i hope ;-))
Please advice.
Kind regards,
Jo
When i use a combobox with a store in a Gridpanel/Componentcolumn, it initially does not render the text/value in the combobox.
When i don't use ForceSelection="true" it renders correctly but then it does not return the correct value from the combobox when entering keyboard-data in the combobox.
When using listitems instead of a store it works but this can't be the solution (i hope ;-))
Please advice.
Kind regards,
Jo
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestCombo.aspx.cs" Inherits="WebApplication6.TestCombo" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:XScript ID="XScript1" runat="server">
<script>
var ComboRenderer = function (value) {
var x = "";
#{ComboStore}.each(function (r)
{
if (r.data.ComboValue == value)
{
x = r.data.ComboText;
}
})
return x;
};
</script>
</ext:XScript>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>ComponentColumn Editor - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>ComponentColumn as Editor</h1>
<ext:GridPanel ID="GridPanel1"
runat="server"
Title="ComponentColumn Editor"
Width="600"
Height="300">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="IntField" Type="Int" />
<ext:ModelField Name="ComboField" Type="Int" />
<ext:ModelField Name="TextField" Type="String" />
<ext:ModelField Name="DateField" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:ComponentColumn ID="ComponentColumn2"
runat="server"
Editor="true"
DataIndex="ComboField"
Flex="1"
Text="ComboBox Store">
<Component>
<ext:ComboBox ID="ComboBox1" runat="server" ValueField="ComboValue" DisplayField="ComboText"
AllowBlank="false" ForceSelection="true" TypeAhead="true" QueryMode="Local" >
<Store>
<ext:Store ID="ComboStore" runat="server" AutoDataBind="true">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="ComboValue" Type="Int"/>
<ext:ModelField Name="ComboText" Type="String"/>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="ComponentColumn1"
runat="server"
Editor="true"
DataIndex="ComboField"
Flex="1"
Text="ComboBox Listitem">
<Component>
<ext:ComboBox ID="ComboBox2" TypeAhead="true" ForceSelection="true" runat="server">
<Items>
<ext:ListItem Text="AAAA" Value="1" Mode="Raw" />
<ext:ListItem Text="AAAB" Value="2" Mode="Raw" />
<ext:ListItem Text="AABB" Value="3" Mode="Raw" />
<ext:ListItem Text="ABBB" Value="4" Mode="Raw" />
<ext:ListItem Text="BBBB" Value="5" Mode="Raw" />
<ext:ListItem Text="AAAC" Value="6" Mode="Raw" />
</Items>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
<ext:Button ID="ButtonSave" runat="server" Text="Save" Icon="Disk">
<DirectEvents>
<Click OnEvent="ButtonSave_Click">
<ExtraParams>
<ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly : false}))" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:TextArea runat="server" ID="TADetail" Height="75" Width="1000"></ext:TextArea>
<ext:ComboBox ID="ComboBox3" runat="server" ValueField="ComboValue" DisplayField="ComboText" AllowBlank="false" ForceSelection="true" TypeAhead="true" QueryMode="Local">
<Store>
<ext:Store ID="Store2" runat="server" AutoDataBind="true">
<Model>
<ext:Model ID="Model3" runat="server">
<Fields>
<ext:ModelField Name="ComboValue" Type="Int" />
<ext:ModelField Name="ComboText" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
<ext:TextArea runat="server" ID="TADetail2" Height="75" Width="1000"></ext:TextArea>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
namespace WebApplication6
{
public partial class TestCombo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
List<DTOCombo> dtoComboList = new List<DTOCombo>();
dtoComboList.Add(new DTOCombo(1, "AAAA"));
dtoComboList.Add(new DTOCombo(2, "AAAB"));
dtoComboList.Add(new DTOCombo(3, "AABB"));
dtoComboList.Add(new DTOCombo(4, "ABBB"));
dtoComboList.Add(new DTOCombo(5, "BBBB"));
dtoComboList.Add(new DTOCombo(6, "AAAC"));
this.ComboStore.DataSource = dtoComboList;
this.ComboStore.DataBind();
this.Store2.DataSource = dtoComboList;
this.Store2.DataBind();
this.Store1.DataSource = new object[]
{
new object[] { 1, 1, "Text 1", DateTime.Now.Date },
new object[] { 2, 2, "Text 2", DateTime.Now.Date },
new object[] { 3, 3, "Text 3", DateTime.Now.Date },
new object[] { 4, 4, "Text 4", DateTime.Now.Date },
new object[] { 5, 5, "Text 5", DateTime.Now.Date },
new object[] { 6, 6, "Text 6", DateTime.Now.Date },
new object[] { 7, 2, "Text 7", DateTime.Now.Date },
new object[] { 8, 2, "Text 8", DateTime.Now.Date },
new object[] { 9, 2, "Text 9", DateTime.Now.Date }
};
}
}
[DirectMethod]
protected void ButtonSave_Click(object sender, DirectEventArgs e)
{
try
{
string json = e.ExtraParams["Values"];
TADetail.Text = json;
TADetail2.Text = ComboBox3.SelectedItem.Value;
}
catch (Exception ex)
{
throw ex;
}
}
}
public class DTOCombo
{
public string ComboValue { get; set; }
public string ComboText { get; set; }
public DTOCombo()
{ }
public DTOCombo(int Value, string Text)
{
ComboValue = Value.ToString();
ComboText = Text;
}
}
}