[CLOSED] RadioGroup in Gridpanel

  1. #1

    [CLOSED] RadioGroup in Gridpanel

    Hi,

    Related to this thread http://forums.ext.net/showthread.php...ith-RadioGroup; I upgraded Ext.NET to v1.1 release and I have 0,1,2 values but zero values don't appears cheched in radio group inside the gridpanel.

    It wasn't corrected yet?
    Last edited by Daniil; Jul 18, 2011 at 12:16 PM. Reason: [CLOSED]
  2. #2
    Hi,

    It appears to be working fine for me.

    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.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "0" },
                    new object[] { "1" },
                    new object[] { "2" },
                };
                store.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 commandHandler = function (command, record, rowIndex, colIndex) {
                switch (command) {
                    case "edit":
                        var cell = GridPanel1.getView().getCell(rowIndex, colIndex);
                        Window1.rowIndex = rowIndex;
                        Window1.show();
                        Window1.getEl().alignTo(cell);
                        RadioGroup1.setValue(record.get("test"));
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store 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">
                            <Commands>
                                <ext:ImageCommand CommandName="edit" Icon="TableEdit" />
                            </Commands>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <Command Fn="commandHandler" />
                </Listeners>
            </ext:GridPanel>
            <ext:Window
                ID="Window1"
                runat="server"
                Title="Edit"
                Hidden="true">
                <Items>
                    <ext:RadioGroup ID="RadioGroup1" runat="server" ColumnsNumber="1">
                        <Items>
                            <ext:Radio runat="server" BoxLabel="0" InputValue="0" />
                            <ext:Radio runat="server" BoxLabel="1" InputValue="1" />
                            <ext:Radio runat="server" BoxLabel="2" InputValue="2" />
                        </Items>
                    </ext:RadioGroup>
                </Items>
                <Listeners>
                    <Hide Handler="GridPanel1.getStore().getAt(this.rowIndex).set(
                                       'test', 
                                       RadioGroup1.getValue().inputValue);" />
                </Listeners>
            </ext:Window>
        </form>
    </body>
    </html>
  3. #3
    Sorry for double posting; but like I comment in the other thread, I have the following situation:

        beforeDestroy: function () {
            try {
                Ext.destroy(this.panel);
            }
            catch (e) {
            }
            Ext.form.CheckboxGroup.superclass.beforeDestroy.call(this);
        },
        checkHandler: function () {
            (function () { this.group.fireEvent('blur', this.group) }).defer(10, this);
            return false;
        },
        initName: function () {
            this.name = this.group.id;
            var url = '';
            switch (this.inputValue) {
                case "0":
                    url = '/resources/images/imgQuestion.png';
                    break;
                case "1":
                    url = '/resources/images/imgValid.png';
                    break;
                case "2":
                    url = '/resources/images/imgDenied.png';
                    break;
            }
            if (url.length > 0)
                this.boxLabel = "<image src='" + ResolveUrl(url) + "' />";
        },
        getValue: function () {
            var out = null;
            this.eachItem(function (item) {
                if (item.checked) {
                    out = item.inputValue;
                    return false;
                }
            });
            return out;
        }
    <ext:Column ColumnID="State" DataIndex="State" Width="160" Header="State">
        <Editor>                         
            <ext:RadioGroup runat="server" ID="GroupNumber" 
                BeforeDestroy="={beforeDestroy}" 
                GetValue="={getValue}">                             
                <Items>                                 
                    <ext:Radio runat="server" IDMode="Explicit" InputValue="0">                                     
                        <Listeners>                                         
                            <BeforeRender Fn="initName" />                                         
                            <Check Fn="checkHandler" />                                     
                        </Listeners>                                 
                    </ext:Radio>                                 
                    <ext:Radio runat="server" IDMode="Explicit" InputValue="1">                                     
                        <Listeners>                                         
                            <BeforeRender Fn="initName" />                                         
                            <Check Fn="checkHandler" />                                      
                        </Listeners>                                 
                    </ext:Radio>                                 
                    <ext:Radio runat="server" IDMode="Explicit" InputValue="2">                                     
                        <Listeners>                                         
                            <BeforeRender Fn="initName" />                                         
                            <Check Fn="checkHandler" />                                     
                        </Listeners>                                 
                    </ext:Radio>  
                </Items>  
                <Listeners>                                 
                    <BeforeRender Handler="Ext.each(this.items, function(item){item.group = this;}, this);" />                             
                </Listeners>                                                                                                          
            </ext:RadioGroup>                     
        </Editor>                        
    </ext:Column>
    When the grid is loaded with its data zero values doesn't appear checked.

    Thanks!
  4. #4
    Hi,

    This is a full example of my issue:

    MASTER PAGE
    <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <ext:ResourcePlaceHolder runat="server" />
        <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
    </head>
    <body>
        <ext:ResourceManager ID="ScriptManager1" runat="server" />
        <div>
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
                <asp:HyperLink runat="server" Text="<br/><br/>Go to Sample" 
                    NavigateUrl="~/Sample.aspx">
                </asp:HyperLink>
            </asp:ContentPlaceHolder>
        </div>
    </body>
    </html>
    SAMPLE PAGE

    <%@ Page Language="C#" MasterPageFile="~/Views/Shared/BaseMasterPage.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <asp:Content ContentPlaceHolderID="HeadContent" runat="server">
        <script type="text/javascript">
            function beforeDestroy() {
                try {
                    Ext.destroy(this.panel);
                }
                catch (e) {
                }
                Ext.form.CheckboxGroup.superclass.beforeDestroy.call(this);
            }
    
            function checkHandler() {
                (function () { this.group.fireEvent('blur', this.group) }).defer(10, this);
                return false;
            }
    
            function initName() {
                this.name = this.group.id;
            }
    
            function getValue() {
                var out = null;
                this.eachItem(function (item) {
                    if (item.checked) {
                        out = item.inputValue;
                        return false;
                    }
                });
                return out;
            }
        </script>
        <script runat="server">
            public class SampleClass
            {
                public int Id { get; set; }
                public string Name { get; set; }
                public int State { get; set; }
            }
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                    Store store = this.gridContadoresJustificaciones.GetStore();
                    store.DataSource = new SampleClass[] { 
                        new SampleClass { Id=33,Name="Object with State 0",State=0 } , 
                        new SampleClass { Id=45,Name="Object with State 1",State=1 } , 
                        new SampleClass { Id=52,Name="Object with State 2",State=2 } 
                    };
                    store.DataBind();
                }
            }
        </script>
    </asp:Content>
    <asp:Content ContentPlaceHolderID="MainContent" runat="server">
        <ext:Viewport runat="server" Layout="Fit">
            <Items>
                <ext:GridPanel ID="gridContadoresJustificaciones" runat="server" Header="false" Border="false"
                    TrackMouseOver="true" StripeRows="true" UseIdConfirmation="true">
                    <Store>
                        <ext:Store ID="dsContadoresJustificaciones" runat="server">
                            <Reader>
                                <ext:JsonReader IDProperty="Id">
                                    <Fields>
                                        <ext:RecordField Name="Id" Type="Int" />
                                        <ext:RecordField Name="Name" />
                                        <ext:RecordField Name="State" Type="Int" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                    <Plugins>
                        <ext:EditableGrid runat="server" />
                    </Plugins>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column ColumnID="Id" DataIndex="Id" Header="Id" Hidden="true" Hideable="false" />
                            <ext:Column ColumnID="Name" DataIndex="Name" Header="Name" Width="200">
                                <Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
                            </ext:Column>
                            <ext:Column ColumnID="State" DataIndex="State" Width="250" Header="State">
                                <Editor>
                                    <ext:RadioGroup runat="server" ID="GroupNumber" BeforeDestroy="={beforeDestroy}"
                                        GetValue="={getValue}">
                                        <Items>
                                            <ext:Radio runat="server" IDMode="Explicit" InputValue="0" BoxLabel="State0">
                                                <Listeners>
                                                    <BeforeRender Fn="initName" />
                                                    <Check Fn="checkHandler" />
                                                </Listeners>
                                            </ext:Radio>
                                            <ext:Radio runat="server" IDMode="Explicit" InputValue="1" BoxLabel="State1">
                                                <Listeners>
                                                    <BeforeRender Fn="initName" />
                                                    <Check Fn="checkHandler" />
                                                </Listeners>
                                            </ext:Radio>
                                            <ext:Radio runat="server" IDMode="Explicit" InputValue="2" BoxLabel="State2">
                                                <Listeners>
                                                    <BeforeRender Fn="initName" />
                                                    <Check Fn="checkHandler" />
                                                </Listeners>
                                            </ext:Radio>
                                        </Items>
                                        <Listeners>
                                            <BeforeRender Handler="Ext.each(this.items, function(item){item.group = this;}, this);" />
                                        </Listeners>
                                    </ext:RadioGroup>
                                </Editor>
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel runat="server" SingleSelect="true" />
                    </SelectionModel>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
    </asp:Content>
    Please close the other thread http://forums.ext.net/showthread.php...ith-RadioGroup

    Thanks!
  5. #5
    In according to the ExtJS docs .inputValue is:
    The value that should go into the generated input element's value attribute/
    http://dev.sencha.com/deploy/ext-3.4...ber=inputValue

    In other words, a Radio with InputValue="0" is rendered like this (you can check it in Page Sources):
    <input 
        name="ext-gen103" 
        class=" x-form-radio x-form-field" 
        id="ext-comp-1030" 
        type="radio" 
        autocomplete="off" 
        value="0" />
    So, a browser considers value="0" as unchecked state.

    I can't see any way to override this browser's behavior.
  6. #6
    Ok, thanks I've done a workaround in controller to parse 0 values to 3 for example, and backwards too.

    Thanks! Mark as solved.

Similar Threads

  1. [CLOSED] Style FieldLabel in RadioGroup with GridPanel
    By osef in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 20, 2012, 4:49 PM
  2. [CLOSED] RadioGroup
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 04, 2012, 4:23 PM
  3. RadioGroup as Editor in GridPanel - Possible?
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Jan 12, 2012, 12:01 PM
  4. [CLOSED] [1.0] RadioGroup Help
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Oct 12, 2011, 8:17 AM
  5. [CLOSED] RadioGroup inside Gridpanel using MVC 2
    By webppl in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 11, 2011, 11:38 PM

Tags for this Thread

Posting Permissions