What's New?

Grid with RadioGroup

Page 1 of 2 12 LastLast
  1. #1
    Jan 27, 2011, 9:34 PM

    Grid with RadioGroup

    Hi,

    In our MVC application, we would like to have an in-line cell edition with a RadioGroup. Furthermore, we would like to put an image next to each radiobutton.

    Does this possible? How could we get data from our Controller?

    Thans in advance,

    Dominik.
  2. #2
    Jan 28, 2011, 11:05 AM
    Please see
    http://forums.ext.net/showthread.php?11904
  3. #3
    Feb 01, 2011, 1:38 PM
    Hi,

    I have some issues about that...

    1. It seems that this does not work when radiobuttons InputValues are Int types and there are one InputValue="0". But I need to use zero values...

    2. By the moment, I'm using BoxLabel="<image src='/resources/images/cross.png' to render images. If I use IndicatorIcon property instead, then I have a javascipt error. Is there some other way to define an Ext.Net resource icon?

    Thanks,

    Dominik.
    Last edited by Dominik; Feb 01, 2011 at 1:42 PM.
  4. #4
    Feb 01, 2011, 2:07 PM
    Quote Originally Posted by Dominik View Post
    1. It seems that this does not work when radiobuttons InputValues are Int types and there are one InputValue="0". But I need to use zero values...
    There was a bug. It is fixed and available in SVN. For Community License it will be available in next release (Ext.Net 1.0 RC2).
  5. #5
    Feb 01, 2011, 2:15 PM
    Quote Originally Posted by Dominik View Post
    2. By the moment, I'm using BoxLabel="<image src='/resources/images/cross.png' to render images. If I use IndicatorIcon property instead, then I have a javascipt error. Is there some other way to define an Ext.Net resource icon?
    As for me, using RadioGroup is not a good idea, because it's not officially supported and can be break after changes of Ext.Net/ExtJS sources. it Especially, using it with images can cause multiple issues.

    I would suggest you to use grid command to edit. Something like this:
    https://examples1.ext.net/#/GridPane...etails_Window/

    You could use cell command instead of row command.
  6. #6
    Feb 01, 2011, 2:55 PM
    Quote Originally Posted by Daniil View Post
    As for me, using RadioGroup is not a good idea, because it's not officially supported and can be break after changes of Ext.Net/ExtJS sources. it Especially, using it with images can cause multiple issues.

    I would suggest you to use grid command to edit. Something like this:
    https://examples1.ext.net/#/GridPane...etails_Window/

    You could use cell command instead of row command.
    Do you mean use 3 column, one for each radiobutton?

    But, I need to use a RadioGroup because these values are restrictive, and only one radio can be checked at the same time...
  7. #7
    Feb 01, 2011, 3:17 PM
    No, I meant 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] {"test1"},
                new object[] {"test2"},
                new object[] {"test3"},
            };
            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 = this.getView().getCell(rowIndex, colIndex);
                    Window1.editInfo = {
                        grid     : this,
                        rowIndex : rowIndex
                    };
                    Window1.show();
                    Window1.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"
            Height="140">
            <Items>
                <ext:RadioGroup ID="RadioGroup1" runat="server" ColumnsNumber="1">
                    <Items>
                        <ext:Radio ID="test1" runat="server" BoxLabel="test1" />
                        <ext:Radio ID="test2" runat="server" BoxLabel="test2" />
                        <ext:Radio ID="test3" runat="server" BoxLabel="test3" />
                    </Items>
                </ext:RadioGroup>
            </Items>
            <Buttons>
                <ext:Button runat="server" Text="OK">
                    <Listeners>
                        <Click Handler="Window1.hide();" />
                    </Listeners>
                </ext:Button>
            </Buttons>
            <Listeners>
                <Hide Handler="this.editInfo.grid.getStore().getAt(this.editInfo.rowIndex).set('test', RadioGroup1.getValue().id);" />
            </Listeners>
        </ext:Window>
    </form>
</body>
</html>
    Last edited by Daniil; Nov 01, 2012 at 6:06 AM.
  8. #8
    Jul 18, 2011, 9:18 AM
    Hi again,

    We have test this functionality again with version 1.1 and it seems RadioGroups with InputValue="0" doesn't work in GridPanel controls.

    Regards,

    Dominik.
  9. #9
    Jul 18, 2011, 9:35 AM
    Hi,

    Here I posted the example which works fine. Can you confirm it works for you as well?
    http://forums.ext.net/showthread.php?14644
  10. #10
    Jul 18, 2011, 10:12 AM
    Hi,

    Well, this sample code is working for me too. But I'm editing values inside a GridPanel column. At the moment, I'n changing 0 values to 3...

        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>
    Last edited by Dominik; Jul 18, 2011 at 10:19 AM.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Help RadioGroup inside Editable Grid
    By sharif in forum 1.x Legacy Premium Help
    Replies: 23
    Last Post: Jan 26, 2012, 9:39 PM
  2. [CLOSED] [1.0] RadioGroup Help
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Oct 12, 2011, 8:17 AM
  3. RadioGroup and RadioColumn
    By Birgit in forum 1.x Help
    Replies: 0
    Last Post: Oct 11, 2011, 1:53 PM
  4. RadioGroup Event Bug
    By paul-2011 in forum 1.x Help
    Replies: 0
    Last Post: Jan 04, 2011, 10:35 AM
  5. RadioGroup
    By JsonTerre in forum 1.x Help
    Replies: 4
    Last Post: Jan 30, 2009, 2:58 PM

Tags for this Thread

Posting Permissions