Apr 14, 2021, 10:28 AM
[CLOSED] FieldSet / FormPanel ... HowTo?
Hello!
I don't know how to port existing MVC v5.2 or WebForms example for fieldset.
I would like that doubleclicking a grid row, pops up a window with the row editor panel.
Clicking the save button I would like to have back the edited json record.
Is this behavior supported?
I prepared a sample page which I think it has several errors, first of all I don't understand if it's needed to have a
Could you please fix my code?
GridAndForm.cshtml
I don't know how to port existing MVC v5.2 or WebForms example for fieldset.
I would like that doubleclicking a grid row, pops up a window with the row editor panel.
Clicking the save button I would like to have back the edited json record.
Is this behavior supported?
I prepared a sample page which I think it has several errors, first of all I don't understand if it's needed to have a
<form>
in page or not.Could you please fix my code?
GridAndForm.cshtml
@page
@model ExtCookbook.Pages.GridAndFormModel
@{
}
<ext-section target="Main">
<ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50">
<content>
<h1>GridPanel with editor form</h1>
Doubleclick a row in order to show the editor.
<form>
<ext-container id="MainContainer" model="Model.MainContainer">
</ext-container>
</form>
</content>
</ext-container>
</ext-section>
GridAndForm.cshtml.csusing System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Ext.Net;
using Ext.Net.Core;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace ExtCookbook.Pages
{
public class GridAndFormModel : PageModel
{
public Panel MainContainer { get; set; }
public void OnGet()
{
///////////////
// GridPanel //
///////////////
var grid = new GridPanel()
{
Id = "myGrid",
Title = "myGrid",
Anchor = "100%",
Region = RegionType.Center,
Columns = new List<Column>
{
new Column() { DataIndex = "UserID", Text = "UserID", Flex = 1},
new Column() { DataIndex = "UserName", Text = "User name", Flex = 1},
new Column() { DataIndex = "EMail", Text = "E-Mail", Flex = 1},
},
Store = new Store
{
Id = "myGridStore",
ModelValue = new Model
{
Fields = new List<DataField>
{
new DataField() { Name = "UserID", Type = DataFieldType.Int },
new DataField() { Name = "UserName", Type = DataFieldType.String },
new DataField() { Name = "EMail", Type = DataFieldType.String },
}
},
Data = GetData()
}
};
grid.Listeners.RowDblClick.Handler = "App.UserForm.setData(App.myGrid.selection.data);App.EditorWindow.show();";
////////////
// Window //
////////////
var window = new Window
{
Id = "EditorWindow",
Title = "User",
IconCls = "x-md md-icon-person",
Width = 500,
Height = 500,
BodyPadding = 18,
Frame = true,
DefaultButton = "SaveButton"
};
var fp = new FieldSet()
{
Id = "UserForm",
Anchor = "100%"
};
fp.FieldDefaults = new JsObject() { { "labelAlign", "top" } };
fp.Defaults = new JsObject() { { "margin", "0 0 10 0" } };
fp.Items.Add(new TextField()
{
Name = "UserName",
FieldLabel = "User name",
AllowBlank = false,
Width = "100%"
});
fp.Items.Add(new TextField()
{
Name = "EMail",
FieldLabel = "E-mail address",
AllowBlank = false,
Width = "100%"
});
var saveButton = new Button()
{
Id = "SaveButton",
Text = "Save",
OnClientClick = new JsFunction("App.EditorWindow.hide();")
};
saveButton.DirectEvents.Click.Method = HttpMethod.POST;
saveButton.DirectEvents.Click.Url = $"?handler=SaveButton_Click";
saveButton.DirectEvents.Click.ExtraParams.Add("data", "App.UserForm.data", ParameterMode.Raw);
window.Buttons.Add(saveButton);
window.Buttons.Add(new Button()
{
Id = "CancelButton",
Text = "Cancel",
OnClientClick = new JsFunction("App.EditorWindow.hide();")
});
window.Items.Add(fp);
MainContainer = new Panel()
{
Anchor = "100%"
};
MainContainer.Items.Add(grid);
MainContainer.Items.Add(window);
}
public static List<object> GetData()
{
return new List<object>
{
new Dictionary<string, object>
{
{ "UserID", 0 },
{ "UserName", "Tom" },
{ "EMail", "tom@mail.domain" }
},
new Dictionary<string, object>
{
{ "UserID", 1 },
{ "UserName", "John" },
{ "EMail", "john@mail.domain" }
}
};
}
public IActionResult OnPostSaveButton_Click(JsObject jObj)
{
var data = jObj.GetValueOrDefault("data").Value;
this.X().Toast(":D Happy!!! :D");
return this.Direct();
}
}
}
Thank you in advance.