Linked Comboboxes

  1. #1

    Linked Comboboxes

    Hello everyone,

    I got a problem using the setValue property of the combobox component.


    Here is the situation :


    I got two comboboxes on which I implemented the custom search example. The comboboxes represent the same objet.
    eg: Site: {id:1234,text1:toto,text2:tata}
    Each combo has its own store.


    In the first combo, I perform a search on the 'text1' property.
    In the second combo, I perform a search on the 'text2' property.


    When a selection occurs in one or the other combo, I'd like to set the other with the appropriate value.
    Eg:
    - Search on the first combo -> toto.
    - Selection of the record -> first combo id = 1234, second combo text = tata, second combo id = 1234.


    To do that on the select handler of the first combo, i run the following code :


    SetCombo2 = function() {
    	combo2.clearValue();
    	combo2.doQuery(combo1.store.getById(combo1.getValue()).get('text2'),true);
    	combo2.setValue(combo1.store.getById(combo1.getValue()).get('text2'));
    }

    The problem is that the store of the combo2 remains empty (or unchanged) and that the combo2 id = 'tata' instead of '1234'.
    Does the fact that both the combo2 text and the combo2 id are equal to the text2 property is due to the fact that the store remains empty ? Or is there o problem in the setValue property ?


    I hope I made myself clear.


    Sincerely.


    BrunoC


  2. #2

    RE: Linked Comboboxes

    Hi,

    Please ensure that you properly understand how setValue function is working

    setValue( String value ) : void
    Sets the specified value into the field. If the value finds a match, the corresponding record text will be displayed in the field. If the value does not match the data value of an existing item, and the valueNotFoundText config option is defined, it will be displayed as the default field text. Otherwise the field will be blank (although the value will still be set).

    So, if combo's store doesn't contain this value then it can't be setted to the combo.


  3. #3

    RE: Linked Comboboxes

    Hi,


    I update this thread now that I have time.
    I set up a small demo for you to understand what I want to do.


    How to use it :
    - On the page, type 'A' in the left combo and select the second record ('A7334AAB').


    What I'd like to do is to load the store of the second one and set its value with 22028 and to display the 'LFullNameSite' property and not the value.


    I hope you could help me on that and tell me what I do wrong.


    I'm sorry for the code markups but it just don't work. It only takes my first line.


    Here is the code :


    Demo.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="TestCoolite.Demo" %>
    
    
    <%@ Register Assembly="Coolite.Ext.Web" TagPrefix="ext" Namespace="Coolite.Ext.Web"%>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Demo</title>
        <style>
        /* Recherche */
        .search-item {
            font:normal 11px tahoma, arial, helvetica, sans-serif;
            padding:3px 10px 3px 10px;
            border:1px solid #fff;
            border-bottom:1px solid #eeeeee;
            white-space:normal;
            color:#555;
        }
        .search-item h3 {
            display:block;
            font:inherit;
            font-weight:bold;
            color:#222;
        }
    
    
        .search-item h3 span {
            float: right;
            font-weight:normal;
            margin:0 0 5px 5px;
            width:100px;
            display:block;
            clear:none;
        }
    
    
        /* Formulaire */
        .lblIntitule {
    	    font-weight:bolder;
    	    font-size:small;
    	    font-family:Tahoma;
    	    padding-right:20px;
        }
        </style>
        <script type="text/javascript">
        SiteBarreSelected = function() {
            //Clear the value first
            ddlFullNameSite.clearValue();
            //Load the store
    		ddlFullNameSite.doQuery(ddlSiteBarre.store.getById(ddlSiteBarre.getValue()).get('LFullNameSite'),true);
    		//Set the value
    		ddlFullNameSite.setValue(ddlSiteBarre.getValue());
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="manScript" runat="server" />
    
    
        <ext:Store runat="server" ID="stoSitesBarre" IgnoreExtraFields="true" AutoLoad="false">
            <Proxy>
                <ext:HttpProxy Method="GET" Url="RechercheSitesBarre.ashx" />
            </Proxy>
            
            <Reader>
                <ext:JsonReader Root="Sites" TotalProperty="totalCount" ReaderID="CSite">
                    <Fields>
                        <ext:RecordField Name="CSite" Type="String" />
                        <ext:RecordField Name="NSite" Type="String" />
                        <ext:RecordField Name="LFullNameSite" Type="String" />
                        <ext:RecordField Name="CSiteBarre" Type="String" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:Store runat="server" ID="stoSites" IgnoreExtraFields="true" AutoLoad="false">
            <Proxy>
                <ext:HttpProxy Method="GET" Url="RechercheSites.ashx"/>
            </Proxy>
            <Reader>
                <ext:JsonReader Root="Sites" TotalProperty="totalCount" ReaderID="CSite" >
                    <Fields>
                        <ext:RecordField Name="CSite" Type="String" />
                        <ext:RecordField Name="NSite" Type="String" />
                        <ext:RecordField Name="LFullNameSite" Type="String" />
                        <ext:RecordField Name="CSiteBarre" Type="String" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
    
    
        <ext:Panel ID="pnlTest" runat="server" >
            <Body>
                <ext:FieldSet ID="pnlInfos" Title="Infos" runat="server">
                    <Body>
                        <ext:TableLayout ID="laySites" runat="server" Columns="3">
                            <ext:Cell>
                                <ext:Label ID="lblIntituleSite" Text="Site :" runat="server" Cls="lblIntitule"/>
                            </ext:Cell>
                            <ext:Cell>
                                <ext:ComboBox runat="server" ID="ddlSiteBarre"
                                    Width="200"
                                    StoreID="stoSitesBarre"
                                    DisplayField="CSiteBarre" 
                                    ValueField="CSite"
                                    TypeAhead="false"
                                    LoadingText="Recherche en cours..." 
                                    PageSize="10"
                                    HideTrigger="true"
                                    ItemSelector="div.search-item"
                                    EmptyText="CodeBarre"        
                                    MinChars="1">
                                   <Template ID="tplSitesBarre" runat="server">
                                       <tpl for=".">
                                          <div class="search-item">
                                             <h3>{CSiteBarre}</h3>
                                             {NSite}
                                          
    
                                       </tpl>
                                   </Template>
                                    <Listeners>
                                        <Select Handler="SiteBarreSelected();" />
                                    </Listeners>
                                </ext:ComboBox>
                            </ext:Cell>
                            <ext:Cell>
                                <ext:ComboBox runat="server" ID="ddlFullNameSite"
                                    HideTrigger="true"
                                    Width="450"
                                    AllowBlank="false"
                                    BlankText="Champ obligatoire"
                                    StoreID="stoSites"
                                    DisplayField="LFullNameSite" 
                                    ValueField="CSite"
                                    TypeAhead="false"
                                    LoadingText="Recherche en cours..." 
                                    PageSize="10"
                                    ItemSelector="div.search-item"        
                                    MinChars="1"
                                    EmptyText="Nom du site"
                                    FieldLabel="Site">
                                    <Template ID="tplSites" runat="server">
                                       <tpl for=".">
                                          <div class="search-item">
                                             <h3>{CSiteBarre}{NSite}</h3>
                                             {LFullNameSite}
                                          
    
                                       </tpl>
                                    </Template>
                                </ext:ComboBox>
                            </ext:Cell>
                        </ext:TableLayout>
                    </Body>
                </ext:FieldSet>
            </Body>
        </ext:Panel> 
        </form>
    </body>
    </html>

    Demo.aspx.cs is empty.


    RechercheSites.ashx.cs
    using System;
    using System.Data;
    using System.Web;
    using System.Collections;
    using System.Web.Services;
    using System.Web.Services.Protocols;
    
    
    namespace TestCoolite
    {
        /// <summary>
        /// Description résumée de $codebehindclassname$
        /// </summary>
        [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        public class RechercheSites : IHttpHandler
        {
    
    
            public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/json";
                context.Response.Write("{totalCount:1,'Sites':[{CSite:\"22028\",CSiteBarre:\"A7334AAB\",NSite:\"BCNINFsSTQUENTIN/ALT-FO - STRUCTIS\",LFullNameSite:\"Sites Clients\\STRUCTIS\\BCNINFsSTQUENTIN/ALT-FO - STRUCTIS\"}]}");
            }
    
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }

    RechercheSitesBarre.aspx.cs :
    using System;
    using System.Data;
    using System.Web;
    using System.Collections;
    using System.Web.Services;
    using System.Web.Services.Protocols;
    
    
    namespace TestCoolite
    {
        /// <summary>
        /// Description résumée de $codebehindclassname$
        /// </summary>
        [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        public class RechercheSitesBarre : IHttpHandler
        {
    
    
            public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/json";
                context.Response.Write("{totalCount:2,'Sites':[{CSite:\"36456\",CSiteBarre:\"A7334AAA\",NSite:\"BBAOPBcBOBIGNY/DELAUNE2 - STRUCTIS\",LFullNameSite:\"Sites Clients\\STRUCTIS\\BBAOPBcBOBIGNY/DELAUNE2 - STRUCTIS\"},{CSite:\"22028\",CSiteBarre:\"A7334AAB\",NSite:\"BCNINFsSTQUENTIN/ALT-FO - STRUCTIS\",LFullNameSite:\"Sites Clients\\STRUCTIS\\BCNINFsSTQUENTIN/ALT-FO - STRUCTIS\"}]}");
            }
    
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }

    Thank you very much for your help.
  4. #4

    RE: Linked Comboboxes

    Hi,

    I found a solution.


    After the doQuery statement, I call an AjaxMethod that performs the databinds on the store and in the success event, I set the value afterwards.



    ddlFullNameSite.doQuery(ddlSiteBarre.store.getById(ddlSiteBarre.getValue()).get('LFullNameSite'),true);
    <div executable="true" class="sourceRow">Coolite.AjaxMethods.ChargeSites({success: function() {
    <div breakpoint="true" executable="true" class="sourceRow">ddlFullNameSite.setValue(ddlSiteBarre.getValue());
    <div class="sourceRow">}
    <div class="sourceRow">});

    Is that the right way to do it ?


    Regards.


    Bruno.
  5. #5

    RE: Linked Comboboxes

    Hi again,

    I found something better : instead of calling the doquery and then the ajax method, I just call the following code.


    //Reload the store
                ddlFullNameSite.store.load({
                    params:{
                        query:ddlSiteBarre.store.getById(ddlSiteBarre.getValue()).get('LFullNameSite')
                    },
                    callback:function() {
                        ddlFullNameSite.setValue(ddlSiteBarre.getValue());
                    }
                });

    Best regards.


    Bruno.

Similar Threads

  1. [CLOSED] Linked Comboboxes
    By romeu in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 11, 2012, 4:42 PM
  2. Problem with Linked ComboBoxes
    By csn in forum 1.x Help
    Replies: 3
    Last Post: Sep 24, 2010, 4:56 PM
  3. Linked comboboxes in a from
    By Peter P in forum 1.x Help
    Replies: 2
    Last Post: Apr 26, 2010, 1:47 PM
  4. Linked ComboBoxes
    By speddi in forum 1.x Help
    Replies: 2
    Last Post: Apr 10, 2010, 3:21 PM
  5. Linked comboboxes
    By hbbazan in forum 1.x Help
    Replies: 2
    Last Post: Jan 11, 2010, 6:53 AM

Posting Permissions