Apr 05, 2017, 2:05 AM
[OPEN] [#1464] [4.2.0] Grid header not lineup with data column when tabbing through the row
Hi, I have a grid with many columns, to reproduce the issue, just open a window with narrow width. Tabbing through a raw automatically shifts columns into visible position, this is good. The issue is the header does not move with the column. I don't see this problem in 4.1. Any idea?
Thanks!
-szhang
Thanks!
-szhang
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net;
using Ext.Net.MVC;
namespace desktopTest4._2mvc.Controllers
{
public class FABHomeController : Controller
{
// GET: FABHome
public ActionResult Index()
{
return View();
}
[DirectMethod(ShowMask = true)]
public ActionResult CreateWindow()
{
var desktop = this.GetDesktop();
desktop.RemoveModule("add1-module");
return this.PartialExtView("_GridWin");
}
public ActionResult DataGridPanel()
{
return PartialView("_DataGridPanel");
}
public ActionResult LoadGridData()
{
var results = new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
};
return this.Store(results);
}
}
}
//index.cshtml
@using Ext.Net;
@using Ext.Net.MVC;
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET MVC Sample</title>
</head>
<body>
@(Html.X().ResourceManager())
<header>
<a href="http://ext.net/"><img src="http://speed.ext.net/identity/extnet-logo-large.png" class="logo"/></a>
</header>
@(
Html.X().Desktop()
.Modules(
Html.X().DesktopModule()
.ModuleID("add1-module")
.Shortcut(
Html.X().DesktopShortcut()
.Name("Render another module")
.Handler("OpenGridWin();")
.TextCls("x-long-label")
)
)
.DesktopConfig(
Html.X().DesktopConfig()
.ShortcutDragSelector(true)
.ShortcutDefaults(defaults =>
{
defaults.IconCls = "x-default-shortcut";
})
)
)
<script>
window.AppRoot = '@Url.Content("~")';
var OpenGridWin = function (winId)
{
Ext.net.DirectMethod.request({
url: window.AppRoot + 'FABHome/CreateWindow',
failure: function (result) {
Ext.Msg.alert("OnGridWindoError", result);
return false;
}
});
}
</script>
</body>
</html>
//_GridWin.cshtml
@{
var X = Html.X();
}
@(
X.DesktopModuleProxy()
.Module(
Html.X().DesktopModule().ModuleID("add1-module")
.AutoRun(true)
.Launcher(
Html.X().MenuItem()
.Icon(Icon.ApplicationEdit)
)
.Window(
Html.X().Window()
.Width(500)
.Height(500)
.Layout(LayoutType.Fit)
.CloseAction(CloseAction.Destroy) //won't keep state when it is open again
.Items(
X.Panel()
.ItemsFromAction("DataGridPanel")
) // end items
)//end window
) //end module
)
//_DataGridPanel.cshtml
@{
var X = Html.X();
}
@(
Html.X().GridPanel()
.Frame(true).MultiColumnSort(true)
.Store(
X.Store().RemotePaging(false)
.Model(
X.Model()
.Fields(
new ModelField("company"),
new ModelField("price", ModelFieldType.Float),
new ModelField("change", ModelFieldType.Float),
new ModelField("pctChange", ModelFieldType.Float),
new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
)
)
.PageSize(20)
.Proxy(
X.AjaxProxy()
.Reader(X.JsonReader().RootProperty("data").MessageProperty("message"))
.Url(Url.Action("LoadGridData"))
)
)
.ColumnModel(
Html.X().Column().Text("Company").DataIndex("company")//.Locked(true)
.Editor(X.TextField()),
Html.X().Column().Text("Price").DataIndex("price").Renderer(RendererFormat.UsMoney)
.Editor(X.NumberField()),
Html.X().Column().Text("Change").DataIndex("change").Editor(X.NumberField()),
Html.X().Column().Text("Change").DataIndex("pctChange").Editor(X.NumberField()),
Html.X().DateColumn().Text("Last Updated").DataIndex("lastChange").Editor(X.DateField())
)
.TopBar(
X.Toolbar()
.Items (
X.Button()
.Text("Toggle Filter Row")
.Handler("$('.x-column-header > .x-box-inner').slideToggle();")//("var header = this.up('grid').getView().mainHd; header.setDisplayed(!header.isVisible())"),
// ,X.LiveSearchToolbar().HideRegExp(true).HideCaseSensitive(true).SearchFieldWidth(100)
)
)
.BottomBar(X.PagingToolbar())
.SelectionModel(X.SpreadsheetSelectionModel().RowSelect(true)) //add row number breaks grping,export,cell copy..
.View(
X.GridView()
.Listeners(ls =>
{
ls.Activate.Handler = "$('.x-column-header > .x-box-inner').slideToggle()";
})
)
.Plugins(
X.CellEditing().ClicksToEdit(1)
// ,X.LiveSearchGridPanel()
//, X.FilterHeader().UpdateBuffer(2000) //delay checking input
)
)