[CLOSED] EditableGrid Plugin bug

  1. #1

    [CLOSED] EditableGrid Plugin bug

    I have the following scenario in my application:

    1 - There is a screen with a grid on it. In this grid there is an editable dropdownlist.
    2 - The user can change the value of some of it's items and then click a button.
    3 - When the button is clicked, the items which the values were changed are removed from the grid (i make another databind for it).

    The problem is that if the focus is on the last dropdown of the last row of the grid and it's removed, i get a javascript error. I guess it is trying to place the focus on this row, and since it doesn't exist anymore i get the error.

    To reproduce, run the source below, click on the button "Databind". The grid will be loaded with values. Then, change the value of the dropdown of the last row and without removing the focus, click "Processar". A javascript error will occur. If you do the same eith the focus in another row, there is no error.

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ 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 id="Head1" runat="server">
        <title>Untitled Page</title>
    
        <script runat="server">
            protected override void OnLoad(EventArgs e)
            {
                base.OnLoad(e);
                btTesteDataBind.DirectClick += new ComponentDirectEvent.DirectEventHandler(btTesteDataBind_DirectClick);
                btTesteProcessar.DirectClick += new ComponentDirectEvent.DirectEventHandler(btTesteProcessar_DirectClick);
                btTesteProcessar.DirectEvents.Click.EventMask.ShowMask = true;
            }
    
            void btTesteProcessar_DirectClick(object sender, DirectEventArgs e)
            {
                storeAprovacoes.DataSource = new object[]
               { 
                   new { Descricao = "Item 1"},
                   new { Descricao = "Item 2"},
                   new { Descricao = "Item 3"},
                   new { Descricao = "Item 4"}                       
               };
                storeAprovacoes.DataBind();
            }
    
            void btTesteDataBind_DirectClick(object sender, DirectEventArgs e)
            {
                storeAprovacoes.DataSource = new object[]
               { 
                   new { Descricao = "Item 1"},
                   new { Descricao = "Item 2"},
                   new { Descricao = "Item 3"},
                   new { Descricao = "Item 4"},
                   new { Descricao = "Item 5"}                           
               };
                storeAprovacoes.DataBind();
            }
        
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server" ID="rm1">
            </ext:ResourceManager>
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:GridPanel ID="grdAprovacoes" runat="server" SkinID="PadraoFit" EnableViewState="false">
                        <TopBar>
                            <ext:Toolbar runat="server" ID="tb1">
                                <Items>
                                    <ext:Button ID="btTesteDataBind" Text="Databind" runat="server">
                                    </ext:Button>
                                    <ext:Button ID="btTesteProcessar" Text="Processar" runat="server">
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <Store>
                            <ext:Store ID="storeAprovacoes" runat="server" EnableViewState="false">
                                <Reader>
                                    <ext:JsonReader>
                                        <Fields>
                                            <ext:RecordField Name="StatusAprov" Type="String" />
                                            <ext:RecordField Name="Descricao" Type="String" />
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server" EnableViewState="false">
                            <Columns>
                                <ext:Column Width="85" DataIndex="StatusAprov" Header="Apr/Rep/Canc" Fixed="true"
                                    Locked="true" Hideable="false" Groupable="true">
                                    <Editor>
                                        <ext:ComboBox ID="cmbStatusAprov" runat="server" Editable="false" ForceSelection="false"
                                            EnableViewState="false">
                                            <Items>
                                                <ext:ListItem Text="&nbsp;" Value="" />
                                                <ext:ListItem Text="Aprovado" Value="Aprovado" />
                                                <ext:ListItem Text="Reprovado" Value="Reprovado" />
                                                <ext:ListItem Text="Cancelado" Value="Cancelado" />
                                            </Items>
                                            <Listeners>
                                                <%--<Select Handler="StatusAprov_Change(#{cmbStatusAprov});" />--%>
                                                <%--<Change Handler="StatusAprov_Change(#{cmbStatusAprov});" />--%>
                                            </Listeners>
                                        </ext:ComboBox>
                                    </Editor>
                                </ext:Column>
                                <ext:Column DataIndex="Descricao" Header="Descricao">
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <Plugins>
                            <ext:EditableGrid ID="EditableGrid1" runat="server" />
                        </Plugins>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
    Last edited by Daniil; Oct 27, 2011 at 6:53 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I was unable to reproduce following the steps you provided.

    What Ext.Net version do you use?
  3. #3
    1.0.4104.30921
  4. #4
    Can you upgrade to Ext.Net 1.2? It's fixed there.
  5. #5
    No, because i would have to homologate the whole application again.
    There was another time when i detected a bug and you provided me some javascript to override the wrong behaviour and fix the bug only for the screen. Could you provide me some similar code? Thanks in advance.
  6. #6
    Hmm, I was unable to reproduce the problem using the official Ext.Net release.

    I follow exactly these steps:
    To reproduce, run the source below, click on the button "Databind". The grid will be loaded with values. Then, change the value of the dropdown of the last row and without removing the focus, click "Processar". A javascript error will occur.
    Please clarify do you use the official Ext.Net 1.0 release which was available to download from our site?

    If not, can you say what SVN revision is the last one?

    What browser do you test with?
  7. #7
    I don't know, i only have the dlls. The last time we updated from SVN was around the end of march/2011. Send you the dlls or the javascript message would be of any help?
  8. #8
    Yes, please send the dlls on support@object.net.
  9. #9
    Just sent. Please, take a look.
  10. #10
    Thanks.

    To fix please:

    1. Add the BeforeRefresh listener for a GridView:

    Markup or Code behind
    <ext:GridView runat="server">
        <Listeners>
            <BeforeRefresh Fn="onBeforeRefresh" Single="true" />
        </Listeners>
    </ext:GridView>
    2. Add the following script on a page:

    JavaScript

    <script type="text/javascript">
        var fixedRenderEditors = function (startRow, endRow) {
            var args = [startRow, 0],
                cols = this.cm.getColumnCount(),
                col, row, ed, w = [], rec, r, di, cell;                
    
            for (col = 0; col < cols; col++) {
                w[col] = this.cm.getColumnWidth(col) - this.editorPadding;
            }
    
            for (row = startRow; row <= endRow; row++) {
                r = [];
                rec = this.ds.getAt(row);
                for (col = 0; col < cols; col++) {
                    ed = this.cm.isCellEditable(col, row) ? this.getCellEditor(col, row) : null;
    
                    if (ed) {
                        cell = this.getCell(row, col).firstChild;
                        cell.parentNode.removeAttribute('tabindex');
                        cell.innerHTML = '';
                        di = this.cm.getDataIndex(col);
                        ed = ed.field.cloneConfig({
                            id: Ext.id(),
                            value: rec.get(di),
                            grid:{
                                grid   : this.grid,
                                record : rec,
                                cell   : cell,
                                dataIndex : di,
                                col : col,
                                row : row
                            },
                            width    : w[col],
                            renderTo : cell,
                            ctCls    : 'x-small-editor x-grid-editor ux-editable-grid'
                        });
                        ed.on('blur', this.onEditorBlur, {
                            store: this.ds,
                            row: row,
                            dataIndex: di
                        }, {                            
                            delay : 100 
                        });
                        ed.on('specialkey', this.onEditorSpecialKey, {
                            view : this,                                
                            row  : row,
                            col  : col
                        });
                        ed.mon(ed.el, 'mousedown', function(e) {
                            this.view.editorFocus.row = this.row;
                            this.view.editorFocus.col = this.col;
                        }, {
                            row : row,
                            col : col,
                            view  : this
                        });
                        ed.on('focus', function(e) {
                            this.view.editorFocus.row = this.row;
                            this.view.editorFocus.col = this.col;
                        }, {
                            row  : row,
                            col  : col,
                            view : this
                        });
                    }
                    r.push(ed);
                }
                args.push(r);
            }
            this.editors.splice.apply(this.editors, args);
    
            if (this.editorFocus && Ext.isDefined(this.editorFocus.row) && Ext.isDefined(this.editorFocus.col)
                && this.editors[this.editorFocus.row] && this.editors[this.editorFocus.row][this.editorFocus.col]) {
                this.editors[this.editorFocus.row][this.editorFocus.col].focus(false, 10);
            }
        };
    
        var onBeforeRefresh = function () {
            this.renderEditors = fixedRenderEditors.createDelegate(this);
        };
    </script>

Similar Threads

  1. How to disable column of EditableGrid Plugin
    By abhijit in forum 1.x Help
    Replies: 2
    Last Post: Mar 06, 2012, 4:26 AM
  2. Replies: 2
    Last Post: Sep 19, 2011, 2:05 PM
  3. [CLOSED] Focus Problem in EditableGrid Plugin
    By kemalyigit in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 18, 2011, 6:00 PM
  4. [CLOSED] EditableGrid Plugin - Problem using Tab key
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 09, 2010, 1:59 PM
  5. [CLOSED] [1.0] EditableGrid Plugin Error
    By ashton.lamont in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Feb 26, 2010, 1:14 PM

Posting Permissions