[CLOSED] How to: hide combo box items an show them in a grid list based an entity property

  1. #1

    [CLOSED] How to: hide combo box items an show them in a grid list based an entity property

    Hi folks,

    I have a tricky issue.

    I need to hide item 082 from combobox list when user press down it. But I have to show it grayed and disabled in other scenarios. My entity has at element 082, a propery Enabled = true for availability and Enabled = false in other scenarios.

    Please may you help me?

    Thanks a million!

    Click image for larger version. 

Name:	img.jpg 
Views:	452 
Size:	93.2 KB 
ID:	3503
    Last edited by Daniil; Nov 28, 2011 at 10:30 AM. Reason: [CLOSED]
  2. #2
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi Daiil,

    thank for your link. It is very useful. Before close the thread. Based on your example, I would need to disable the combo box if its value has disabled property = true.

    May you help me?

    Cheers
  4. #4
    Quote Originally Posted by digitek View Post
    I would need to disable the combo box if its value has disabled property = true.
    I'm afraid I don't understand. Please clarify.
  5. #5
    Quote Originally Posted by Daniil View Post
    I'm afraid I don't understand. Please clarify.
    Click image for larger version. 

Name:	img2.png 
Views:	356 
Size:	22.1 KB 
ID:	3508

    Daniil,

    Look this example.

    I would need to disable red marked combo boxes because they have an initial value with property disabled = true

    Values with property disabled = true can not be neither selected (when listing) nor changed (when rendering combo box).

    Thanks a million!
  6. #6
    Seems clear.

    Do you use the EditableGrid plugin, right?
  7. #7
    Quote Originally Posted by Daniil View Post
    Seems clear.

    Do you use the EditableGrid plugin, right?
    This is the grid

    <ext:GridPanel ID="gvOpciones" runat="server" StripeRows="true" Title="Array Grid"
                        TrackMouseOver="true" Width="600" Height="350">
                        <Store>
                            <ext:Store ID="StoreMarcajes" runat="server">
                                <Reader>
                                    <ext:JsonReader>
                                        <Fields>
                                            <ext:RecordField Name="Id" />
                                            <ext:RecordField Name="FechaHoraMarcaje" Type="Date" />
                                            <ext:RecordField Name="CodigoIncidenciaCompatible" Type="String" />
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <Plugins>
                            <ext:EditableGrid ID="EditableGrid1" runat="server" />
                        </Plugins>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:RowNumbererColumn />
                                <ext:Column ColumnID="Id" DataIndex="Id" Editable="false" Hidden="true" />
                                <ext:DateColumn Header="Fecha" DataIndex="FechaHoraMarcaje" Format="dd/MM/yyyy" />
                                <ext:DateColumn Header="Hora" DataIndex="FechaHoraMarcaje" Format="HH:mm:ss" />
                                <ext:Column Header="Incidencia" DataIndex="CodigoIncidenciaCompatible">
                                    <Editor>
                                        <ext:ComboBox runat="server" ID="cboIncidencias" DisplayField="CodigoDescripcion"
                                            ValueField="Codigo" AllowBlank="false">
                                            <Store>
                                                <ext:Store ID="StoreIncidencias" runat="server">
                                                    <Reader>
                                                        <ext:JsonReader>
                                                            <Fields>
                                                                <ext:RecordField Name="Codigo" />
                                                                <ext:RecordField Name="Descripcion" />
                                                                <ext:RecordField Name="CodigoDescripcion" />
                                                                <ext:RecordField Name="disabled" />
                                                            </Fields>
                                                        </ext:JsonReader>
                                                    </Reader>
                                                </ext:Store>
                                            </Store>
                                            <Template ID="Template1" runat="server">
                                                <Html>
                                                    <tpl for=".">
                                                        <div {[getAttributes(values.disabled)]}>{CodigoDescripcion}</div>
                                                    </tpl>
                                                </Html>
                                            </Template>
                                            <Listeners>
                                                <BeforeSelect Handler="return !record.data.disabled;" />
                                                <Added Handler="#{cboIncidencias}.disabled = !record.data.disabled ;" />
                                            </Listeners>
                                        </ext:ComboBox>
                                    </Editor>
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                    </ext:GridPanel>
  8. #8
    If I correctly understand it can look something like this.

    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)
            {
                this.Store1.DataSource = new object[] 
                { 
                    new object[] { "0" },
                    new object[] { "1" },
                    new object[] { "0" },
                    new object[] { "1" }
                };
                this.Store1.DataBind();
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <script type="text/javascript">
            var getAttributes = function (disabled) {
                return "class='x-combo-list-item" + (disabled === "0" ? " disabled-item'" : "'");
            };
        </script>
    
        <style type="text/css">
            .disabled-item {
                color: gray;
                padding : 2px;
            }
            
            .disabled-item.x-combo-selected {
                border: 1px solid white !important;
                background-color:inherit;
                cursor: default;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test" DataIndex="test">
                            <Editor>
                                <ext:ComboBox runat="server">
                                    <Items>
                                        <ext:ListItem Text="Enabled 1" Value="1" />
                                        <ext:ListItem Text="Enabled 2" Value="2" />
                                        <ext:ListItem Text="Disabled" Value="0" />
                                    </Items>
                                    <Template runat="server">
                                        <Html>
                                            <tpl for=".">
                                                <div {[getAttributes(values.value)]}>{text}</div>
                                            </tpl>
                                        </Html>
                                    </Template>
                                    <Listeners>
                                        <BeforeSelect Handler="return record.data.test !== '0';" />
                                    </Listeners>
                                    <Listeners>
                                        <AfterRender Handler="if (this.getValue() === '0') {
                                                                  this.disable();    
                                                              }" />
                                    </Listeners>
                                </ext:ComboBox>
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:EditableGrid runat="server" />
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  9. #9
    Quote Originally Posted by Daniil View Post
    If I correctly understand it can look something like this.

    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)
            {
                this.Store1.DataSource = new object[] 
                { 
                    new object[] { "0" },
                    new object[] { "1" },
                    new object[] { "0" },
                    new object[] { "1" }
                };
                this.Store1.DataBind();
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <script type="text/javascript">
            var getAttributes = function (disabled) {
                return "class='x-combo-list-item" + (disabled === "0" ? " disabled-item'" : "'");
            };
        </script>
    
        <style type="text/css">
            .disabled-item {
                color: gray;
                padding : 2px;
            }
            
            .disabled-item.x-combo-selected {
                border: 1px solid white !important;
                background-color:inherit;
                cursor: default;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test" DataIndex="test">
                            <Editor>
                                <ext:ComboBox runat="server">
                                    <Items>
                                        <ext:ListItem Text="Enabled 1" Value="1" />
                                        <ext:ListItem Text="Enabled 2" Value="2" />
                                        <ext:ListItem Text="Disabled" Value="0" />
                                    </Items>
                                    <Template runat="server">
                                        <Html>
                                            <tpl for=".">
                                                <div {[getAttributes(values.value)]}>{text}</div>
                                            </tpl>
                                        </Html>
                                    </Template>
                                    <Listeners>
                                        <BeforeSelect Handler="return record.data.test !== '0';" />
                                    </Listeners>
                                    <Listeners>
                                        <AfterRender Handler="if (this.getValue() === '0') {
                                                                  this.disable();    
                                                              }" />
                                    </Listeners>
                                </ext:ComboBox>
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:EditableGrid runat="server" />
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Daniil,

    this.getValue() -> your getting the value from ValueField property.

    I need to get the value from record.disabled property. How can I access to record from AfterRender ?

    Cheers

Similar Threads

  1. Replies: 0
    Last Post: May 01, 2012, 10:43 AM
  2. [CLOSED] gridpanel show/ hide header based on toolbar button
    By yobnet in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Sep 08, 2010, 1:41 PM
  3. [CLOSED] Hide element in grid based on record value
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 25, 2010, 4:39 PM
  4. Hide the grid coloum Based on Button Click
    By Dinesh.T in forum 1.x Help
    Replies: 1
    Last Post: Nov 17, 2009, 4:55 AM
  5. Replies: 2
    Last Post: Mar 04, 2009, 5:28 PM

Tags for this Thread

Posting Permissions