[CLOSED] Editable Grid is not showing last changed combobox info

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Editable Grid is not showing last changed combobox info

    Hi,

    The last changed value either in textfield or combobox in editable grid is also saving if we add "Delay="100". It is working only if the form in main window. If I am going to open it in popup window the combobox changed information is not working, because the cursor not moving away from combobox even after clicking update button.

    see the example code here ...

    Base form...
    <%@ Page Language="C#" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
     
    </script>
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script language="javascript" type="text/javascript">
            var openWindowToEdit = function () {
                //alert(url);
                var windowConfig = {
                    id: "WinGridInfo",
                    height: 250,
                    width: 500,
                    hidden: false,
                    buttonAlign: "center",
                    closeAction: "hide",
                    title: "Edit Grid",
                    buttons: [
                        {
                            id: "btnUpdateInfo",
                            text: "Update",
                            listeners: {
                                click: {
                                    fn: function (el, e) {
                                        parent.parent.Ext.getCmp('WinGridInfo').getBody().btnSaveChanges.fireEvent('click');
                                    }
                                }
                            }
                        },
                        {
                            id: "btnClose",
                            text: "Close",
                            listeners: {
                                click: {
                                    fn: function (el, e) {
                                        parent.Ext.getCmp('WinGridInfo').hide();
                                    }
                                }
                            }
                        }
                    ],
                    autoLoad: {
                        url: "ExtEditableGridTest.aspx?" + new Date().getTime(),
                        nocache: true,
                        mode: "iframe",
                        showMask: true,
                        triggerEvent: "show",
                        reloadOnEvent: true
                    }
                }
                renderWindow(windowConfig);
            }
     
            var renderWindow = function (windowConfig) {
                var win = Ext.getCmp(windowConfig.id);
                if (!win) {
                    new Ext.Window(windowConfig);
                } else {
                    win.close();
                    new Ext.Window(windowConfig);
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <div>
        <ext:button id="btnOpenGridwindow" runat="server" OnClientClick="openWindowToEdit()" Text="Open Grid to Edit"></ext:button>
        </div>
        </form>
    </body>
    </html>
    the popup window code is...

    <%@ 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)
            {
                cboValue.Items.Add(new Ext.Net.ListItem("val1", "1"));
                cboValue.Items.Add(new Ext.Net.ListItem("val2", "2"));
                cboValue.Items.Add(new Ext.Net.ListItem("val3", "3"));
                cboValue.Items.Add(new Ext.Net.ListItem("val4", "4"));
                 
                //this.Store1.DataSource = new object[] 
                //{ 
                //    new object[] { "1","test1", "2", "test3" },
                //    new object[] { "2","test4", "test5", "test6" },
                //    new object[] { "3","test7", "4", "test9" },
                //    new object[] { "4","test10", "test11", "test12" }
                //};
                //this.Store1.DataBind();
     
                this.Store1.DataSource = GetDataInfo();
                this.Store1.DataBind();                
            }
        }
     
        public DataTable GetDataInfo()
        {
            DataTable dt = new DataTable();
            DataRow dr;
            dt.Columns.Add("TestID");
            dt.Columns.Add("test1");
            dt.Columns.Add("test2");
            dt.Columns.Add("test3");
     
            dr = dt.NewRow();
            dr[0] = "1";
            dr[1] = "test1";
            dr[2] = "2";
            dr[3] = "test3";
            dt.Rows.Add(dr);
     
            dr = dt.NewRow();
            dr[0] = "2";
            dr[1] = "test4";
            dr[2] = "test5";
            dr[3] = "test6";
            dt.Rows.Add(dr);
             
            return dt;
        }
         
      
        protected void Store_BeforeStoreChanged(object sender, BeforeStoreChangedEventArgs e)
        {
            string jsonData = e.DataHandler.JsonData;
            X.Msg.Alert("Saved", jsonData).Show();
        }
    </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 id="Head1" runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store
                        ID="Store1"
                        runat="server"
                        RefreshAfterSaving="None"
                        OnBeforeStoreChanged="Store_BeforeStoreChanged">
                        <Reader>
                            <ext:JsonReader>
                                <Fields>
                                    <ext:RecordField Name="TestID" />
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                    <ext:RecordField Name="test3" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1">
                            <Editor>
                                <ext:TextField ID="TextField1" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Test2" DataIndex="test2">
                            <Editor>
                                <ext:ComboBox ID="cboValue" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Test3" DataIndex="test3">
                            <Editor>
                                <ext:TextField ID="TextField3" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:CommandColumn Width="40">
                            <Commands>
                                <ext:GridCommand Text="Reject" ToolTip-Text="Reject row changes" CommandName="taskreject" Icon="ArrowUndo" />
                            </Commands>
                            <PrepareToolbar Handler="toolbar.items.get(0).setVisible(record.dirty);" />
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <Command Handler="record.reject();" />
                </Listeners>
                <Plugins>
                    <ext:EditableGrid ID="EditableGrid1" runat="server" />
                </Plugins>
                <View>
                    <ext:GridView ID="GridView1" runat="server" ForceFit="true" />
                </View>
            </ext:GridPanel>
            <div style="display:none">
            <ext:Button ID="btnSaveChanges" runat="server" Text="Save">
                <Listeners>
                    <Click Handler="GridPanel1.save();"  Delay="100"/>
                </Listeners>
            </ext:Button>
            </div>
        </form>
    </body>
    </html>
    Last edited by Daniil; Dec 11, 2011 at 6:20 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Iframe ignores any events of its parents and any other iframes.
  3. #3
    Hi Daniil,

    If it is the case why it is saving last changed value in case of TextField? I have tested by added some text for textField and then click on update the reject button is showing up and the last entered information in textfield is saving.

    Quote Originally Posted by Daniil View Post
    Hi,

    Iframe ignores any events of its parents and any other iframes.
  4. #4
    ComboBox uses emulation of blur (instead native blur in TextField) because it must prevent blur when you click on trigger and drop down list.
    Combo listens click event out of its elements (input field, trigger field, dropdown field) to emulate blur
    Therefore if you click outside an iframe then combo will not able to track click event to fire blur event

    EditableGrid pluging triggers store updating after blur event of a field only

    IMHO, it is strange design to have grid inside iframe but initiate saving outside that iframe (you couple two pages), can provide more details about such design?
    As workaround, you can set focus on another element in the same iframe before saving
  5. #5
    Quote Originally Posted by Vladimir View Post
    ComboBox uses emulation of blur (instead native blur in TextField) because it must prevent blur when you click on trigger and drop down list.
    Combo listens click event out of its elements (input field, trigger field, dropdown field) to emulate blur
    Therefore if you click outside an iframe then combo will not able to track click event to fire blur event

    EditableGrid pluging triggers store updating after blur event of a field only

    IMHO, it is strange design to have grid inside iframe but initiate saving outside that iframe (you couple two pages), can provide more details about such design?
    As workaround, you can set focus on another element in the same iframe before saving
    What is your email...I will send you a screen shot that provides a little more clarity on the design.
  6. #6
    Please clarify why can't you post a screen-shot directly here? Is there any privacy information?

    If so, we would prefer to don't get a screen-shot on our e-mail as well.

    Generally, your design is clear, just we would try to avoid such design placing a save button on the same page where a grid is.

    Anyways the following should solve the problem:
    As workaround, you can set focus on another element in the same iframe before saving
  7. #7
    Hi Daniil,

    Please check the attachment. The approach I have given in the screenshot need in lots of places in my project. Actually you will get this screenshot if you run the example code given earlier.

    Click image for larger version. 

