Setting different background colors for the combobox inside a gridpanel.

  1. #1

    Setting different background colors for the combobox inside a gridpanel.

    I could able to set different background colors for the combobox values. Below is the coed for that.

      <ext:ComboBox
                ID="ComboBox1"
                runat="server"
                DisplayField="text"
                ValueField="value">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="value" />
                                    <ext:ModelField Name="text" />
                                    <ext:ModelField Name="color" />
                                    <ext:ModelField Name="bgcolor" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Reader>
                            <ext:ArrayReader />
                        </Reader>
                    </ext:Store>
                </Store>
                <Listeners>
                    <Select Handler="applyFilter(this)" />
                    <AfterRender Handler="applyFilter(this)" />
    
                    <%--  <SpecialKey Fn="PreventEscape" PreventDefault="true" />--%>
                </Listeners>
                <ListConfig>
                    <Tpl ID="Tpl1" runat="server">
                        <Html>
                            <ul class="x-list-plain">
                                <tpl for=".">
                                    <li role="option" class="x-boundlist-item" style="font-weight:bold; text-align:center; background-color:{bgcolor}; color:{color}">
                                        {text}
                                    </li>
                                </tpl>
                            </ul>
                        </Html>
                    </Tpl>
                </ListConfig>
            </ext:ComboBox>


    Now I want the same inside a Gridpanel. A combobox with different background colors inside a gridpanel. I have tried something like dis below. But it is not working. Please help.

       <ext:GridPanel ID="GridPanel1"
                runat="server"
                Title="ComponentColumn Editor"
                Width="600"
                Height="300">
                <Store>
                    <ext:Store ID="Store2" runat="server">
                        <Model>
                            <ext:Model ID="Model2" runat="server">
                                <Fields>
                                    <ext:ModelField Name="IntField" Type="Int" />
                                    <ext:ModelField Name="ComboField" Type="Int" />
                                    <ext:ModelField Name="TextField" Type="String" />
                                    <ext:ModelField Name="DateField" Type="Date" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                       <%-- <ext:ComponentColumn ID="ComponentColumn1"
                            runat="server"
                            Editor="true"
                            DataIndex="IntField"
                            Flex="1"
                            Text="Integer">
                            <Component>
                                <ext:NumberField ID="NumberField1" runat="server" />
                            </Component>
                        </ext:ComponentColumn>--%>
    
                        <ext:ComponentColumn ID="ComponentColumn2"
                            runat="server"
                            Editor="true"
                            DataIndex="ComboField"
                            Flex="1"
                            Text="ComboBox">
                            <Component>
                                <ext:ComboBox ID="ComboBox2" runat="server">
                                    <Items>
                                        <ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
                                        <ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
                                        <ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
                                        <ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
                                        <ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
                                        <ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
                                        <ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
                                        <ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
                                        <ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
                                    </Items>
                                </ext:ComboBox>
                            </Component>
                        </ext:ComponentColumn>
    
                        <ext:ComponentColumn runat="server" ID="compo3">
                            <Component>
                                <ext:ComboBox
                                    ID="ComboBox3"
                                    runat="server"
                                    DisplayField="text"
                                    ValueField="value">
                                    <Store>
                                        <ext:Store ID="Store3" runat="server">
                                            <Model>
                                                <ext:Model ID="Model3" runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="value" />
                                                        <ext:ModelField Name="text" />
                                                        <ext:ModelField Name="color" />
                                                        <ext:ModelField Name="bgcolor" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                            <Reader>
                                                <ext:ArrayReader />
                                            </Reader>
                                        </ext:Store>
                                    </Store>
                                    <Listeners>
                                        <Select Handler="applyFilter(this)" />
                                        <AfterRender Handler="applyFilter(this)" />
    
                                        <%--  <SpecialKey Fn="PreventEscape" PreventDefault="true" />--%>
                                    </Listeners>
                                    <ListConfig>
                                        <Tpl ID="Tpl2" runat="server">
                                            <Html>
                                                <ul class="x-list-plain">
                                <tpl for=".">
                                    <li role="option" class="x-boundlist-item" style="font-weight:bold; text-align:center; background-color:{bgcolor}; color:{color}">
                                        {text}
                                    </li>
                                </tpl>
                            </ul>
                                            </Html>
                                        </Tpl>
                                    </ListConfig>
                                </ext:ComboBox>
                            </Component>
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
  2. #2
    Hi @arjunrvasisht,

    I am not sure what the requirement is and what exactly doesn't work. Please elaborate on that.
  3. #3
    Click image for larger version. 

