[OPEN] [#236] [2.2] Bug on RowExpander

  1. #1

    [OPEN] [#236] [2.2] Bug on RowExpander

    See screenshot:

    Click image for larger version. 

Name:	Untitled.jpg 
Views:	57 
Size:	97.9 KB 
ID:	6184

    The rowexpander cell has 1 colspan less than the necessary to fill the datagrid (which also has a CheckBoxSelection plugin, but I don't know if this have some influence on this bug).

    I've notice the following code on RowExpander.js (near line 242):

            // If we are lockable, the expander column is moved into the locked side, so we don't have to span it
            if (!me.grid.ownerLockable) {
                rowValues.rowBodyColspan = rowValues.view.getGridColumns().length - 1;
            }
    If I change the .length - 1 to .length, the problem is fixed (of course, updating also extnet-all-debug.js and extnet-all.js):

    Click image for larger version. 

Name:	Untitled.jpg 
Views:	42 
Size:	98.8 KB 
ID:	6185

    With the bug, in the last screenshot, the rowexpander html would have width = to the first two columns (which represents about 20% of total width, because the last column is ignored in the colspan setting)
    Last edited by Daniil; May 09, 2013 at 5:18 AM. Reason: [OPEN] [#236]
  2. #2
    Hello!

    Can you provide test case to reproduce? http://forums.ext.net/showthread.php?10205
  3. #3
    Sorry about that.

    Model & Controller:

    using System;
    using System.Collections.Generic;
    using System.Web.Mvc;
    
    namespace RowExpanderTestCase.Controllers
    {
    
    	public class Model
    	{
    		public Guid ID { get; set; }
    		public bool Active { get; set; }
    		public string Name { get; set; }
    	}
    
    	public class HomeController : Controller
    	{
    
    		public ActionResult Index()
    		{
    			return View();
    		}
    
    		public ActionResult GetData()
    		{
    			return Json(new List<Model>
    			{
    				new Model { ID = Guid.NewGuid(), Active = true, Name = "First row"},
    				new Model { ID = Guid.NewGuid(), Active = false, Name = "Second row"},
    			}, JsonRequestBehavior.AllowGet);
    		}
    
    		public ActionResult RowExpanderContent(Guid id)
    		{
    			return Content("<div style='width:100%;border:solid blue 1px;background:red;'><h1>" + id + "</h1></div>");
    		}
    
    	}
    }
    View:
    @{Layout = null;}
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
    	<title>Index</title>
    	@Html.X().ResourceManager().Theme(Theme.Neptune)
    </head>
    	<body>
    		@(Html.X().GridPanel()
    			.Layout(LayoutType.Fit)
    			.Store(Html.X().Store()
    					.Model(Html.X().Model()
    						.IDProperty("ID")
    						.Fields(
    							new ModelField("ID", ModelFieldType.Auto),
    							new ModelField("Active", ModelFieldType.Boolean),
    							new ModelField("Name", ModelFieldType.String)
    						)
    					)
    					.Proxy(Html.X().AjaxProxy()
    						.Url(Url.Action("GetData"))
    					)
    			)
    			.ColumnModel(
    				Html.X().BooleanColumn().DataIndex("Active").Text("Active").Flex(1),
    				Html.X().Column().DataIndex("Name").Text("Name").Flex(11)
    			)
    			.Plugins(
    				Html.X().RowExpander()
    					.Loader(Html.X().ComponentLoader()
    						.Url(Url.Action("RowExpanderContent"))
    						.Mode(LoadMode.Html)
    						.LoadMask(mask => mask.ShowMask = true)
    						.Params(new { id = JRawValue.From("this.record.getId()") })
    					)
    			)
    			.SelectionModel(new CheckboxSelectionModel())
    		)
    	</body>
    </html>
    Result:

    Click image for larger version. 

Name:	Untitled.png 
Views:	29 
Size:	42.2 KB 
ID:	6187

    By removind the SelectionModel(CheckBoxSelectionModel()), the result is correct:

    Click image for larger version. 

Name:	Untitled.png 
Views:	25 
Size:	38.7 KB 
ID:	6188
  4. #4
    Temporarily, use the following overriding:

    <script>
    	Ext.override(Ext.ux.RowExpander, {
    		getRowBodyFeatureData: function (record, idx, rowValues) {
    			var me = this;
    			me.self.prototype.setupRowData.apply(me, arguments);
    			// If we are lockable, the expander column is moved into the locked side, so we don't have to span it
    			if (!me.grid.ownerLockable) {
    				rowValues.rowBodyColspan = me.grid.getSelectionModel().selType == "checkboxmodel" ? rowValues.view.getGridColumns().length : rowValues.view.getGridColumns().length - 1;
    			}
    			rowValues.rowBody = me.getRowBodyContents(record);
    			rowValues.rowBodyCls = this.expander.recordsExpanded[record.internalId] ? '' : me.rowBodyHiddenCls;
    		}
    	});
    </script>
  5. #5
  6. #6
    Sencha opened a bug.

    We created an Issue to track this defect.
    https://github.com/extnet/Ext.NET/issues/236

Similar Threads

  1. RowExpander RowEditor
    By sharif in forum Examples and Extras
    Replies: 4
    Last Post: Nov 20, 2012, 7:47 AM
  2. [CLOSED] Combine RowExpander with TransformGrid
    By CarWise in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 11, 2012, 12:14 PM
  3. Image in RowExpander
    By reiben in forum 1.x Help
    Replies: 0
    Last Post: Nov 20, 2010, 3:32 PM
  4. [CLOSED] [1.0] RowExpander Bug
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 18, 2010, 8:43 AM
  5. RowExpander
    By mmiocev in forum 1.x Help
    Replies: 0
    Last Post: Apr 06, 2009, 12:56 PM

Tags for this Thread

Posting Permissions