[CLOSED] Missing null check on cell (4.2.1)

  1. #1

    [CLOSED] Missing null check on cell (4.2.1)

    Support,

    Please add a null check here. i cant always replicate but this occurs when to drag it, but your selection of the cell is like on a column line. you can cause the cell to be null.

    I found this also on 3.2.1. The JS error then causes a host of other issues such as loaders not firing.

    To replicate this
    1. load page.
    2. paginate to page two.
    3. starting at the 3-4 row, drag a cell diagonally to the right (and down).
    4. where you release it, click again and drag diagonally to the left (and down)
    5. just zigzag all the way down to the bottom until error shows
    (if it doesnt show, just paginate to next page and try again.
    (steps 3-5 doesnt be done very fast)

    thanks,
    /Z

    ext.net code
    Ext.define('Ext.ux.CellDragDrop', {
        override: 'Ext.ux.CellDragDrop',
    
    
        
        notSupportedText: "The cell from a Column without a DataIndex cannot be used for drag&drop",
    
    
        // This whole block needed to be reproduced in order to add bugfixes for
        // github issue #899.
        onViewRender: function (view) {
            var me = this,
                scrollEl;
    
    
            if (me.enableDrag) {
                if (me.containerScroll) {
                    scrollEl = view.getEl();
                }
    
    
                me.dragZone = new Ext.view.DragZone({
                    view: view,
                    ddGroup: me.dragGroup || me.ddGroup,
                    dragText: me.dragText,
                    containerScroll: me.containerScroll,
                    scrollEl: scrollEl,
                    notSupportedText: me.notSupportedText, // #899
                    getDragData: function (e) {
                        var view = this.view,
                            item = e.getTarget(view.getItemSelector()),
                            record = view.getRecord(item),
                            cell = e.getTarget(view.getCellSelector()),
                            dragEl, header;
    
    
                        if (item) {
                            dragEl = document.createElement('div');
                            dragEl.className = 'x-form-text';
                            dragEl.appendChild(document.createTextNode(cell.textContent || cell.innerText));
    
    
                            header = view.getHeaderByCell(cell);
                            return {
                                event: new Ext.EventObjectImpl(e),
                                ddel: dragEl,
                                item: e.target,
                                columnName: header.dataIndex,
                                record: record
                            };
                        }
                    },

    aspx
    <%@ Page Language="C#" %>
    <%@ 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  lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head" runat="server">
        <title>Search </title>    
    
    
    
    
        <script runat="server">
    
    
    
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.GridPanelTest.Store.Primary.DataSource = Enumerable.Range(0, 1000).Select(i => new object[]
                {
                    i,
                    i,
                    i
                });
    
    
    
    
                this.GridPanelTest.Store.Primary.DataBind();
            }
        }
    
    
    
    
    
    
    
    
    </script>
        <script type="text/javascript">
            var commandHandler = function (cmd, data, grid, record) {
    
    
    
    
            };
    
    
    
    
            var onAfterRenderDragAndDrop = function (view) {
                var cellDragDrop;
    
    
    
    
                Ext.Array.each(view.getPlugins()[0], function (plugin) {
                    if (plugin instanceof Ext.ux.CellDragDrop) {
                        cellDragDrop = plugin;
                        return false;
                    }
                });
    
    
    
    
                if (cellDragDrop.dragZone) {
                    cellDragDrop.dragZone.onBeforeDrag = function (data, e) {
                        if (!data.columnName) { // It means no DataIndex
                            return false;
                        }
                    }
                }
            };
    
    
    
    
            var notifyOver2 = function (ddSource, e, data) {
                return this.dropAllowed;
            };
    
    
    
    
            var notifyDrop2 = function (ddSource, e, data) {
                return true;
            };
    
    
    
    
            var prepareCreate1 = function (grid, toolbar, rowIndex, record) {
                var firstButton = toolbar.items.get(0);
                if (record.data.startTestData.indexOf('N') >= 0) {
                    firstButton.setVisible(true);
                } else {
                    firstButton.setVisible(false);
                }
            };
        </script>
    
    
    
    
    
    
    
    
    </head>
    <body>
        <form id="FormSearch" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server"/>
    
    
    
    
            <ext:DropTarget ID="DropTarget2"
                                runat="server"      
                        Target="={Ext.getCmp('GridPanelTest').getView()}"
                        Group="ddGroup" >        
    
    
    
    
                <NotifyDrop Fn="notifyDrop2" />
                <NotifyOver Fn="notifyOver2" />
            </ext:DropTarget>
    
    
    
    
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">          
                <Items>  
                    <ext:GridPanel 
                        ID="GridPanelTest" 
                        runat="server" 
                        Title="Test Defect" 
                        Layout="FitLayout">
                        <Store>
                            <ext:Store  ID="StoreTest"
                                        runat="server"
                                        RemoteSort="false"
                                        AutoLoad="false"
                                        >
                                <Proxy>
                                    <ext:AjaxProxy  Url="/ta/Support/GetData/" Timeout="60000" >
                                        <ActionMethods READ="GET" />
                                        <Reader>
                                            <ext:JsonReader IDProperty="id" RootProperty="data" TotalProperty="total"/>
                                        </Reader>
                                    </ext:AjaxProxy>
                                </Proxy>
                                <Model>
                                    <ext:Model ID="Model1" IDProperty="id" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="id" Type="Int" />
                                            <ext:ModelField Name="startTestData" Type="String" />
                                            <ext:ModelField Name="endTestData" Type="String" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModelSea" runat="server">
                            <Columns>
                                <ext:Column ID="Column1" runat="server" Text="Time In" DataIndex="startTestData" >
                                    <Editor>
                                        <ext:TextField ID="TextField1" runat="server" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ID="Column2" runat="server" Text="Time Out"  DataIndex="endTestData">
                                    <Editor>
                                        <ext:TextField ID="TextField2" runat="server" />
                                    </Editor>
                                </ext:Column>
                                <ext:CommandColumn ID="CommandColumn1" runat="server" Width="35">
                                    <Commands>
                                        <ext:GridCommand CommandName="Create1" Icon="CalendarAdd">
                                            <ToolTip Text="Create 1" />
                                        </ext:GridCommand>
                                    </Commands>
                                    <PrepareToolbar Fn="prepareCreate1" />             
                                    <Listeners>
                                        <Command Handler="commandHandler(command, record.data, GridPanelTest, record);" />
                                    </Listeners>
                                </ext:CommandColumn>
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:CellSelectionModel ID="CellSelectionModel1" runat="server" />
                        </SelectionModel>
                        <Plugins>
                            <ext:CellEditing ID="CellEditing1" Enabled="true"  ClicksToEdit="1" runat="server" />
                        </Plugins>
                        <View>
                            <ext:GridView ID="GridView7" runat="server" StripeRows="true">
                                <Plugins>
                                    <ext:CellDragDrop ID="CellDragDrop1" runat="server" ApplyEmptyText="true" EnforceType="true" DDGroup="ddGroup" />
                                </Plugins>
                                <Listeners>
                                    <AfterRender Fn="onAfterRenderDragAndDrop" />
                                </Listeners>
                            </ext:GridView>
                        </View>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" 
                                runat="server" 
                                DisplayInfo="true" 
                                DisplayMsg="Displaying results {0} - {1} of {2}" 
                                EmptyMsg="No results to display">
                                <Items>
                                    
                                    <ext:Button runat="server" Text="load">
                                        <Listeners>
                                            <Click Handler="App.GridPanelTest.getStore().reload();" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="Button2" runat="server" Text="test">
                                        <Listeners>
                                            <Click Handler="App.StoreTest.getAt(1).set('endTestData', '5');" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonSaveExceptionPunches" runat="server" Text="Save" Icon="Disk">
                                        <ToolTips>
                                            <ext:ToolTip ID="ToolTip8" runat="server" Title="Save Timecard" Html="Click to Save your timecard data updates" />
                                        </ToolTips>
                                        <DirectEvents> 
                                            <Click 
                                                Url="/ta/Support/SaveData/" 
                                                Timeout="240000"
                                                CleanRequest="true" 
                                                Method="POST">
                                                <ExtraParams> 
                                                    <ext:Parameter Name="data" Value="#{StoreTest}.getChangedData()" Mode="Raw" Encode="true" />
                                                </ExtraParams> 
                                            </Click>    
                                        </DirectEvents>                                                     
                                    </ext:Button>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    controller
            public DirectResult SaveData(string id, FormCollection values, string startDate, string endDate)
            {
                DirectResult response = new DirectResult();
    
    
                Ext.Net.Store store = X.GetCmp<Ext.Net.Store>("StoreTest");
                StoreDataHandler dataHandler = new StoreDataHandler(values["data"]);
                ChangeRecords<TestData> data = dataHandler.BatchObjectData<TestData>();
    
    
                for (int i = 0; i < data.Updated.Count; i++)
                {
                    TestData testData = data.Updated[i];
    
    
                    //we want to remove the record since it is processed so we use the delete record option
                    ModelProxy record = store.GetById(testData.id);
                    store.Remove(record);
                    store.CommitRemoving(testData.id);
                }
    
    
                return response;
            }
    
    
            public ActionResult GetData()
            {
                List<TestData> l = new List<TestData>();
                for (int i = 0; i < 2000; i++)
                {
                    TestData t = new TestData();
                    t.id = i;
                    t.startTestData = "test_" + i;
                    t.endTestData = "test_" + i;
                    l.Add(t);
                }
    
    
    
    
                var query = l.Select(dt => new
                {
                    id = dt.id,
                    startTestData = dt.startTestData,
                    endTestData = dt.endTestData
                    
                }).OrderBy(d => d.id);
    
    
                return this.Store(query);
            
            }

    class
        public class TestData
        {
            public long id;
            public string startTestData;
            public string endTestData;
        }


    This is the error!
    SCRIPT5007: Unhandled exception at line 278, column 25 in http://localhost:57958/ta/WebResourc...32194011381635
    0x800a138f - JavaScript runtime error: Unable to get property 'textContent' of undefined or null reference
    Attached Thumbnails Click image for larger version. 

Name:	Untitled.png 
Views:	31 
Size:	56.2 KB 
ID:	24996  
    Last edited by fabricio.murta; Jun 27, 2017 at 1:46 PM.
  2. #2
    Hello @Z!

    By your description, does this issue need a remote page loading, a record removing functionality, and all that long code? Seems a lot of distraction on the real issue...

    Is the issue not reproducible if you don't use remote paging, maybe not using paging at all?
    Fabrício Murta
    Developer & Support Expert
  3. #3
    The test case is reproducible. Pls review it and resolve the exception. We cannot change our page design

    Thxs
    /Z
  4. #4
    You can close this. the issue was due to using VS2012. with VS2012 i was unable to use git to get the dlls. as such, there was some odd versioning issue even though all dlls were properly added.

    long and short. v4 doesnt work properly with VS2012.
    /Z
  5. #5
    Hello @Z!

    Alright, thanks for the feedback, we were really unable to help that one out, sorry.

    I strongly recommend you towards making a fresh, clean project (well, on VS2017) so that you can first install latest Ext.NET NuGet version, which then should work fine with just replacing DLLs (and maybe minor Web.config changes on version constraints).

    One thing I been seeing on your examples are the legacy:

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    Which is not needed on Ext.NET since 2.x (at some point, at least). Just letting you know, one line less on your code. :)
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Mar 27, 2013, 4:54 AM
  2. Replies: 4
    Last Post: Jan 19, 2012, 10:29 AM
  3. Replies: 2
    Last Post: Dec 15, 2010, 2:43 PM
  4. [CLOSED] GridPanel Cell click and check box selection
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jul 24, 2009, 7:55 AM
  5. Null record check in function?
    By Tbaseflug in forum 1.x Help
    Replies: 3
    Last Post: Apr 29, 2009, 7:54 PM

Posting Permissions