CellEditingPlugin Edit event over CheckColumn

  1. #1

    CellEditingPlugin Edit event over CheckColumn

    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!
  2. #2
    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.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Commit CheckColumn editing during BeforeEdit event
    By RCN in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 07, 2013, 5:42 AM
  2. [CLOSED] Edit Event to Calendar
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Apr 19, 2013, 5:35 AM
  3. Event Edit Form
    By misha_bilous in forum 2.x Help
    Replies: 0
    Last Post: Oct 02, 2012, 1:23 PM
  4. Way to update row body on Edit event?
    By Tbaseflug in forum 2.x Help
    Replies: 0
    Last Post: May 23, 2012, 7:25 PM
  5. CheckColumn fire event
    By fabiomarcos in forum 1.x Help
    Replies: 0
    Last Post: Oct 06, 2009, 10:55 AM

Posting Permissions