Thank you very much, it helped me a lot.
My main target is to create a Custom Grid control; I was able to do it in WebForms with previous version using direct events.
I'm trying to create a GridPanel dynamically in codebehind.
I would add the 'edit' script as well.
...but in App.direct is null and I get:
Uncaught TypeError: fireFn.apply is not a function
How to fit in my shoes:
- Start a new project using Ext.NET Razor template
- Change _Layout.cshtml
- Add a new empty Razor Page called GridPanelEditorInCodebehind
_Layout.cshtml (the body part)
<body>
<ext-viewport layout="Border">
<items>
<ext-partial name="_Header" />
<ext-partial name="_Sidebar" />
<ext-panel layout="Fit" region="Center" bodyPadding="18">
<items>
<ext-section name="Main" />
</items>
</ext-panel>
</items>
</ext-viewport>
@RenderBody()
</body>
GridPanelEditorInCodebehind.cshtml
@page
@model BBros.Samples.Pages.GridPanelEditorInCodebehindModel
@{
}
<ext-section target="Main">
<ext-container id="MainContainer" region="Center" scrollable="true" paddingAsString="30 20 30 50" model="Model.MainContainer">
</ext-container>
</ext-section>
GridPanelEditorInCodebehind.cshtml.cs
using System;
using System.Collections.Generic;
using Ext.Net;
using Ext.Net.Core;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace BBros.Samples.Pages
{
public class GridPanelEditorInCodebehindModel : PageModel
{
public GridPanel MainContainer { get; set; }
public void OnGet()
{
this.X().AddScript("var edit = function (editor, e) {if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue))))" +
"{App.direct.Edit(e.field, e.originalValue, e.value);}};");
MainContainer = GridInCodebehind();
}
private GridPanel GridInCodebehind()
{
var grd = new GridPanel()
{
Id = "GridInCodebehind",
Title = "my Super Grid",
Anchor = "100%"
};
var df = new List<DataField>();
df.Add(new DataField() { Name = "id", Type = DataFieldType.Int });
df.Add(new DataField() { Name = "name", Type = DataFieldType.String });
var m = new Model()
{
IdProperty = "GridDataModel",
Fields = df
};
var s = new Store
{
Id = "GridDataStore"
};
s.ModelValue = m;
s.Data = GridData();
grd.Store = s;
var c = new List<Column>();
c.Add(new Column() { DataIndex = "id", Text = "ID", ColumnWidth = 50 });
c.Add(new Column() { DataIndex = "name", Text = "Name", Flex = 1, Editor = new TextField() });
grd.Columns = c;
var toolbar = new Toolbar() { Dock = Dock.Top };
toolbar.Items.Add(new Button() { IconCls = "x-md md-icon-apps" });
grd.DockedItems = toolbar;
var p = new CellEditingPlugin();
p.Listeners.Edit.Fn = "edit";
var plugins = new List<AbstractPlugin>();
plugins.Add(p);
grd.Plugins = plugins;
return grd;
}
public List<object> GridData()
{
DateTime today = DateTime.Today;
return new List<object>
{
new { ID = 1, Name = "3m Co", Price = 71.72, Change = 0.02, PctChange = 0.03, LastChange = today },
new { ID = 2, Name = "Alcoa Inc", Price = 29.01, Change = 0.42, PctChange = 1.47, LastChange = today },
new { ID = 3, Name = "Altria Group Inc", Price = 83.81, Change = 0.28, PctChange = 0.34, LastChange = today },
new { ID = 4, Name = "American Express Company", Price = 52.55, Change = 0.01, PctChange = 0.02, LastChange = today },
new { ID = 5, Name = "American International Group, Inc.", Price = 64.13, Change = 0.31, PctChange = 0.49, LastChange = today },
new { ID = 6, Name = "AT&T Inc.", Price = 31.61, Change = -0.48, PctChange = -1.54, LastChange = today },
new { ID = 7, Name = "Boeing Co.", Price = 75.43, Change = 0.53, PctChange = 0.71, LastChange = today },
new { ID = 8, Name = "Caterpillar Inc.", Price = 67.27, Change = 0.92, PctChange = 1.39, LastChange = today },
new { ID = 9, Name = "Citigroup, Inc.", Price = 49.37, Change = 0.02, PctChange = 0.04, LastChange = today },
new { ID = 10, Name = "E.I. du Pont de Nemours and Company", Price = 40.48, Change = 0.51, PctChange = 1.28, LastChange = today },
new { ID = 11, Name = "Exxon Mobil Corp", Price = 68.1, Change = -0.43, PctChange = -0.64, LastChange = today },
new { ID = 12, Name = "General Electric Company", Price = 34.14, Change = -0.08, PctChange = -0.23, LastChange = today },
new { ID = 13, Name = "General Motors Corporation", Price = 30.27, Change = 1.09, PctChange = 3.74, LastChange = today },
new { ID = 14, Name = "Hewlett-Packard Co.", Price = 36.53, Change = -0.03, PctChange = -0.08, LastChange = today },
new { ID = 15, Name = "Honeywell Intl Inc", Price = 38.77, Change = 0.05, PctChange = 0.13, LastChange = today },
new { ID = 16, Name = "Intel Corporation", Price = 19.88, Change = 0.31, PctChange = 1.58, LastChange = today },
new { ID = 17, Name = "International Business Machines", Price = 81.41, Change = 0.44, PctChange = 0.54, LastChange = today },
new { ID = 18, Name = "Johnson & Johnson", Price = 64.72, Change = 0.06, PctChange = 0.09, LastChange = today },
new { ID = 19, Name = "JP Morgan & Chase & Co", Price = 45.73, Change = 0.07, PctChange = 0.15, LastChange = today },
new { ID = 20, Name = "McDonald\"s Corporation", Price = 36.76, Change = 0.86, PctChange = 2.40, LastChange = today },
new { ID = 21, Name = "Merck & Co., Inc.", Price = 40.96, Change = 0.41, PctChange = 1.01, LastChange = today },
new { ID = 22, Name = "Microsoft Corporation", Price = 25.84, Change = 0.14, PctChange = 0.54, LastChange = today },
new { ID = 23, Name = "Pfizer Inc", Price = 27.96, Change = 0.4, PctChange = 1.45, LastChange = today },
new { ID = 24, Name = "The Coca-Cola Company", Price = 45.07, Change = 0.26, PctChange = 0.58, LastChange = today },
new { ID = 25, Name = "The Home Depot, Inc.", Price = 34.64, Change = 0.35, PctChange = 1.02, LastChange = today },
new { ID = 26, Name = "The Procter & Gamble Company", Price = 61.91, Change = 0.01, PctChange = 0.02, LastChange = today },
new { ID = 27, Name = "United Technologies Corporation", Price = 63.26, Change = 0.55, PctChange = 0.88, LastChange = today },
new { ID = 28, Name = "Verizon Communications", Price = 35.57, Change = 0.39, PctChange = 1.11, LastChange = today },
new { ID = 29, Name = "Wal-Mart Stores, Inc.", Price = 45.45, Change = 0.73, PctChange = 1.63, LastChange = today }
};
}
[Direct]
public IActionResult OnPostEdit(string field, string oldValue, string newValue)
{
string message = "<h2>Edit Record</h2><hr/><b>Property:</b> {0}<br /><b>Field:</b> {1}<br /><b>Old Value:</b> {2}<br /><b>New Value:</b> {3}";
// Send Message...
this.X().Toast(string.Format(message, 1, field, oldValue, newValue));
this.X().AddScript("App.GridInCodebehind.getStore().commitChanges()");
return this.Direct();
}
}
}
Consider that I'm new to C# and MVC even if I worked for several years with vb, webforms and Ext.NET from v2 to v5.
Any suggestion is much appreciated.
Do you know where am I wrong?
Thank you very much!