Alternative option for AjaxProxy in custom search

  1. #1

    Alternative option for AjaxProxy in custom search

    How can i change custom search example so that use alternative choice instead AjaxProxy and base on server side data search.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            // Create Reader
            JsonReader reader = new JsonReader
            {
                RootProperty = "plants",
                TotalProperty = "total"
            };
    
            // Create Proxy
            AjaxProxy proxy = new AjaxProxy
            {
                Url = "Plants.ashx",
                Reader = { reader },
                ActionMethods =
                {
                    Read = HttpMethod.POST
                }
            };
    
            Model model = new Model()
            {
                Fields = {
                    new ModelField("Common"),
                    new ModelField("Botanical"),
                    new ModelField("Light"),
                    new ModelField("Price", ModelFieldType.Float),
                    new ModelField("Indoor", ModelFieldType.Boolean)
                }
            };
    
            // Add Proxy and Reader to Store
            Store store = new Store {
                Proxy = { proxy },
                Model = { model },
                AutoLoad = false
            };
    
            // Create ComboBox
            ComboBox combobox = new ComboBox
            {
                DisplayField = "Common",
                ValueField = "Common",
                TypeAhead = false,
                Width = 570,
                PageSize = 10,
                HideTrigger = true,
                ListConfig = new BoundList
                {
                    LoadingText = "Searching..."
                },
                MinChars = 0,
                TriggerAction = Ext.Net.TriggerAction.Query,
                Store = { store }
            };
    
            combobox.ListConfig = new BoundList
            {
                ItemTpl = new XTemplate {
                    Html = @"
                      <div class=""search-item"">
                         <h3><span>${Price}</span>{Common}</h3>
                         {Botanical}
                      </div>"
                }
            };
    
            // Add ComboBox to Controls Collection
            this.Placeholder1.Controls.Add(combobox);
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>ComboBox with Templates and AJAX - Ext.NET Examples</title>
        <style>
            .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;
                margin      :0px;
            }
    
            .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; }
        </style>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>ComboBox with Templates and AJAX</h1>
    
            <p>This is a more advanced example demonstrating how to combine Store Paging and a Template to create "live search" functionality.</p>
    
            <div style="width:600px;">
                <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
                <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
                    <h3 style="margin-bottom:5px;">Search the plants</h3>
    
                <ext:ComboBox
                    runat="server"
                    DisplayField="Common"
                    ValueField="Common"
                    TypeAhead="false"
                    Width="570"
                    PageSize="10"
                    HideTrigger="true"
                    MinChars="0"
                    TriggerAction="Query">
                    <ListConfig  LoadingText="Searching...">
                        <ItemTpl runat="server">
                            <Html>
                                <div class="search-item">
                                    <h3><span>${Price}</span>{Common}</h3>
                                    {Botanical}
                                </div>
                            </html>                    </ItemTpl>
                    </ListConfig>
                    <Store>
                        <ext:Store runat="server" AutoLoad="false">
                            <Proxy>
                                <ext:AjaxProxy Url="Plants.ashx">
                                    <ActionMethods Read="POST" />
                                    <Reader>
                                        <ext:JsonReader RootProperty="plants" TotalProperty="total" />
                                    </Reader>
                                </ext:AjaxProxy>
                            </Proxy>
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Common" />
                                        <ext:ModelField Name="Botanical" />
                                        <ext:ModelField Name="Light" />
                                        <ext:ModelField Name="Price" Type="Float" />
                                        <ext:ModelField Name="Indoor" Type="Boolean" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                </ext:ComboBox>
    
                <div style="padding-top:4px;">
                    Plants search (type '*' (asterisk) for showing all)
                </div>
                </div></div></div>
                <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
            </div>
    
            <br />
            <br />
            <br />
    
            <div style="width:600px;">
                <div class="x-box-tl">
                    <div class="x-box-tr">
                        <div class="x-box-tc"></div>
                    </div>
                </div>
                <div class="x-box-ml">
                    <div class="x-box-mr">
                        <div class="x-box-mc">
                            <h3 style="margin-bottom:5px;">Search the plants (controls dynamically created)</h3>
                            <asp:PlaceHolder ID="Placeholder1" runat="server" />
                            <div style="padding-top:4px;">
                                Plants search (type '*' (asterisk) for showing all)
                            </div>
                        </div>
                    </div>
                </div>
                <div class="x-box-bl">
                    <div class="x-box-br">
                        <div class="x-box-bc"></div>
                    </div>
                </div>
            </div>
        </form>
    </body>
    </html>
  2. #2
    Hello @gnostic! Welcome to Ext.NET forums!

    I'm not really sure I understand what you need, but here's my best shot: aren't you wanting to use combo box's Remote Query mode as illustrated in this example? (look for QueryMode="Remote" in the example source):
    - Data Binding > Basic > Chained Combos

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks dear fabricio
    Yes, you got my question correctly, and answered correctly too.
  4. #4
    Hello! Thanks for the feedback and glad it helped, it really was a shot in the dark, but with high hopes of being able to help somehow!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Custom Search
    By DanielU in forum 1.x Help
    Replies: 23
    Last Post: Mar 04, 2013, 10:54 AM
  2. custom search in combobox
    By aditya.murthy88@gmail.com in forum 1.x Help
    Replies: 0
    Last Post: Feb 05, 2011, 8:57 AM
  3. [CLOSED] ConfigOptions, how to add custom option?
    By pil0t in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 16, 2010, 12:08 PM
  4. ComboBox Custom Search Example
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: Aug 15, 2009, 10:59 PM
  5. Custom Search
    By sharif in forum 1.x Help
    Replies: 0
    Last Post: Jul 14, 2009, 4:04 PM

Tags for this Thread

Posting Permissions