Componentcolumn with combobox

  1. #1

    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


    <%@ 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;
    
            }
    
     
    
        }
    }
  2. #2
    Hello!

    Sorry, I don't quite understand your requirements. You seems to work OK. Can you provide steps with expected/current results?
  3. #3
    Hello Baidaly,

    I want to type in the combobox, not select one from the list.
    It works fine when i use a combobox with Listitems.
    When replacing the Listitems with a store, it does not return the correct value when reading the gridpanel-store.
    I'm not selecting an item from the combobox-list but typing the value in the combobox and then autocomplete.

    For debugging, with the buttonsave_click, i read the gridpanel-store and show that in the TextArea TADetail.

Similar Threads

  1. [CLOSED] GridPanel - ComponentColumn - ComboBox: How to bind data??
    By jamesand in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 20, 2013, 4:28 PM
  2. [CLOSED] Copy CompomentColumn combobox value to Componentcolumn TextBox
    By marco.morreale in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 08, 2013, 3:40 PM
  3. Replies: 0
    Last Post: Feb 22, 2013, 2:24 PM
  4. [CLOSED] Display ComboBox.Text in ComponentColumn
    By CPA1158139 in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 17, 2013, 3:37 PM
  5. [CLOSED] Combobox resize in ComponentColumn Chrome
    By prost in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 28, 2013, 2:58 PM

Tags for this Thread

Posting Permissions