[OPEN] [#130] RadioGroup SetValue

  1. #1

    [OPEN] [#130] RadioGroup SetValue

    Hi,

    Related with this thread http://forums.ext.net/showthread.php?14644 I adapted it to v2.1 but it doesn't works and doesn't check any radiobutton.

    <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 (column, command, record, rowIndex, colIndex) {
                switch (command) {
                    case "edit":
                        var cell = GridPanel1.getView().getCell(record, column);
                        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">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test" DataIndex="test">
                        <Commands>
                            <ext:ImageCommand CommandName="edit" Icon="TableEdit" />
                        </Commands>
                        <Listeners>
                            <Command Fn="commandHandler" />
                        </Listeners>
                    </ext:Column>
                </Columns>
            </ColumnModel>
        </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>
    What I have to pass to setValue method?
    Last edited by Daniil; Jan 18, 2013 at 11:07 AM. Reason: [OPEN] [#130]
  2. #2
    Hi,

    I can suggest to set:
    GroupName="RadioGroup1"
    for the RadioGroup.

    Then replace
    RadioGroup1.setValue(record.get('test'));
    wtih
    RadioGroup1.setValue({
        RadioGroup1 : record.get('test')
    });
    and
    <Hide Handler="GridPanel1.getStore().getAt(this.rowIndex).set('test', RadioGroup1.getValue().inputValue);" />
    with
    <Hide Handler="GridPanel1.getStore().getAt(this.rowIndex).set('test', RadioGroup1.getValue().RadioGroup1);" />
    or
    <Hide Handler="GridPanel1.getStore().getAt(this.rowIndex).set('test', RadioGroup1.getChecked()[0].inputValue);" />
    See also
    http://docs.sencha.com/ext-js/4-1/#!...ethod-setValue
    http://docs.sencha.com/ext-js/4-1/#!...ethod-getValue
    http://docs.sencha.com/ext-js/4-1/#!...hod-getChecked
  3. #3
    Well I thought that this example could be related with my final issue.

    My case is the following, I have a gridpanel like this:

    <!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">
            function checkHandler() {
                return false;
            }
        </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.grid1.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>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:GridPanel ID="grid1" runat="server" Header="false" Border="false">
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Text="Sample button"></ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Store>
                        <ext:Store ID="store1" runat="server">
                            <Model>
                                <ext:Model runat="server" IDProperty="Id">
                                    <Fields>
                                        <ext:ModelField Name="Id" Type="Int" />
                                        <ext:ModelField Name="Name" Type="String" />
                                        <ext:ModelField Name="State" Type="Int" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column runat="server" DataIndex="Id" Text="Id" Hidden="true" Hideable="false" />
                            <ext:Column runat="server" DataIndex="Name" Text="Name" Width="200">
                                <Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
                            </ext:Column>
                            <ext:ComponentColumn runat="server" DataIndex="State" Width="250" Text="State">
                                <Component>
                                    <ext:RadioGroup runat="server" ID="State" GroupName="State">
                                        <Items>
                                            <ext:Radio runat="server" InputValue="0" BoxLabel="State0">
                                                <Listeners>
                                                    <Change Fn="checkHandler" />
                                                </Listeners>
                                            </ext:Radio>
                                            <ext:Radio runat="server" InputValue="1" BoxLabel="State1">
                                                <Listeners>
                                                    <Change Fn="checkHandler" />
                                                </Listeners>
                                            </ext:Radio>
                                            <ext:Radio runat="server" InputValue="2" BoxLabel="State2">
                                                <Listeners>
                                                    <Change Fn="checkHandler" />
                                                </Listeners>
                                            </ext:Radio>
                                        </Items>
                                    </ext:RadioGroup>
                                </Component>
                            </ext:ComponentColumn>
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel runat="server" SingleSelect="true" />
                    </SelectionModel>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    And Radiogroup isn't databinding value as expected to check correct radio. This example binds store via c#, in my scenario store is bind by an ajaxproxy, I don't know if the solution could be different.

    How could I perform it in v2.1?
  4. #4
    I am afraid there is no way to achieve it at the moment without overriding the ComponentColumn JavaScript class.

    We will look how to add RadioGroup/CheckboxGroup support for ComponentColumn. But, unfortunately, I can't guarantee we will implement it and, also, I can't provide with any time frame. But it would definitely be a useful feature. Thank you for the question!
    Last edited by Daniil; Jan 13, 2013 at 6:34 AM.
  5. #5
    Returning to the case...

    Is there any way now, with a combobox or another column type or something similar to edit a integer value inline without clicking column to edit the value and only clicking directly to the control, and later save all modified rows with ajaxproxy sync method?

    Or if you have got any idea it will be appreciated.

    Thanks
  6. #6
  7. #7
    Thanks Daniil.

    Finally I use the combobox option in this example.
  8. #8
    Quote Originally Posted by Daniil View Post
    We will look how to add RadioGroup/CheckboxGroup support for ComponentColumn. But, unfortunately, I can't guarantee we will implement it and, also, I can't provide with any time frame. But it would definitely be a useful feature.
    Created a feature Issue.
    https://github.com/extnet/Ext.NET/issues/130

    But still no guarantee that we will implement it. So, not a priority. But it is definitely something which would be great to have built-in.

Similar Threads

  1. ComboBox and setValue
    By _xpto in forum 1.x Help
    Replies: 1
    Last Post: Oct 26, 2012, 3:10 PM
  2. NumberField - SetValue
    By thchuong in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 05, 2011, 9:22 AM
  3. radio group setvalue
    By [WP]joju in forum 1.x Help
    Replies: 1
    Last Post: Jan 11, 2010, 4:35 AM
  4. combo setvalue
    By [WP]joju in forum 1.x Help
    Replies: 1
    Last Post: Nov 23, 2009, 3:40 AM
  5. [FIXED] [V0.6] SetValue
    By Timothy in forum Bugs
    Replies: 6
    Last Post: Sep 14, 2008, 4:44 PM

Tags for this Thread

Posting Permissions