What's New?

[CLOSED] Give attributes to generated html element of ComboBox or any other control

  1. #1
    May 07, 2014, 5:42 AM

    [CLOSED] Give attributes to generated html element of ComboBox or any other control

    Hey,

    I want to give a css class or Id or any other custom attribute to the <ul>, generated for the combobox
    How do we do it

    It would be better if you give any generic way (for any control) to do it, so that I would be able to give attribute wherever i require.

    Thanks
    Last edited by Daniil; May 13, 2014 at 4:17 PM. Reason: [CLOSED]
  2. #2
    May 07, 2014, 6:16 AM
    Quote Originally Posted by PriceRightHTML5team View Post
    I want to give a css class or Id or any other custom attribute to the <ul>
    You need to get an instance of the Element, then call the .addCls() function.

    http://docs.sencha.com/extjs/4.2.2/#...-method-addCls

    You can set any attribute using the .set() function

    el.set({ data: "temp" })
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    May 07, 2014, 11:24 AM
    Quote Originally Posted by geoffrey.mcgill View Post
    You need to get an instance of the Element, then call the .addCls() function.

    http://docs.sencha.com/extjs/4.2.2/#...-method-addCls

    You can set any attribute using the .set() function

    el.set({ data: "temp" })
    Hey geo,

    My biz requirement is to color some items in the combobox

    I tried to get an instance of that element which is div with an Id 'ulComboCountries' and trying to find the element (ul) under it as

    var ulList = $('div#ulComboCountries ul')
    but i am failed to get the div; I am calling this under the event of AfterRender of combobox as 

    
@(X.Container().ID("pnlCountries")
            .Flex(1)
            .Frame(true)
            .Width(950)
            .AutoScroll(true)
            .Layout(LayoutType.HBox).Items(X.ComboBoxFor(m => m.Countries)
                                            .ID("cmbCountries")
                                            .Items(from c in Model.Countries select new Ext.Net.ListItem() { Text = c.Text, Value = c.Value })
                                            .Text("--Select--")
                                            .PaddingSpec("1px, 30px, 1px, 1px")
                                            .EmptyText("Select a country")
                                            .EmptyValue("")
                                            .Listeners(ls => ls.AfterRender.Fn = "manageColors")
                                            .ListConfig(X.BoundList().ID("ulComboCountries")),
                                     X.Checkbox().ID("chkNoRefRuleApplied").PaddingSpec("1px, 10px, 1px, 1px"),
                                     X.Label().Text("No Reference Rule Applied  (Check to remove reference rules)")))
    //JS code

    var manageColors = function (a, b) {
        debugger;
        var items = App.cmbCountries.getStore().data.items;
        ulList = $('div#ulComboCountries ul'),
        textIndexInStore = 1;

        $(ulList).find('li').each(function (e, i) {
            alert('hi');
        });
    }
    Is there anyway to add attributes conditionally to the rendered html ?
  4. #4
    May 07, 2014, 2:19 PM
    I recommend another approach to manage color of items.

    Example
    <%@ Page Language="C#" %>
 
<%@ 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", "Item 1", "red" },
                new object[] { "2", "Item 2", "green" },
                new object[] { "3", "Item 3", "yellow" }
            };
        }
    }
</script>
 
<!DOCTYPE html>
 
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:ComboBox
            ID="ComboBox1"
            runat="server"
            DisplayField="text"
            ValueField="value">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="value" />
                                <ext:ModelField Name="text" />
                                <ext:ModelField Name="color" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Reader>
                        <ext:ArrayReader />
                    </Reader>
                </ext:Store>
            </Store>
            <ListConfig>
                <Tpl runat="server">
                    <Html>
                        <ul class="x-list-plain">
                            <tpl for=".">
                                <li role="option" class="x-boundlist-item" style="color:{color}">
                                    {text}
                                </li>
                            </tpl>
                        </ul>
                    </Html>
                </Tpl>                              
            </ListConfig> 
        </ext:ComboBox>
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] Have a HTML Editor in window, want to give focus and put cursor at end of content...
    By rthiney in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 29, 2014, 5:39 AM
  2. ComboBox.Value and ComboBox.Text both give same value
    By zfreeman in forum 2.x Help
    Replies: 4
    Last Post: Sep 06, 2012, 2:56 AM
  3. [CLOSED] How to add a style to a code behind generated control
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Jun 12, 2012, 5:01 PM
  4. [CLOSED] Could you please give me an example about how to fill a ComboBox from a XML file?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 02, 2010, 1:08 AM
  5. [CLOSED] How to give format to a NumberField control value?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 27, 2010, 3:03 PM

Tags for this Thread

Posting Permissions