[CLOSED] Render functions for Radio Button in Editable Grid works correctly in IE 8 but doesnt work on Chrome

  1. #1

    [CLOSED] Render functions for Radio Button in Editable Grid works correctly in IE 8 but doesnt work on Chrome

    Hi,

    I have a Editable grid, where the first column is a radio button column where I have written code for single radio button selection at a time.
    The code for the same is mentioned below. The below code works fine on IE 8 , but it is not working on chrome.

    While debugging, I observed that the break point at Render and After Render functions are not hit consistently in chrome, while on IE is consistently hit and the radio button gets focused correctly every time user selects a radio button.

    Can you please take a look and suggest?

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            var actionPerformed = false;
    
            var rdoPrimaryRender = function () {
                this.focus();
            };
    
            var rdoPrimaryAfterRender = function () {
                setTimeout(function () {
                    this.focus();
                }, 0.0001);
            }
    
            var OnRadioButtonChange = function (rdbtnPrimaryContact, grdAssignedUsers) {
                actionPerformed = true;
                setTimeout(function () {
                    for (var i = 0; i < grdAssignedUsers.getStore().data.length; i++) {
                        var element = Ext.get(grdAssignedUsers.getView().getRow(i));
                        var record = grdAssignedUsers.getStore().getAt(i);
                        record.set("PrimaryContact", false);
                    }
                    this.focus();
                }, 0.5);
            };
         
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager2" runat="server" />
        <div>
            <ext:Store ID="AssignedUsersStore" runat="server" WarningOnDirty="false" AutoLoad="true">
                <Proxy>
                    <ext:HttpProxy Url="/Company/GetAssignedUsers" />
                </Proxy>
                <Reader>
                    <ext:JsonReader IDProperty="ID" Root="data" TotalProperty="total">
                        <Fields>
                            <ext:RecordField Name="ID" />
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="PrimaryContact" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
                <BaseParams>
                    <ext:Parameter Name="departmentID" Value='SelectedDepartmentID'
                        Mode="Raw" />
                </BaseParams>
                <Listeners>
                </Listeners>
            </ext:Store> 
            <ext:FormPanel runat="server" ID="pnlSample" Width="500" Height="400">
                <Items>
                    <ext:GridPanel runat="server" ID="grdAssignedUsers" EnableDragDrop="true" Title="AssignedDepartmentUser"
                        AutoExpandColumn="Name" DDGroup="secondGridDDGroup" IDMode="Explicit" StoreID="AssignedUsersStore"
                        StripeRows="true" EnableColumnHide="false">
                        <ColumnModel ID="cmodAssignedUsers" runat="server">
                            <Columns>
                                <ext:Column ColumnID="PrimaryContact" Header="PrimaryContact" DataIndex="PrimaryContact">
                                    <Editor>
                                        <ext:Radio ID="rdbtnPrimaryContact" runat="server">
                                            <Listeners>
                                                <Render Fn="rdoPrimaryRender" />                                             
                                                <AfterRender Fn="rdoPrimaryAfterRender" />                                                                     
                                                <Check Handler="OnRadioButtonChange(#{rdbtnPrimaryContact},#{grdAssignedUsers});" />
                                            </Listeners>
                                        </ext:Radio>
                                    </Editor>
                                </ext:Column>
                                <ext:Column Width="100" ColumnID="UserFullName" Header="UserFullName" Tooltip="UserFullName"
                                    AutoDataBind="true" DataIndex="Name" />
                                <ext:Column Width="100" ColumnID="UserID" Header="ID" AutoDataBind="true" DataIndex="ID"
                                    Hidden="true" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
                        </SelectionModel>
                        <View>
                            <ext:GridView ForceFit="true" />
                        </View>
                        <Plugins>
                            <ext:EditableGrid ID="eg1" runat="server" />
                            <ext:GridFilters runat="server" ID="GridFilters2">
                                <Filters>
                                    <ext:StringFilter DataIndex="Name" />
                                </Filters>
                            </ext:GridFilters>
                        </Plugins>
                    </ext:GridPanel>                                
                </Items>
            </ext:FormPanel>
        </div>
        </form>
    </body>
    </html>
    Last edited by Daniil; Feb 19, 2013 at 3:32 AM. Reason: [CLOSED]
  2. #2
    Hi @Aparna B,

    I found many links where the people talk about the problem of focusing a radio in Chrome. So, I am not sure there is a possibility to get the same behavior as it is in IE.

    But could you clarify the requirement? Why do you need a radio to be focused?
  3. #3

    Render functions for Radio Button in Editable Grid works correctly in IE 8 but doesnt work on Chrome

    Quote Originally Posted by Daniil View Post
    Hi @Aparna B,

    I found many links where the people talk about the problem of focusing a radio in Chrome. So, I am not sure there is a possibility to get the same behavior as it is in IE.

    But could you clarify the requirement? Why do you need a radio to be focused?
    Hi Danil,

    Thanks for your response.

    If you run the example which I have given, you will find that I am using the editor and Radio button inside the editor to achieve the functionality of a checkcolumn (single selection) but with radio buttons instead. Its working fine in IE but not in chrome.

    Do you suggest a cleaner approach to achieve the same functionality?
    Could you provide an example where I can have a grid with first column as single select radio button column? (Which would work in IE/Firefox/Chrome)

    Regards.
  4. #4
    I can't run your example because I don't have "/Company/GetAssignedUsers".

    But I run my similar test case.

    Seems it works likewise in IE, Chrome and FireFox without Radio listeners in the test case below.

    Please clarify why did you set Render, AfterRender, Check listeners?

    Also it seems that there is no way to uncheck a Radio. So, I don't understand well why you use a Radio for editing.

    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[] { false, "test2", "test3" },
                    new object[] { true, "test5", "test6" },
                    new object[] { false, "test8", "test9" },
                };
                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>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1">
                        <Editor>
                            <ext:Radio runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:EditableGrid runat="server" />
            </Plugins>
        </ext:GridPanel>
    </body>
    </html>
  5. #5

    Render functions for Radio Button in Editable Grid works correctly in IE 8 but doesnt work on Chrome

    Click image for larger version. 

