[CLOSED] Apply “styles” to a combobox items

  1. #1

    [CLOSED] Apply “styles” to a combobox items

    Hi !!!

    My problem is this: I should apply “styles” to a combobox items, for each item must be created a SQL to the database, to determine the style to be configured.

    So, i need to know "if it’s possible to have a direct method returning to value from the code behind the JavaScript call to ?"

    I implemented the following example to illustrate my problem

    
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store1.DataSource = new object[]
                        {
                            new {DisplayField1 = "One", ValueField1 = 1},
                            new {DisplayField1 = "Two", ValueField1 = 2},
                            new {DisplayField1 = "Three", ValueField1 = 3},
                            new {DisplayField1 = "Four", ValueField1 = 4},
                            new {DisplayField1 = "Five", ValueField1 = 5},
                        };
                Store1.DataBind();
            }
        }
    
        [DirectMethod]
        public int ReturnQuery(string pstrValue)
        {
            return (int.Parse(pstrValue) > 2 ? 1 : 0);
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Edit Form View - Ext.NET Examples</title>
        <style type="text/css">
            .list-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;
            }
    
            .list-item-red
            {
                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: red;
                font-weight: bold;
            }
        </style>
    
        <script type="text/javascript">
            var getCssClass = function (combo, values)
            {
                var value = values[combo.valueField];
                var rango = App.direct.ReturnQuery(value);
    
                if (rango == 1)
                {
                    return 'list-item-red';
                }
                else
                {
                    return 'list-item';
                }
            };
        </script>
    </head>
    
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Window ID="FormWindow" runat="server" 
                Title="Form View" 
                Width="440" 
                Height="310"           
                BodyPadding="15" 
                Resizable="false" 
                Closable="false"
                Layout="Fit">
                <Items>
                    <ext:FormPanel ID="FormPanel1" runat="server" 
                            Border="false" 
                            Layout="Form">
                        <Items>
                            <ext:ComboBox ID="ComboBox1" runat="server"
                                    Name="Name4" 
                                    MsgTarget="Side" 
                                    ValueField="ValueField1"    
                                    DisplayField="DisplayField1"
                                    FieldLabel="Field ComboBox1" >
                                <Store>
                                    <ext:Store ID="Store1" runat="server" AutoLoad="false" >               
                                        <Model>
                                            <ext:Model ID="Model1" runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="ValueField1"/>
                                                    <ext:ModelField Name="DisplayField1" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <ListConfig>
                                    <ItemTpl ID="ItemTpl1" runat="server">
                                        <Html>
                                            <div class="{[ getCssClass(App.ComboBox1, values)]}">
                                                    <h3>{DisplayField1}</h3>
                                                            {ValueField1}
                                            </div>
                                        </Html>
                                    </ItemTpl>
                                </ListConfig>
                            </ext:ComboBox>
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    I accept suggestions, ideas or comments

    Regards.
    Last edited by Daniil; Aug 23, 2015 at 8:42 AM. Reason: [CLOSED]
  2. #2
    Hi @opendat2000,

    Unfortunately, no, a Template cannot do asynchronous remote requests. It needs all the data right at the moment.

    Moreover, even if it were possible, I would recommend not to do that, because it leads to a big performance impact. An individual AJAX request for each item, then an individual SQL request to a database. It looks like a big overhead.

    It appears to be the only way - create an additional "rango" ModelField and bind all data in Store1.DataSource. Then use it the getCssClass function instead of App.direct.ReturnQuery().
  3. #3
    Daniil, Thank you so much for your help and prompt response.

    Following your recommendation I’ve incorporated in the Contro Store the "Range1" column, now, i need to know how to get value “Control” of the store, so it can be operated by the ComboBox and give the style to items ?

    
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store1.DataSource = new object[]
                        {
                            new {DisplayField1 = "One", ValueField1 = 1, Range1 = 3},
                            new {DisplayField1 = "Two", ValueField1 = 2, Range1 = 2},
                            new {DisplayField1 = "Three", ValueField1 = 3, Range1 = 2},
                            new {DisplayField1 = "Four", ValueField1 = 4, Range1 = 1},
                            new {DisplayField1 = "Five", ValueField1 = 5, Range1 = 1}
                        };
                Store1.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Edit Form View - Ext.NET Examples</title>
        <style type="text/css">
            .list-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;
            }
    
            .list-item-red
            {
                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: red;
                font-weight: bold;
            }
        </style>
    
        <script type="text/javascript">
            var getCssClass = function (store, values)
            {
                if (values.Range1 > 2)
                {
                    return 'list-item-red';
                }
    
                return 'list-item';
            };
        </script>
    </head>
    
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Window ID="FormWindow" runat="server" 
                Title="Form View" 
                Width="440" 
                Height="310"           
                BodyPadding="15" 
                Resizable="false" 
                Closable="false"
                Layout="Fit">
                <Items>
                    <ext:FormPanel ID="FormPanel1" runat="server" 
                            Border="false" 
                            Layout="Form">
                        <Items>
                            <ext:ComboBox ID="ComboBox1" runat="server"
                                    Name="Name4" 
                                    MsgTarget="Side" 
                                    ValueField="ValueField1"    
                                    DisplayField="DisplayField1"
                                    FieldLabel="Field ComboBox1" >
                                <Store>
                                    <ext:Store ID="Store1" runat="server" AutoLoad="false" >               
                                        <Model>
                                            <ext:Model ID="Model1" runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="ValueField1"/>
                                                    <ext:ModelField Name="DisplayField1" />
                                                    <ext:ModelField Name="Range1" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <ListConfig>
                                    <ItemTpl ID="ItemTpl1" runat="server">
                                        <Html>
                                            <div class="{[ getCssClass(App.Store1, values)]}">
    							                    <h3>{DisplayField1}</h3>
    							                            {ValueField1}
                                            </div>
                                        </Html>
                                    </ItemTpl>
                                </ListConfig>
                            </ext:ComboBox>
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    I accept suggestions ideas or comments

    Regards.
    Last edited by opendat2000; Aug 21, 2015 at 6:59 PM.
  4. #4
    Please use:
    var getCssClass = function (store, values) {
        if (values.Range1 > 2) {
            return 'list-item-red';
        }
                
        return 'list-item';
    };
  5. #5
    Hi Daniil,

    Thanks a lot for your reply, the code line you proposed worked perfectly.

    Please close the thread.

    Note: I modified the code, to provide in the community.

    Saludos
    Mauricio.

Similar Threads

  1. Replies: 4
    Last Post: Jul 15, 2014, 10:59 AM
  2. How to apply a GridFilter on a ComboBox?
    By paul-2011 in forum 2.x Help
    Replies: 0
    Last Post: Aug 24, 2013, 5:38 PM
  3. Replies: 13
    Last Post: Jun 22, 2011, 2:05 PM
  4. how to apply datasource to combobox
    By moa1961 in forum 1.x Help
    Replies: 1
    Last Post: Dec 21, 2010, 9:58 AM
  5. [CLOSED] [1.0] EditableGrid Apply to selection apply to all
    By ashton.lamont in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 24, 2010, 5:49 PM

Posting Permissions