PDA

View Full Version : CellEditingPlugin Edit event over CheckColumn



bbros
May 07, 2021, 1:30 PM
Hello!
I get a different behavior handling CellEditingPlugin's Edit DirectEvent if I edit a TextColumn or a CheckColumn.

Here is my scenario:

CheckColumn.cshtml


@page "{handler?}"
@model ExtCookbook.Pages.CheckColumnModel
@{
ViewData["Title"] = "GridPanel CheckColumn";
}

<ext-section target="Main">
<ext-panel id="MainContainer" region="Center" layout="Border" scrollable="true" paddingAsString="0">
<items>
<ext-gridPanel model="@Model.myGrid" />
</items>
</ext-panel>
</ext-section>

CheckColumn.cshtml.cs


using 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 CheckColumnModel : PageModel
{
public GridPanel myGrid { get; set; }

public void OnGet()
{
myGrid = gridPanel();
}

private GridPanel gridPanel()
{
//trovo le date da / a del range
var fromDate = DateTime.Now.Date;
var toDate = DateTime.Now.Date.AddDays(5);

var grd = new GridPanel()
{
Id = "myGrid",
Title = "Check column",
Anchor = "100%",
Region = RegionType.Center
};

var df = new List<DataField>
{
new DataField() { Name = "description", Type = DataFieldType.String }
};

var c = new List<Column>()
{
new Column() { DataIndex = "description", Text = "Description", Width = 250, Locked = true, Editor = new TextField() },
};

for (int i = 0; fromDate.AddDays(i) <= toDate; i++)
{
df.Add(new DataField() { Name = fromDate.AddDays(i).ToString("yyyyMMdd"), Type = DataFieldType.Bool });
c.Add(new CheckColumn()
{
DataIndex = fromDate.AddDays(i).ToString("yyyyMMdd"),
Text = fromDate.AddDays(i).ToString("ddd d MMM"),
Width = 120,
CustomConfig = new JsObject
{
{ "editable", true }
}
});
}
var m = new Model()
{
IdProperty = "description",
Fields = df
};
// Store
var s = new Store();
s.ModelValue = m;

// Data
var tbl = new List<object>();
for (int r = 0; r < 5; r++)
{
var row = new Dictionary<string, object>
{
{ "description", $"Row #{r}" }
};
for (int i = 0; fromDate.AddDays(i) <= toDate; i++)
{
row.Add(fromDate.AddDays(i).ToString("yyyyMMdd"), false);
}
tbl.Add(row);

}
s.Data = tbl;
// Add to grid
grd.Store = s;

grd.Columns = c;

// Editing
var p = new CellEditingPlugin();
p.DirectEvents.Edit.Method = HttpMethod.POST;
p.DirectEvents.Edit.Url = $"?handler=CellEdit";
p.DirectEvents.Edit.ExtraParams.Add(new DirectEventParameter() { Key = "senderId", Value = grd.Id, Mode = ParameterMode.Value });
p.DirectEvents.Edit.ExtraParams.Add(new DirectEventParameter() { Key = "row", Value = "App." + grd.Id + ".selection ? App." + grd.Id + ".selection.data : null", Mode = ParameterMode.Raw });
p.DirectEvents.Edit.ExtraParams.Add(new DirectEventParameter() { Key = "e", Value = "e", Mode = ParameterMode.Raw });

grd.Plugins = new List<AbstractPlugin>();
((List<AbstractPlugin>)grd.Plugins).Add(p);

return grd;
}

public IActionResult OnPostCellEdit(JsObject jObj)
{

this.X().Toast("row count: " + jObj.GetValueOrDefault("row").Count);
this.X().Toast("e count: " + jObj.GetValueOrDefault("e").Count);

return this.Direct();
}

}
}


In this Repro-project.

When I check a field nothing happens.
When I change a text field the event has thrown.

e variable is empty.

In my main-project.

When I check a field event has fired e has fields (even if e.rowis empty there are other fields, like e.originaValue and it is the same of the ext.js code).
When I change a text field the event has thrown e is empty, but other extraparmams are good and row has the new value.
If I check the box the grid row won't be selected, and it causes the row to be empty.


Could you please give me some advice?
Thank you very much!

fabricio.murta
May 10, 2021, 7:47 PM
Hello @bbros!

The CheckColumn is not related to the CellEditingPlugin; so it is expected to have a different behavior.

The CellEditingPlugin consists in replacing the grid cell's text with an edit component, mostly form fields. The CheckColumn itself is a form field component; so whenever you have the column as Editable, its value is changed outside of the CellEditingPlugin logic; thus you get the different behavior. Not only the event handler, but also the arguments passed to the event are prone to changes, you are simply using two different approaches of grid editing.

You should either intertwine the different events to do the right logic for your application, or use another column type, so that it uses the cell editing mechanism; that is, require a click (or two) to first display the component, then apply the change and update the cell display with the new value.

Notice, for instance, clicks-to-edit set in the editing plug in won't affect the checkbox column.

It may be possible to use the "non-editable" checkbox column to, on click (or double click), display the editable checkbox; but I am not sure this is a goal that would fulfill your objective; it could be a better UI if the cell displayed something else so you could click and toggle -- but at the same time the "at once" toggling for a check box is probably best, even if the other fields require double-clicking, right?

Let us know if the answer above clarifies the issue you are having, or if you needed something else to get on track.