Name:	EditableGrid.PNG 
Views:	77 
Size:	35.4 KB 
ID:	3558

    Quote Originally Posted by Daniil View Post
    Please clarify why can't you post a screen-shot directly here? Is there any privacy information?

    If so, we would prefer to don't get a screen-shot on our e-mail as well.

    Generally, your design is clear, just we would try to avoid such design placing a save button on the same page where a grid is.

    Anyways the following should solve the problem:
  8. #8
    Thanks, it's clear.
  9. #9
    Quote Originally Posted by Daniil View Post
    Thanks, it's clear.
    So what can we do to solve our problem? Click image for larger version. 

Name:	issue.jpg 
Views:	43 
Size:	81.5 KB 
ID:	3560
  10. #10
    Please re-read the post #6.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] How to update all updated grid info in Editable Grid?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 06, 2011, 3:56 PM
  2. [CLOSED] Editable Grid is not showing changed info.
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 06, 2011, 3:40 PM
  3. Editable grid with Combobox focus problem
    By dtamils in forum 1.x Help
    Replies: 3
    Last Post: Jun 27, 2011, 9:01 AM
  4. Editable grid with Combobox
    By dtamils in forum 1.x Help
    Replies: 0
    Last Post: Jun 23, 2011, 7:36 AM
  5. Replies: 3
    Last Post: Jun 03, 2011, 12:10 PM

Tags for this Thread

Posting Permissions