[CLOSED] ext:ComboBox: IconCombo. Select a item in codebehind

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] ext:ComboBox: IconCombo. Select a item in codebehind

    Hi,

    I follow this example...

    https://examples2.ext.net/#/Form/ComboBox/IconCombo/

    and works fine... but I need select a item in the iconcombo in codebehind... How I do it?

    I'm creating the datasource with a code in array. I wish select the item on list of combo with this code:

        Protected Function storeStatus_GetData() As Object()
            Dim vRet As Object() = { _
                New Object() {0, "tarefas-status-criado-icon", "Criada"}, _
                New Object() {1, "tarefas-status-completa-icon", "Completa"}, _
                New Object() {2, "tarefas-status-cancelado-icon", "Cancelada"}, _
                New Object() {3, "tarefas-status-em-andamento-icon", "Em andamento"}, _
                New Object() {5, "tarefas-status-conferida-icon", "Conferida"} _
               }
    
            Return vRet
    
        End Function
    Last edited by Daniil; Apr 10, 2012 at 3:08 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Quote Originally Posted by supera View Post
    but I need select a item in the iconcombo in codebehind... How I do it?
    Please populate the ComboBox SelectedItems collection.

    During DirectEvent you will also need to call its UpdateSelectedItems method.
  3. #3
    Hi Daniil!

    I am sorry, but I don't understand when I do this.

    SelectItems collection accepts only Ext.net.ListItem objects... and I have only the ID as a integer value.

    I create a sample... When click in the button, I need select the respective item in combobox.

    <%@ Page Language="vb" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <script runat="server">
        Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
            Dim store As Ext.Net.Store = Me.ComboBox1.GetStore()
            
            store.DataSource = New Object() { _
                New Object() {0, ResourceManager.GetIconClassName(Icon.FlagFr), "France"}, _
                New Object() {1, ResourceManager.GetIconClassName(Icon.FlagCa), "Canada"}, _
                New Object() {2, ResourceManager.GetIconClassName(Icon.FlagDe), "Germany"}, _
                New Object() {3, ResourceManager.GetIconClassName(Icon.FlagUs), "United States"}, _
                New Object() {4, ResourceManager.GetIconClassName(Icon.FlagIt), "Italy"} _
            }
            
            store.DataBind()
    
            Me.ResourceManager1.RegisterIcon(Icon.FlagFr)
            Me.ResourceManager1.RegisterIcon(Icon.FlagCa)
            Me.ResourceManager1.RegisterIcon(Icon.FlagDe)
            Me.ResourceManager1.RegisterIcon(Icon.FlagUs)
            Me.ResourceManager1.RegisterIcon(Icon.FlagIt)
            
        End Sub
        
        Protected Sub selectItem(sender As Object, evt As Ext.Net.DirectEventArgs)
            ComboBox1.Select(evt.ExtraParams("ID"))
        End Sub
        
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
             .icon-combo-item {
                background-repeat   : no-repeat !important;
                background-position : 3px 50% !important;
                padding-left        : 24px !important;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" Locale="pt-BR" />
        <form id="form1" runat="server">
        <ext:ComboBox 
                ID="ComboBox1" 
                runat="server"
                Width="250"
                Editable="false"
                DisplayField="name"
                ValueField="name"
                QueryMode="Local"
                TriggerAction="All"
                EmptyText="Select a country...">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server" IDProperty="ID">
                                <Fields>
                                    <ext:ModelField Name="ID" />
                                    <ext:ModelField Name="iconCls" />
                                    <ext:ModelField Name="name" />
                                </Fields>
                            </ext:Model>
                        </Model>            
                    </ext:Store>
                </Store>
                <ListConfig>
                    <ItemTpl ID="ItemTpl1" runat="server">
                        <Html>
                            <div class="icon-combo-item {iconCls}">
                                {name}
                            </div>
                        </Html>                    
                    </ItemTpl>
                </ListConfig>
                <Listeners>
                    <Select Handler="this.setIconCls(records[0].get('iconCls'));" />
                </Listeners>  
            </ext:ComboBox> 
            <ext:Button runat="server" ID="btn1" Text="Click to select item 'Germany' in combobox">
                <DirectEvents>
                    <Click OnEvent="selectItem">
                        <ExtraParams>
                            <ext:Parameter Name="ID" Value="2" />
                        </ExtraParams>
                    </Click>
                </DirectEvents>
            </ext:Button>  
            <ext:Button runat="server" ID="Button1" Text="Click to select item 'Italy' in combobox">
                <DirectEvents>
                    <Click OnEvent="selectItem">
                        <ExtraParams>
                            <ext:Parameter Name="ID" Value="4" />
                        </ExtraParams>
                    </Click>
                </DirectEvents>
            </ext:Button>  
        </form>
    </body>
    </html>
  4. #4
    At the first of all you should wrap the Page_Load code in
    If Not ExtNet.IsAjaxRequest Then
        ...
    End If
    to avoid a data to bind on each request.

    And yes, you can use the Select method instead of populating SelectedItems.

    But you should:

    1. Set up
    ValueField="ID"
    for the ComboBox. In this case the ID field will be consider as a ComboBox value.

    2. Use
    ComboBox1.Select(CObj(CInt(evt.ExtraParams("ID"))))
    Converting to integer is required because there are integer values of the ID field.

    Converting to object is required to choose a correct overloaded version of the Select method.
  5. #5
    Hi Daniil! Thanks for your help...

    Works fine... the item is selected in combobox... but text only... the icon not is rendered.

    There are a any way that paint the icon? When I select with the mouse pointer, the incon is rendered... will be interesting get the same effect when the item is selected in codebehind.
  6. #6
    Oops... new information.

    If I don't open the list of combobox, when i click in buttons of the sample, only text appears (icon is not rendered)...
    After I open the list of combobox, the icon is rendered when I click in buttons to select items in codebehind.
  7. #7
    Confirmed. Needs to fire the Select event also, because icon is set up within the Select listener.

    Example
    Dim id As Integer = CInt(evt.ExtraParams("ID"))
    ComboBox1.Select(CObj(id))
    Dim record As ModelProxy = ComboBox1.GetStore().GetById(id)
    ComboBox1.FireEvent("select", Nothing, New Object() {New JRawValue(record.ModelInstance)})
  8. #8
    Hi Daniil!

    If I use the buttons to select the item in combobox, works fine...
    But, if I insert in page_load the code to select item in combobox, a error occurs.

    The error is:
    Runtime Error in Microsoft JScript: Can not get property value 'get': the object is null or not defined
    Click image for larger version. 

Name:	error na selectitem da iconcombobox.jpg 
Views:	63 
Size:	91.0 KB 
ID:	4089

    I made a new sample, without buttons (select in page_load only).
    <%@ Page Language="vb" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
            Dim store As Ext.Net.Store = Me.ComboBox1.GetStore()
            Dim record As Ext.Net.ModelProxy
            
            If Not Ext.Net.ExtNet.IsAjaxRequest Then
                store.DataSource = New Object() { _
                    New Object() {0, ResourceManager.GetIconClassName(Icon.FlagFr), "France"}, _
                    New Object() {1, ResourceManager.GetIconClassName(Icon.FlagCa), "Canada"}, _
                    New Object() {2, ResourceManager.GetIconClassName(Icon.FlagDe), "Germany"}, _
                    New Object() {3, ResourceManager.GetIconClassName(Icon.FlagUs), "United States"}, _
                    New Object() {4, ResourceManager.GetIconClassName(Icon.FlagIt), "Italy"} _
                }
            
                store.DataBind()
    
                Me.ResourceManager1.RegisterIcon(Icon.FlagFr)
                Me.ResourceManager1.RegisterIcon(Icon.FlagCa)
                Me.ResourceManager1.RegisterIcon(Icon.FlagDe)
                Me.ResourceManager1.RegisterIcon(Icon.FlagUs)
                Me.ResourceManager1.RegisterIcon(Icon.FlagIt)
                
                ComboBox1.Select(CObj(CInt(2)))
                record = ComboBox1.GetStore().GetById(CInt(2))
                ComboBox1.FireEvent("select", Nothing, New Object() {New Ext.Net.JRawValue(record.ModelInstance)})
                
            End If
            
        End Sub
           
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
             .icon-combo-item {
                background-repeat   : no-repeat !important;
                background-position : 3px 50% !important;
                padding-left        : 24px !important;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" Locale="pt-BR" />
        <form id="form1" runat="server">
        <ext:ComboBox 
                ID="ComboBox1" 
                runat="server"
                Width="250"
                Editable="false"
                DisplayField="name"
                ValueField="ID"
                QueryMode="Local"
                TriggerAction="All"
                EmptyText="Select a country...">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server" IDProperty="ID">
                                <Fields>
                                    <ext:ModelField Name="ID" />
                                    <ext:ModelField Name="iconCls" />
                                    <ext:ModelField Name="name" />
                                </Fields>
                            </ext:Model>
                        </Model>            
                    </ext:Store>
                </Store>
                <ListConfig>
                    <ItemTpl ID="ItemTpl1" runat="server">
                        <Html>
                            <div class="icon-combo-item {iconCls}">
                                {name}
                            </div>
                        </Html>                    
                    </ItemTpl>
                </ListConfig>
                <Listeners>
                    <Select Handler="this.setIconCls(records[0].get('iconCls'));" />
                </Listeners>  
            </ext:ComboBox> 
        </form>
    </body>
    </html>
  9. #9
    What about just
    ComboBox1.Icon = Icon.FlagDe
    ComboBox1.Select(CObj(CInt(2)))
    in Page_Load?
  10. #10
    Hi Dannil...

    Works... Thanks a lot.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] How to select a ComboBox item by value?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 16, 2012, 4:15 PM
  2. I can not select any item in combobox
    By marco.amusquivar in forum 1.x Help
    Replies: 1
    Last Post: Mar 21, 2012, 8:09 PM
  3. [CLOSED] Combobox, select first item
    By Yevgeniy in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 28, 2011, 12:05 PM
  4. [CLOSED] IconCombo. No Icon showing when selecting in codebehind
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 22, 2011, 8:50 AM
  5. Select a item in a Combobox
    By eliezer in forum 1.x Help
    Replies: 1
    Last Post: Apr 16, 2009, 12:23 PM

Posting Permissions