[OPEN] [#259] Data Grid Row Editor

  1. #1

    [OPEN] [#259] Data Grid Row Editor

    Can a cell have a javascript renderer function on it when I use the row editor plug-in?

    I implemented the row editor on my data grid, and the page would crash when I tried to go into edit mode. I realized I had to remove the javascript renderer function for the row editor to work. Is this correct? Is this a limitation of the row editor?
    Last edited by Daniil; May 31, 2013 at 4:13 AM. Reason: [OPEN] [#259]
  2. #2
    Hello!

    Welcome to our forum!

    Can you provide test case to reproduce. I've tried the following example and it works fine:

    <%@ 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 List<object>
                {
                    new { 
                        Name = "Bill Foot", 
                        Email = "bill.foot@object.net", 
                        Start = new DateTime(2007, 2, 5), 
                        Salary = 37000, 
                        Active = true
                    },
                    new { 
                        Name = "Bill Little", 
                        Email = "bill.little@object.net", 
                        Start = new DateTime(2009, 6, 13), 
                        Salary = 53000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Jones", 
                        Email = "bob.jones@object.net", 
                        Start = new DateTime(2008, 10, 6), 
                        Salary = 70000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Train", 
                        Email = "bob.train@object.net", 
                        Start = new DateTime(2009, 5, 5), 
                        Salary = 68000, 
                        Active = true
                    },
                    new { 
                        Name = "Chris Johnson", 
                        Email = "chris.johnson@object.net", 
                        Start = new DateTime(2009, 1, 25), 
                        Salary = 47000, 
                        Active = true
                    }
                };
                
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
        
    <html>
    <head runat="server">
        
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 50000) ? "green" : "red", value);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>GridPanel with RowEditor Plugin</h1>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server"
                Width="600"
                Height="400"
                Frame="true"
                Title="Employees">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Sorters>
                            <ext:DataSorter Property="start" Direction="ASC" />
                        </Sorters>
                        <Model>
                            <ext:Model runat="server" Name="Employee">
                                <Fields>
                                    <ext:ModelField Name="name" ServerMapping="Name" Type="String" />
                                    <ext:ModelField Name="email" ServerMapping="Email" Type="String" />
                                    <ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Plugins>
                    <ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="false" />
                </Plugins>         
                <ColumnModel>
                    <Columns>
                        <ext:RowNumbererColumn runat="server" Width="25" />
                        <ext:Column runat="server"                         
                            Text="Name" 
                            DataIndex="name" 
                            Flex="1">
                            <Editor>
                                <ext:TextField runat="server" AllowBlank="false" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" Text="Email" DataIndex="email" Width="160">
                            <Editor>
                                <ext:TextField runat="server" AllowBlank="false" Vtype="email" />
                            </Editor>
                        </ext:Column>
                        <ext:NumberColumn
                            runat="server"
                            Text="Salary" 
                            DataIndex="salary" 
                            Format="$0,0">
                            <Renderer Fn="change"></Renderer>
                            <Editor>
                                <ext:NumberField 
                                    runat="server" 
                                    AllowBlank="false" 
                                    MinValue="1" 
                                    MaxValue="150000" 
                                    />
                            </Editor>
                        </ext:NumberColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>  
    </body>
    </html>
  3. #3

    Locked property

    I looked at your example. I realize now what's causing the problem. In my code, one of the columns I want to edit is locked. I had to set the first column to unlocked in order to bring up the row editor. With your sample, I can recreate my error if I set the first column to locked.

    The error occurs in the function, RenderColumnData, in EXT.NET. I attached a screen shot from EXT.NET with ScriptMode set to Debug.

    Click image for larger version. 

Name:	screenshot.jpg 
Views:	28 
Size:	82.0 KB 
ID:	6186
  4. #4
    Hello!

    Try to add the following overriding:

    <script>	
    	Ext.override(Ext.grid.RowEditor, {
    		renderColumnData: function (field, record, activeColumn) {
    			var me = this,
    				grid = me.editingPlugin.grid,
    				headerCt = grid.headerCt,
    				view = grid.view,
    				store = grid.store,
    				column = activeColumn || me.columns.get(field.id),
    				value = record.get(column.dataIndex),
    				renderer = column.editRenderer || column.renderer,
    				metaData,
    				rowIdx,
    				colIdx;
    			if (renderer) {
    				metaData = { tdCls: '', style: '' };
    				rowIdx = store.indexOf(record);
    				colIdx = headerCt.getHeaderIndex(column);
    				value = renderer.call(
    					column.scope || headerCt.ownerCt,
    					value,
    					metaData,
    					record,
    					rowIdx,
    					colIdx,
    					store,
    					view
    				);
    			}
    			field.setRawValue(value);
    			field.resetOriginalValue();
    		}
    	});
    </script>
    Last edited by Baidaly; May 09, 2013 at 5:46 PM.
  5. #5
    Hi,

    It is an ExtJS bug. I reported to Sencha.
    http://www.sencha.com/forum/showthread.php?263237

    Created an Issue to track it.
    https://github.com/extnet/Ext.NET/issues/235
  6. #6
    Hello!

    The issue appears to be fixed in the SVN trunk. Please update.

    However, we found another problem maybe related to this issue. Reported to Sencha.

    http://www.sencha.com/forum/showthread.php?264926
  7. #7
    Quote Originally Posted by Baidaly View Post
    However, we found another problem maybe related to this issue. Reported to Sencha.

    http://www.sencha.com/forum/showthread.php?264926
    Created a new Issue.
    https://github.com/extnet/Ext.NET/issues/259
  8. #8
    Sencha has opened a bug in their bug tracker.

Similar Threads

  1. [CLOSED] Mousewheel scrolling cause input data lost in grid editor
    By kwcitadmin in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 25, 2013, 2:07 AM
  2. [CLOSED] Grid Panel with Complex Data model and a ComboBox Editor
    By alscg in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 06, 2013, 11:03 PM
  3. Replies: 1
    Last Post: Mar 08, 2012, 2:52 PM
  4. [CLOSED] Grid Editor with Summary in data column [1.0]
    By pdcase in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 07, 2011, 9:13 AM
  5. Replies: 5
    Last Post: Jan 26, 2010, 5:46 PM

Tags for this Thread

Posting Permissions