Name:	Need single select.jpg 
Views:	111 
Size:	9.1 KB 
ID:	5597

    Hi Danil,

    I tried the example which you have posted, but in your example I can select the radio button in every row, which would make every row selected.
    Please check the attached image where every record can be selected.

    But what I want to achieve is, a single select radio column, ie in the entire column, the user must be able to select only one radio button at a time.
    Similar to checkbox selection model with SingleSelect = true, I need something similar to a radio selection model.
    Is it possible for you to share an example for that?

    Regards.
  6. #6
    I can suggest you the following solution.

    If you need Radios instead of Checkboxes you can override the default CSS rules of the CheckColumn. There are just images.

    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", false, "test3" },
                    new object[] { "test4", false, "test6" },
                    new object[] { "test7", false, "test9" },
                };
                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 onBeforeEdit = function (e) {
                var store = e.grid.getStore(),
                    allow = true;
                
                if (!e.value) {
                    store.each(function (r) {
                        if (r.data.test2) {
                            allow = false;
                            return false;
                        }
                    });
                }
    
                return allow;
            };
        </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="test1" />
                                    <ext:RecordField Name="test2" />
                                    <ext:RecordField Name="test3" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" />
                        <ext:CheckColumn Header="Single check" DataIndex="test2" Editable="true" />
                        <ext:Column Header="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <BeforeEdit Fn="onBeforeEdit" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  7. #7

    Render functions for Radio Button in Editable Grid works correctly in IE 8 but doesnt work on Chrome

    Hi Danil,

    Thanks for your response.

    I tried the example that you have posted, I am able to select only one record, but not able to change my selection.
    We need only one record to be selected at a given time, but I want to be able to change my selection.

    For example if I select the first record and try to select second record, the first record selection must get de-selected.
    Thus at any given time any one record would be selected.

    Also you have mentioned - "If you need Radios instead of Checkboxes you can override the default CSS rules of the CheckColumn. There are just images."
    I do not have much idea on CSS, could you please provide examples for Single select radio column along with CSS override to make it look like radio buttons?

    Thanks in advance.

    Regards.
  8. #8
    Here you are.

    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", false, "test3" },
                    new object[] { "test4", false, "test6" },
                    new object[] { "test7", false, "test9" },
                };
                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>
    
        <style type="text/css">
            .x-grid3-col-RadioColumn .x-grid3-check-col {
                background-image: url("unchecked-radio.png");
            }
    
            .x-grid3-col-RadioColumn .x-grid3-check-col-on {
                background-image: url("checked-radio.png");
            }
        </style>
     
        <script type="text/javascript">
            var onBeforeEdit = function (e) {
                e.grid.getStore().each(function (record) {
                    record.data.test2 = false;
                });
            };
        </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="test1" />
                                    <ext:RecordField Name="test2" />
                                    <ext:RecordField Name="test3" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" />
    
                        <ext:CheckColumn 
                            ColumnID="RadioColumn" 
                            Header="Single check" 
                            DataIndex="test2" 
                            Editable="true"  />
    
                        <ext:Column Header="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <BeforeEdit Fn="onBeforeEdit" />
                    <AfterEdit Handler="e.grid.getView().refresh();" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  9. #9

    Render functions for Radio Button in Editable Grid works correctly in IE 8 but doesnt work on Chrome

    Hi Danil,

    Click image for larger version. 

Name:	RadioImageNotShowing.jpg 
Views:	97 
Size:	10.0 KB 
ID:	5623

    I tried the example that you have posted, but I am not able to see the Radio buttons in place of Check Boxes, It is empty. (please check attachment)
    Is it not able to locate the complete image? Do we need to give the complete URL in while CSS override? Please suggest.

    For example : The complete URL for check box (checked) is

    url(/extjs/resources/images/default/menu/checked-gif/ext.axd)

    Cna you please let me know if we need to mention the full URL for Radio image in the below statement.
    background-image: url("unchecked-radio.png");

    If not, what could be the issue? Please suggest.

    Regards.
  10. #10
    If you run exactly my example, then you should put the images at the same place where the page is.

Similar Threads

  1. 2 functions in the render event
    By DiegoTc in forum 1.x Help
    Replies: 1
    Last Post: Dec 12, 2012, 11:17 AM
  2. Replies: 7
    Last Post: Aug 27, 2012, 8:04 AM
  3. Replies: 2
    Last Post: Jun 19, 2012, 1:19 PM
  4. Replies: 10
    Last Post: Dec 20, 2011, 9:33 PM
  5. AJAX Method doesnt work
    By hbaraza in forum 1.x Help
    Replies: 1
    Last Post: Jan 15, 2009, 11:20 AM

Tags for this Thread

Posting Permissions