Name:	Capture.jpg 
Views:	14 
Size:	77.7 KB 
ID:	16431

    Please check the image attached for details.
  4. #4
    Hmm, I am still not sure.

    Please provide a full runnable test case and steps to reproduce the problem.
  5. #5
    Hi Daniil, here is the code U can run and check.
    There is a combobox and Gridpanel. The Grid panel consists of two columns which again has two comboboxes. Both the comboboxes inside gridpanel are bound during the page load. But I want that comboxes to be loaded on index changed event of the combobox which is outside the gridpanel.

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
    
                Store store = this.ComboBox1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "1", "--Select Maturity--", "black","white" },
                    new object[] { "2", "Gaps", "white","red" },
                    new object[] { "3", "Disconnects", "white","pink" },
                    new object[] { "4", "Actions", "black","yellow" },
                    new object[] { "5", "In Place", "black","lightgreen" },
                    new object[] { "6", "Proven", "white","green" },
                    new object[] { "7", "N/A", "black","lightgray" }
                };
    
    
                //ComboBox cbm = GridPanel1.FindControl("ComboBox3") as ComboBox;
                //Store storea = cbm.GetStore();
                Store strA = ComboBox3.GetStore();
                strA = ComboBox3.GetStore();
                // Store3.RemoveAll();
                strA.DataSource = new object[] 
                { 
                    new object[] { "1", "--Select Maturity--", "black","white" },
                    new object[] { "2", "Gaps", "white","red" },
                    new object[] { "3", "Disconnects", "white","pink" },
                    new object[] { "4", "Actions", "black","yellow" },
                    new object[] { "5", "In Place", "black","lightgreen" },
                    new object[] { "6", "Proven", "white","green" },
                    new object[] { "7", "N/A", "black","lightgray" }
                };
                // Store2.RemoveAll();
                Store2.DataSource = new object[]
                {
                    new object[] { 1, 1, "Text 1", DateTime.Now.Date },
                    new object[] { 2, 2, "Text 2", DateTime.Now.Date },
                    new object[] { 3, 3, "Text 3", DateTime.Now.Date },
                    new object[] { 4, 4, "Text 4", DateTime.Now.Date },
                    new object[] { 5, 5, "Text 5", DateTime.Now.Date },
                    new object[] { 6, 6, "Text 6", DateTime.Now.Date },
                    new object[] { 7, 7, "Text 7", DateTime.Now.Date },
                    new object[] { 8, 8, "Text 8", DateTime.Now.Date },
                    new object[] { 9, 9, "Text 19", DateTime.Now.Date }
                };
    
                Store2.DataBind();
            }
    
        }
    </script>
    
    
    <style type="text/css">
        .x-form-text {
            background: none !important;
            background-image: none !important;
            /*color: white !important;*/
            font-weight: bold !important;
            text-align: center !important;
        }
    </style>
    
    <ext:XScript ID="XScriptdd1" runat="server">
        <script type="text/javascript">
            var applyFilter = function (field) {
                // debugger;
                // field.el.dom.style.textAlign="center";           
    
                var MaturityHealth = field.value;
                if (MaturityHealth == '1') {//-->Gaps - Red.
                    field.el.dom.style.color = "white !important";
                    field.el.dom.style.textAlign = "center";
                    field.el.dom.style.backgroundColor = "#FF0000";
                    field.el.dom.style.backgroundImage = "none";
                }
                else if (MaturityHealth == '2') {//-->Disconnect - LightRed.
                    field.el.dom.style.color = "white";
                    field.el.set().dom.style.background = "#FF8080";
                    field.el.dom.style.backgroundColor = "#FF8080";
                    //field.el.dom.style.backgroundImage = "none";
                }
                else if (MaturityHealth == '3') {//-->Actions - Yellow
                    field.el.dom.style.color = "black";
                    field.el.set().dom.style.backgroundColor = "black"; //field.el.dom.style.backgroundColor = "#FFFF00";
                    field.el.dom.style.backgroundImage = "none";
                }
                else if (MaturityHealth == '4') {//-->In Place - LightGreen
                    field.el.dom.style.color = "black";
                    field.el.dom.style.backgroundColor = "#C2FFA3";
                    field.el.dom.style.backgroundImage = "none";
                }
                else if (MaturityHealth == '5') {//-->Proven - Green
                    field.el.dom.style.color = "white";
                    field.el.dom.style.backgroundColor = "#008000";
                    field.el.dom.style.backgroundImage = "none";
                }
                else if (MaturityHealth == '6') {//-->N/A - Grey
                    field.el.dom.style.color = "black";
                    field.el.dom.style.backgroundColor = "#d4d0c8";
                    field.el.dom.style.backgroundImage = "none";
                }
                else {
                    field.el.dom.style.color = "black";
                    field.el.dom.style.backgroundColor = "black";
                    field.el.dom.style.backgroundImage = "none";
                }
                field.el.dom.style.fontWeight = "bold";
    
                //field.el.applyStyles({
                //    'background-color': 'red',
                //    'color': 'white',
                //    'font-weight': 'bold',
                //    'text-align': 'center'
                //});
                //'border': '1px solid red'
                //'background': 'none repeat scroll 0 0 rgba(110, 80, 90, 1)'
    
    
                //field.getEl().setStyle(config);
                //field.getEl().dom.bgColor = "red";
                // field.getEl().dom.style.backgroundColor = 'red';
            };
            </script>
    </ext:XScript>
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:ComboBox
                ID="ComboBox1"
                runat="server"
                DisplayField="text"
                ValueField="value">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="value" />
                                    <ext:ModelField Name="text" />
                                    <ext:ModelField Name="color" />
                                    <ext:ModelField Name="bgcolor" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Reader>
                            <ext:ArrayReader />
                        </Reader>
                    </ext:Store>
                </Store>
                <Listeners>
                    <Select Handler="applyFilter(this)" />
                    <AfterRender Handler="applyFilter(this)" />
    
                    <%--  <SpecialKey Fn="PreventEscape" PreventDefault="true" />--%>
                </Listeners>
                <ListConfig>
                    <Tpl ID="Tpl1" runat="server">
                        <Html>
                            <ul class="x-list-plain">
                                <tpl for=".">
                                    <li role="option" class="x-boundlist-item" style="font-weight:bold; text-align:center; background-color:{bgcolor}; color:{color}">
                                        {text}
                                    </li>
                                </tpl>
                            </ul>
                        </Html>
                    </Tpl>
                </ListConfig>
                <DirectEvents>
                    <Select OnEvent="ddlTier3_SelectedIndexChanged">
                    </Select>
                </DirectEvents>
            </ext:ComboBox>
    
            <ext:GridPanel ID="GridPanel1"
                runat="server"
                Title="ComponentColumn Editor"
                Width="600"
                Height="300">
                <Store>
                    <ext:Store ID="Store2" runat="server">
                        <Model>
                            <ext:Model ID="Model2" runat="server">
                                <Fields>
                                    <ext:ModelField Name="IntField" Type="Int" />
                                    <ext:ModelField Name="ComboField" Type="Int" />
                                    <ext:ModelField Name="TextField" Type="String" />
                                    <ext:ModelField Name="DateField" Type="Date" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <%-- <ext:ComponentColumn ID="ComponentColumn1"
                            runat="server"
                            Editor="true"
                            DataIndex="IntField"
                            Flex="1"
                            Text="Integer">
                            <Component>
                                <ext:NumberField ID="NumberField1" runat="server" />
                            </Component>
                        </ext:ComponentColumn>--%>
    
                        <ext:ComponentColumn ID="ComponentColumn2"
                            runat="server"
                            Editor="true"
                            DataIndex="ComboField"
                            Flex="1"
                            Text="ComboBox">
                            <Component>
                                <ext:ComboBox ID="ComboBox2" runat="server">
                                    <Items>
                                        <ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
                                        <ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
                                        <ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
                                        <ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
                                        <ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
                                        <ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
                                        <ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
                                        <ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
                                        <ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
                                    </Items>
                                </ext:ComboBox>
                            </Component>
                        </ext:ComponentColumn>
    
                        <ext:ComponentColumn runat="server" ID="compo3">
                            <Component>
                                <ext:ComboBox
                                    ID="ComboBox3"
                                    runat="server"
                                    DisplayField="text"
                                    ValueField="value">
                                    <Store>
                                        <ext:Store ID="Store3" runat="server">
                                            <Model>
                                                <ext:Model ID="Model3" runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="value" />
                                                        <ext:ModelField Name="text" />
                                                        <ext:ModelField Name="color" />
                                                        <ext:ModelField Name="bgcolor" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                            <Reader>
                                                <ext:ArrayReader />
                                            </Reader>
                                        </ext:Store>
                                    </Store>
                                    <Listeners>
                                        <Select Handler="applyFilter(this)" />
                                        <AfterRender Handler="applyFilter(this)" />
    
                                        <%--  <SpecialKey Fn="PreventEscape" PreventDefault="true" />--%>
                                    </Listeners>
                                    <ListConfig>
                                        <Tpl ID="Tpl2" runat="server">
                                            <Html>
                                                <ul class="x-list-plain">
                                <tpl for=".">
                                    <li role="option" class="x-boundlist-item" style="font-weight:bold; text-align:center; background-color:{bgcolor}; color:{color}">
                                        {text}
                                    </li>
                                </tpl>
                            </ul>
                                            </Html>
                                        </Tpl>
                                    </ListConfig>
                                </ext:ComboBox>
                            </Component>
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
  6. #6
    I think you should define the Stores separately from ComboBoxes and link it to ComboBoxes via its StoreID property.

    Then you can bind the data during a DirectEvent
    store.DataSource = someData;
    store.DataBind();
    and it will affect all the ComboBoxes linked to that Store via StoreID.
  7. #7
    Hi Daniil,
    Tried that approach also. It isn't working. Did you check your approach wid the code block have sent. Can u please share me the code if u have checked.

    Thanks,
    Arjun
  8. #8
    Did you check your approach wid the code block have sent.
    No, I didn't. I just demonstrated an approach to bind the data to a Store during a DirectEvent and this approach works for sure. Moreover, your code throws an Exception.

    Tried that approach also. It isn't working.
    Please provide a test case.

Similar Threads

  1. Replies: 6
    Last Post: Nov 20, 2014, 5:25 AM
  2. Replies: 1
    Last Post: Jun 27, 2014, 10:52 AM
  3. Replies: 5
    Last Post: Jun 29, 2012, 12:16 PM
  4. Replies: 7
    Last Post: Feb 29, 2012, 11:53 AM
  5. [CLOSED] Alternating background colors of a listview row
    By mattwoberts in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 23, 2011, 2:35 PM

Tags for this Thread

Posting Permissions