-
Hello @Z! Sorry for the delay!
Are you not getting errors on the page on load? Running your code here I can see the grid and all, but console points errors running layout. I don't need to do anything besides loading the page. I'm not sure this is supposed to be related to the issue but it could -- in potential -- be interfering in the call to code behind.
The end result on load is a grid with column bodies that do not match the width with the column headers'.
As the 'test' button effectively edits the record so that the issue is reproduced, are the drag-and-drop, editor, command column, renderer, all required in order to reproduce the issue? Quite confused here. Do you think you could trim down the example to the bare minimum required to reproduce the issue?
-
Were you able to see the error??
I have trimmed the example as much as I can. It was very difficult for me to reproduce the error. I can try to trim out the excess but I try to have it match my code as close as possible.
There has to be a better way to do this? I can show u the problem in 5 mins online together.
/Z
-
Hello @Z!
We were able to see the error pop up on the page console on page load, differently than what you described.
You could record a video, or share screens showing the problem happen, but that would be coming off a black box where we can't fiddle with by our side, so we would be left to keep wondering with you what's happening. I don't think that would help at all.
Your issue, as you said, is not easy to be reproduced, and leaving unrelated code on the page would also not help in any way, that's why I think it would be worth the time to trim down the test case at least so it does not trigger an unrelated layout error on load (if that's really an urelated error that does not happen on your production environment).
I hope you understand we want to help, but the test case is difficult to tackle with still.
-
So i was able simplify the example. i removed all the drag/drop.
I can also see TWO separate bugs.
1. i get a "Layout Run Failed" (on load and when i press the test button)
2. i get a JS error at the end somewhere in EXT (after save is pressed)
The page is quote simple now. So i will hope you can resolve and fix both these issues ASAP. See my screen record of the test case and you can clearly see the problem. All steps are listed including what buttons are pressed.
Download screen record of issue: https://www.dropbox.com/s/rfty6utm43...error.zip?dl=0
The root of the problem is the CommandColumn that has the PrepareToolbar. it seems that this is the cause.
/Z
aspx
Code:
<%@ 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, 15).Select(i => new object[]
{
i,
"2",
"3"
});
this.GridPanelTest.Store.Primary.DataBind();
}
}
</script>
<script type="text/javascript">
var commandHandler = function (cmd, data, grid, record) {
};
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:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:GridPanel
ID="GridPanelTest"
runat="server"
Title="Test Defect"
Layout="VBoxLayout">
<Store>
<ext:Store ID="StoreTest"
runat="server"
RemoteSort="false"
AutoLoad="true"
>
<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>
<Plugins>
<ext:CellEditing ID="CellEditing1" Enabled="true" ClicksToEdit="1" runat="server" />
</Plugins>
<BottomBar>
<ext:Toolbar ID="ToolbarSearch" runat="server">
<Items>
<ext:Button ID="Button1" 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:Toolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
controller
Code:
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;
}
class
Code:
public class TestData
{
public long id;
public string startTestData;
public string endTestData;
}
-
Hello @Z!
Can you check latest code sources whether they fix the issue for you?
As for the layout error, please remove Layout="VBoxLayout" from your grid panel. While it could be relevant to a plain panel (where you add items inside), a grid panel can have but one item which is the grid view, so there's not much sense in having this setting there at all.
We're looking forward to your feedback! If this works for you, we may be releasing the next Ext.NET version update containing this bugfix very soon!
-
yes!
i pulled the latest code and it is fixed.
thxs
/Z
-
before you create a new release, i have more critical defects. this next one is just as bad.
i will create a new thread for it.
-
Thanks for your feedback, @Z! Glad the issue is fixed!.. Please remember, providing simplified test cases results in much faster responses and much less stress from both sides! This issue could be simplified as much as this:
Code:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html >
<head id="Head" runat="server">
<title>Search </title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
StoreTest.DataSource = Enumerable.Range(0, 115).Select(i => new object[] { i, "2", "3" });
this.GridPanelTest.Store.Primary.DataBind();
}
}
protected void SaveData(object sender, DirectEventArgs e)
{
//we want to remove the record since it is processed so we use the delete record option
ModelProxy record = StoreTest.GetById(1);
StoreTest.Remove(record);
StoreTest.CommitRemoving(1);
}
</script>
<script type="text/javascript">
var commandHandler = function (item, name, record, recordId) {
var rd = record.data,
recordStr = 'id:' + rd.id + ' start:' + rd.startTestData + ' end:' + rd.endTestData;
Ext.Msg.alert('command triggered', 'triggered command for: ' + recordStr);
};
</script>
</head>
<body>
<form id="FormSearch" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel
ID="GridPanelTest"
runat="server"
Title="Test Defect"
Width="400"
Height="400"
>
<Store>
<ext:Store ID="StoreTest"
runat="server">
<Model>
<ext:Model 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 runat="server" Text="ID" DataIndex="id" />
<ext:Column runat="server" Text="Time In" DataIndex="startTestData" />
<ext:Column runat="server" Text="Time Out" DataIndex="endTestData" />
<ext:CommandColumn runat="server" Flex="1">
<Commands>
<ext:GridCommand CommandName="Create1" Icon="CalendarAdd">
<ToolTip Text="Create 1" />
</ext:GridCommand>
</Commands>
<Listeners>
<Command Fn="commandHandler" />
</Listeners>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<BottomBar>
<ext:Toolbar ID="ToolbarSearch" runat="server">
<Items>
<ext:Button ID="ButtonSaveExceptionPunches" runat="server" Text="Save" Icon="Disk">
<DirectEvents>
<Click OnEvent="SaveData" />
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:GridPanel>
</form>
</body>
</html>
The catch is just:
- command column having grid commands with tooltips
- grid panel with scrollbar but less that ~20 entries not visible without scrolling (a longer amount of entries would not trigger the issue at all, so a fixed panel height would be required to ensure the bug is triggered)
- removing a record from the grid (this effectively triggers the issue on the scenario above). It does not even need to be from code behind. Just App.StoreTest.removeAt(0) would do.
-
Not fixed fully
Thank you for explanation. please note that i dont review the code, i just start from an example (my web page) and continually strip out pieces and make stand alone until the bug is gone. then i put the last piece back and post it for you. i try my best to simplify but is not easy. these are complex issues.
The original use case to create the bug is fixed. however, i hit it again.
Please see this test case (using latest trunk)
1. window should be fully maximized
2. press load button.
3. then simply double click IE header so window is no longer maximized
4. move mouse over the grid.
Thanks
/Z
Code:
<%@ 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"
WarningOnDirty="false"
PageSize="50"
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:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Width="35">
<Commands>
<ext:ImageCommand CommandName="Delete" Icon="Delete">
<ToolTip Text="Delete Row" />
</ext:ImageCommand>
</Commands>
<Listeners>
<Command Handler="commandHandler(command, record.data, GridPanelTest, record);" />
</Listeners>
</ext:ImageCommandColumn>
<ext:ImageCommandColumn ID="ImageCommandColumn2" runat="server" Width="35">
<Commands>
<ext:ImageCommand CommandName="Open" Icon="NoteEdit">
<ToolTip Text="Open Timecard" />
</ext:ImageCommand>
</Commands>
<Listeners>
<Command Handler="commandHandler(command, record.data, GridPanelTest, record);" />
</Listeners>
</ext:ImageCommandColumn>
<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:RowSelectionModel ID="RowSelectionModelTimecard" runat="server" Mode="Single" />
</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:Label ID="Label1" runat="server" Text="Page size:" />
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="5" />
<ext:ComboBox ID="ComboBoxPaging" runat="server" Width="50" Editable="false">
<Items>
<ext:ListItem Text="50" />
<ext:ListItem Text="100" />
<ext:ListItem Text="250" />
<ext:ListItem Text="500" />
</Items>
<SelectedItems><ext:ListItem Value="50" /></SelectedItems>
<ListConfig Width="50" />
<Listeners>
<Select Handler="#{StoreTest}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.getStore().load();" />
<AfterRender Handler="var size = 50; #{StoreTest}.pageSize = parseInt(size); this.setValue(size);" />
</Listeners>
</ext:ComboBox>
<ext:Button ID="Button1" 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
Code:
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
Code:
public class TestData
{
public long id;
public string startTestData;
public string endTestData;
}
