The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

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, 11:54 AM
  2. custom search in combobox
    By aditya.murthy88@gmail.com in forum 1.x Help
    Replies: 0
    Last Post: Feb 05, 2011, 9:57 AM
  3. [CLOSED] ConfigOptions, how to add custom option?
    By pil0t in forum 1.x Premium Help
    Replies: 2
    Last Post: Jun 16, 2010, 1:08 PM
  4. ComboBox Custom Search Example
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: Aug 15, 2009, 11:59 PM
  5. Custom Search
    By sharif in forum 1.x Help
    Replies: 0
    Last Post: Jul 14, 2009, 5:04 PM

Tags for this Thread

Posting Permissions