[CLOSED] Custom ComboBox in GridPanel Set Displayed Text

  1. #1

    [CLOSED] Custom ComboBox in GridPanel Set Displayed Text



    Hi,

    Is it possible to set the displayed text in a searchable combobox without affecting the ID value?

    I have a custom (searchable) ComboBox in a GridPanel where the store does not load until the a search is performed. I can't change the AutoLoad setting as over 10,000 records are initially returned. The problem is that until an item is selected from the combobox the ValueField is displayed when a GridPanel row is selected rather than the DisplayField.

    I have included a picture below to show what I mean.

    The code to implement is also included below.
    Thanks

    The .aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CooliteTest.aspx.cs" Inherits="CooliteTest" %>
    <%@ 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">
    
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Buffer Grid Example - Ext.Net Examples</title>
    <style type="text/css">
            .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;
            } 
            
            p { width: 650px; }
            
            .ext-ie .x-form-text { position: static !important; }
              .noteCls
              {
                background-color:Gray;
                font: normal 11px tahoma, arial, helvetica, sans-serif;
                color:white !important;
            }
        </style>
        
     
     <script type="text/javascript">
     function danTest(a, b, c, d, e)
     {
         //alert("");
         //a.grid.colModel.columns[3].editor.startValue = "BLAH";
         danTest2.defer(1);
     }
     
     function danTest2()
     {
         //grdData.colModel.columns[3].editor.setRawValue("Equipment 4");
     }
     
        function test(combo, record, index)
        {
            TextField1.setValue("sfsdfs");
       // #{TextField1}.setValue(this.getValue());
        }
        function bulkUpdateValidateEdit(e)
        {
            if (e.value != "")
            {
                e.record.set("EquipmentID", Store2.getById(e.value).data.DataID);
                e.record.set("EquipmentName", Store2.getById(e.value).data.DataName);            
            }
        }
        
        function test2(comp, test)
        {
            var zpTest = "asdas";
        }
    
    
        function EquipmentNameRender(lValue, opControl, opRecord)
        {
            if (lValue)
            {
                return opRecord.data.EquipmentName
            }
            return "";
        }
    
    
        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Store runat="server" ID="Store1">
                <Proxy>
                    <ext:HttpProxy Url="handler.ashx" />
                </Proxy>
                <Reader>
                    <ext:JsonReader Root="Equipment" TotalProperty="totalCount" IDProperty="RecordID">
                        <Fields>
                            <ext:RecordField Name="RecordID" />
                            <ext:RecordField Name="RecordName" />
                            <ext:RecordField Name="EquipmentID" />
                            <ext:RecordField Name="EquipmentName" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:Store runat="server" ID="Store2" AutoLoad="false">
                <Proxy>
                    <ext:HttpProxy Url="CooliteHandler.ashx" />
                </Proxy>
                <Reader>
                    <ext:JsonReader Root="Data" TotalProperty="totalCount" IDProperty="DataID"> 
                        <Fields>
                            <ext:RecordField Name="DataID" />
                            <ext:RecordField Name="DataName" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>        
            
    <div style="width:600px;height:800px;">
                
                <ext:TextField ID="TextField1" runat="server">                       
                    <ToolTips>                
                        <ext:ToolTip ID="ToolTip1" runat="server" Title="Title" Html="Content" AutoShow="true" />            
                    </ToolTips>        
                </ext:TextField>
                
                <ext:Panel ID="pnlData" runat="server" Title="Data" Height="400px">
                    <Content>
                        <ext:FitLayout ID="FitLayout3" runat="server">
                            <Items>
                                <ext:GridPanel 
                                    ID="grdData" 
                                    StripeRows="true"
                                    runat="server" 
                                    StoreID="Store1" 
                                    EnableDragDrop="false"
                                    TrackMouseOver="false"
                                    ClicksToEdit="1">
                                    <ColumnModel>
                                        <Columns>
                                            <ext:Column DataIndex="RecordID" Header="ID"></ext:Column>
                                            <ext:Column DataIndex="RecordName" Header="Name Tooltip">
                                                <Editor>
                                                    <ext:TextField runat="server" ID="txtRecordName" TabTip="popopopop">
                                                        <Listeners>
                                                            <Render Handler="Ext.QuickTips.register(Ext.apply({target: this.el.id}, {title:'Format', text:'xx-xx-xxxxxxx'}));"/>
                                                        </Listeners>
                                                    </ext:TextField>
                                                </Editor>
                                            </ext:Column>
                                            <ext:Column DataIndex="RecordName" Header="Name Notes">
                                                <Editor>
                                                    <ext:TextField runat="server" ID="TextField2" Note="NSN requires format: xx-xxx-xxxxxxx" NoteCls="noteCls">
                                                    </ext:TextField>
                                                </Editor>
                                            </ext:Column>                                        
                                            <ext:Column DataIndex="EquipmentID" Header="Name Combo" Width="200">
                                                <Renderer Fn="EquipmentNameRender" />
                                                <Editor>
                                                   <ext:ComboBox 
                                                        ID="ComboBox1"
                                                        runat="server" 
                                                        StoreID="Store2"
                                                        DisplayField="DataName" 
                                                        ValueField="DataID"
                                                        TypeAhead="false"
                                                        LoadingText="Searching..." 
                                                        Width="570" Mode="Remote" TriggerAction="All"
                                                        HideTrigger="true"
                                                        ItemSelector="div.search-item"        
                                                        MinChars="2">
                                                        <Template ID="Template1" runat="server">
                                                           <tpl for=".">
                                                              <div class="search-item">
                                                                 {DataName}
                                                              
    
                                                           </tpl>
                                                        </Template>
                                                        <Listeners>
                                                            <Select Fn="test" />
                                                            <AfterRender Fn="test2" />
                                                        </Listeners>
                                                    </ext:ComboBox>                                             
                                                </Editor>
                                            </ext:Column>
                                        </Columns>
                                    </ColumnModel>
                                    <Listeners>
                                        <ValidateEdit Fn="bulkUpdateValidateEdit" />
                                        <BeforeEdit Fn="danTest" />
                                    </Listeners>
                                </ext:GridPanel> 
                            </Items>
                        </ext:FitLayout>
                    </Content>
                </ext:Panel>
            
          
        </form>
    </body>
    </html>
    Handler for the gridpanel store
    <%@ WebHandler Language="C#" Class="Handler" %>
    
    
    using System;
    using System.Web;
    using System.Collections.Generic;
    using Ext.Net;
    using BMTWeb;
    using hazmat;
    using System.Data;
    using System.Web.SessionState;        //Reference IReadOnlySessionState for read-only access to session or IRequiresSessionState for read/write access
    
    
    public class Handler : IHttpHandler, IReadOnlySessionState {
        
        public void ProcessRequest (HttpContext context) 
        {
            context.Response.ContentType = "text/json";
            IList<Dictionary<string, string>> result = new List<Dictionary<string, string>>();
            hazmat.User opUser;
    
    
            var query = string.Empty;
            opUser = (hazmat.User)context.Session["User"];
            
            if (!string.IsNullOrEmpty(context.Request["query"]))
            {
                query = context.Request["query"];
            }
    
    
            //Loop through data records
            Dictionary<string, string> item2;
    
    
            for (int lpLoop = 0; lpLoop < 10; lpLoop++)
            {
                item2 = new Dictionary<string, string>();
                item2.Add("RecordID", lpLoop.ToString());
                item2.Add("RecordName", "Record " + lpLoop.ToString());
                item2.Add("EquipmentID", "1");
                item2.Add("EquipmentName", "Equipment 1");
                result.Add(item2);
            }
            
            context.Response.Write(String.Format("{{totalCount:{1},'Equipment' : {0}}}", JSON.Serialize(result), 10));
        }
     
        public bool IsReusable {
            get {
                return false;
            }
        }
    
    
    }
    Handler for the combo box
    <%@ WebHandler Language="C#" Class="CooliteHandler" %>
    using System;
    using System.Web;
    using System.Collections.Generic;
    using Ext.Net;
    using BMTWeb;
    using hazmat;
    using System.Data;
    using System.Web.SessionState; 
    
    
    public class CooliteHandler : IHttpHandler {
        
        public void ProcessRequest (HttpContext context) {
            context.Response.ContentType = "text/json";
            IList<Dictionary<string, string>> result = new List<Dictionary<string, string>>();
    
    
            //Loop through data records
            Dictionary<string, string> item2;
            for(int lpLoop = 1; lpLoop <= 10; lpLoop++)
            {
                item2 = new Dictionary<string, string>();
                item2.Add("id", lpLoop.ToString());
    
    
                item2.Add("DataID", lpLoop.ToString());
                item2.Add("DataName", "Equipment " + lpLoop.ToString());
    
    
                result.Add(item2);
            }
            context.Response.Write(String.Format("{{totalCount:{1},'Data' : {0}}}", JSON.Serialize(result), 10));
        }
     
        public bool IsReusable {
            get {
                return false;
            }
        }
    
    
    }
  2. #2

    RE: [CLOSED] Custom ComboBox in GridPanel Set Displayed Text

    Hi,

    Try the following modified example
    <%@ Page Language="C#"  %>
    <%@ 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">
    
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Buffer Grid Example - Ext.Net Examples</title>
    <style type="text/css">
            .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;
            } 
            
            p { width: 650px; }
            
            .ext-ie .x-form-text { position: static !important; }
              .noteCls
              {
                background-color:Gray;
                font: normal 11px tahoma, arial, helvetica, sans-serif;
                color:white !important;
            }
        </style>
        
     
     <script type="text/javascript">
     
        function bulkUpdateValidateEdit(e)
        {
            if (e.value != "")
            {
                var ind = Store2.findExact("DataName", e.value);
                if(ind>-1){
                   e.record.set("EquipmentID", Store2.getAt(ind).data.DataID);
                   e.record.set("EquipmentName", Store2.getAt(ind).data.DataName);            
                }
            }
        }
    
        function EquipmentNameRender(lValue, opControl, opRecord)
        {
            if (lValue)
            {
                return opRecord.data.EquipmentName
            }
            return "";
        }
    
    
        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Store runat="server" ID="Store1">
                <Proxy>
                    <ext:HttpProxy Url="GridHandler.ashx" />
                </Proxy>
                <Reader>
                    <ext:JsonReader Root="Equipment" TotalProperty="totalCount" IDProperty="RecordID">
                        <Fields>
                            <ext:RecordField Name="RecordID" />
                            <ext:RecordField Name="RecordName" />
                            <ext:RecordField Name="EquipmentID" />
                            <ext:RecordField Name="EquipmentName" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:Store runat="server" ID="Store2" AutoLoad="false">
                <Proxy>
                    <ext:HttpProxy Url="CooliteHandler.ashx" />
                </Proxy>
                <Reader>
                    <ext:JsonReader Root="Data" TotalProperty="totalCount" IDProperty="DataID"> 
                        <Fields>
                            <ext:RecordField Name="DataID" />
                            <ext:RecordField Name="DataName" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>        
            
    <div style="width:600px;height:800px;">
                
                <ext:TextField ID="TextField1" runat="server">                       
                    <ToolTips>                
                        <ext:ToolTip ID="ToolTip1" runat="server" Title="Title" Html="Content" AutoShow="true" />            
                    </ToolTips>        
                </ext:TextField>
                
                <ext:Panel ID="pnlData" runat="server" Title="Data" Height="400px">
                    <Content>
                        <ext:FitLayout ID="FitLayout3" runat="server">
                            <Items>
                                <ext:GridPanel 
                                    ID="grdData" 
                                    StripeRows="true"
                                    runat="server" 
                                    StoreID="Store1" 
                                    EnableDragDrop="false"
                                    TrackMouseOver="false"
                                    ClicksToEdit="1">
                                    <ColumnModel>
                                        <Columns>
                                            <ext:Column DataIndex="RecordID" Header="ID"></ext:Column>
                                            <ext:Column DataIndex="RecordName" Header="Name Tooltip">
                                                <Editor>
                                                    <ext:TextField runat="server" ID="txtRecordName" TabTip="popopopop">
                                                        <Listeners>
                                                            <Render Handler="Ext.QuickTips.register(Ext.apply({target: this.el.id}, {title:'Format', text:'xx-xx-xxxxxxx'}));"/>
                                                        </Listeners>
                                                    </ext:TextField>
                                                </Editor>
                                            </ext:Column>
                                            <ext:Column DataIndex="RecordName" Header="Name Notes">
                                                <Editor>
                                                    <ext:TextField runat="server" ID="TextField2" Note="NSN requires format: xx-xxx-xxxxxxx" NoteCls="noteCls">
                                                    </ext:TextField>
                                                </Editor>
                                            </ext:Column>      
                                            <ext:Column DataIndex="EquipmentID" Header="EquipmentID"></ext:Column>                                  
                                            <ext:Column DataIndex="EquipmentName" Header="Name Combo" Width="200">
                                                
                                                <Editor>
                                                   <ext:ComboBox 
                                                        ID="ComboBox1"
                                                        runat="server" 
                                                        StoreID="Store2"
                                                        DisplayField="DataName" 
                                                        ValueField="DataName"
                                                        TypeAhead="false"
                                                        LoadingText="Searching..." 
                                                        Width="570" Mode="Remote" TriggerAction="All"
                                                        HideTrigger="true"
                                                        ItemSelector="div.search-item"        
                                                        MinChars="2">
                                                        <Template ID="Template1" runat="server">
                                                           <tpl for=".">
                                                              <div class="search-item">
                                                                 {DataName}
                                                              
    
                                                           </tpl>
                                                        </Template>
                                                    </ext:ComboBox>                                             
                                                </Editor>
                                            </ext:Column>
                                        </Columns>
                                    </ColumnModel>
                                    <Listeners>
                                        <ValidateEdit Fn="bulkUpdateValidateEdit" />
                                    </Listeners>
                                </ext:GridPanel> 
                            </Items>
                        </ext:FitLayout>
                    </Content>
                </ext:Panel>
            
          
        </form>
    </body>
    </html>
  3. #3

    RE: [CLOSED] Custom ComboBox in GridPanel Set Displayed Text



    Works a treat - thanks</p>


    </p>
  4. #4

    RE: [CLOSED] Custom ComboBox in GridPanel Set Displayed Text

    GridPanel1.save()
    Last edited by geoffrey.mcgill; Jul 15, 2010 at 6:52 AM.

Similar Threads

  1. [CLOSED] combobox not displayed correctly
    By alexp in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 01, 2011, 12:49 PM
  2. [CLOSED] how to customize text displayed in MultiCombo
    By Leonid_Veriga in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 13, 2011, 7:04 AM
  3. [CLOSED] ComboBox in GridPanel Displaying Selected Value instead of Text
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Sep 22, 2010, 7:17 PM
  4. HtmlEditor sometimes text is displayed encoded
    By alexp in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 24, 2009, 2:48 PM
  5. Replies: 2
    Last Post: Dec 24, 2008, 6:43 AM

Posting Permissions