[OPEN] [#1847] GridPanel Boolean data and Checkbox editor

[bbros]

How can I use a Checkbox as column editor in a GridPanel?

Other components seem to work fine, but the Checkbox appears disabled.

I started from your GridPanel sample and here it is:

GridPanel.cshtml

@page  "{handler?}"
@model BBros.Samples.Pages.GridPanelModel
@{
    ViewData["Title"] = "GridPanel";
}
<ext-section target="Main">
    <ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50">
        <items>
            <ext-gridPanel title="GridPanel"
                           width="960"
                           height="640"
                           frame="true">
                <store>
                    <ext-store data="Model.GridData" pageSize="10">
                        <fields>
                            <ext-dataField name="company" />
                            <ext-numberDataField name="price" />
                            <ext-numberDataField name="change" />
                            <ext-numberDataField name="pctChange" />
                            <ext-dateDataField name="lastChange" />
                            <ext-booleanDataField name="really" />
                        </fields>
                        <proxy>
                            <ext-memoryProxy enablePaging="true" />
                        </proxy>
                    </ext-store>
                </store>
                <columns>
                    <ext-column text="Company" dataIndex="company" flex="1" editorModel="new TextField()" />
                    <ext-column text="Price" dataIndex="price" renderer="Ext.util.Format.euroMoney" />
                    <ext-column text="Change" dataIndex="change" renderer="change" />
                    <ext-column text="Change %" dataIndex="pctChange" renderer="pctChange" />
                    <ext-dateColumn text="Last Updated" dataIndex="lastChange" width="150" editorModel="new DateField()" />
                    <ext-checkColumn text="Really?" dataIndex="really" width="50" editorModel="new Checkbox()" />
                </columns>
                <plugins>
                    <ext-cellEditingPlugin />
                </plugins>
                <bbar>
                    <ext-pagingToolbar />
                </bbar>
            </ext-gridPanel>
        </items>
    </ext-container>
</ext-section>

GridPanel.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;
using System;
using System.Collections.Generic;

namespace BBros.Samples.Pages
{
    public class GridPanelModel : PageModel
    {
        public List<object> GridData { get; set; }

        public void OnGet()
        {
            var now = DateTime.Now.ToString("yyyy-MM-dd hh:mm:tt");

            this.GridData ??= new List<object>
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, now, true },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now, true },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now, true },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, now, true },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now, false },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now, true },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now, true },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now, true },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now, true },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now, true },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now, true },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, now, true },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now, true },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now, true },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now, true },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now, true },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, now, true },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now, true },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now, false },
                new object[] { "McDonald's Corporation", 36.76, 0.86, 2.40, now, true },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now, true },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now, true },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now, true },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now, true },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now, true },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now, true },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now, true },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now, true },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now, true }
            };
        }
    }
}

Thanks!

[fabricio.murta]

Hello @bbros!

Just add x:raw-editable="true" to the check column and it should "magicallY" become editable.

You may want to check out the corresponding v5 example using this feature for any additional quirks related to check column edits.

The setting is not pulled by intellisense because it is not part of original Ext JS and the specific setting didn't make in Ext.NET 7 API, but usually what you find in version 5 Examples Explorer (thus older Ext.NET versions) when it comes to component configs, it's probably supported in Ext.NET 7 even though not exported to TagHelpers completion.

Hope this helps!

[bbros]

ok in the designer works properly.
I'm looking for the equivalent in codebehind, however as you anticipated me there is no TagHelper but also class property as well.
There is not even a "TagHelpers" property for the Column.
Using a script to run after adding the Grid I can check the Enabled App.GridColumn.Editable = true property
But is that the only way?
Will you support the Editable property?

in the v5 example, Editable was working.

Tnx!

[fabricio.murta]

Hello again, @bbros!

In code behind, you have CustomConfig to use. How does the code to add the column look like at your side? In case you can't figure out how to use CustomConfig from code behind we can tell you how it would given the way you are building the grid.

[bbros]

I think I got it.
It's working with the following code! Thanks!

   public static Column GetColumn(DataFieldType? type, bool Editable)
        {
            Column col;
            switch (type)
            {
                case DataFieldType.Bool:
                    col = new CheckColumn();
                    if (Editable == true)
                    {
                        col.SetEditor(new Checkbox());
                        col.CustomConfig = new Ext.Net.Core.JsObject
                            {
                                { "editable", true }
                            };
                    }
                    break;
[...]
            }
            return col;

        }

[fabricio.murta]

Hello again, @bbros!

Glad you could find with intellisense just with the tip we provided.

But it does not look great, does it? In markup, you can use:

- x-editable="true" (would be a string, editable: "true" in js)
- x:raw-editable="true" (editable: true
- x:model-editable="AnObjectHere" (editable: <serialized_object_here>)

The last option is useful when you have a complex object you want to bind to a custom setting, like { name: "Joseph", value: "house" } when serialized.

But there's also the option to use said CustomConfig in markup too. And for the second case, which is ours here, we would:

<customConfig>
    <ext-add key="editable" value="true" mode="Raw" />
</customConfig>

So, wouldn't it be nice if we could just add the key-value setting in code behind too? I believe you missed this inner block setting, else you'd have figured this out. But here you go:

col.CustomConfig.Add("editable", true);

While adding several custom configs should benefit from the syntax you used, I believe simply adding to the dictionary instead of replacing it for just one entry -- or when you need different conditions to add different custom configs -- should earn substantial cleanliness in code behind.

Thus,

public static Column GetColumn(DataFieldType? type, bool Editable)
{
    Column col;
    switch (type)
    {
        case DataFieldType.Bool:
            col = new CheckColumn();
            if (Editable == true)
            {
                col.SetEditor(new Checkbox()); // did you actually need this?
                col.CustomConfig.Add("editable", true);
            }
            break;
[...]
    }
    return col;

}

Anyway, there's absolutely nothing wrong with the approach you took; it is totally up to you whether you prefer the multi-line reassignment, or adopt the single-line. Both will have their vantages and disadvantages, or how they "feel" better in the code.

Hope this information is useful. We have implemented this feature in Ext.NET 7 through issue #1800 - absent: customConfig inner block.

[bbros]

col.SetEditor(new Checkbox()); // did you actually need this?

I didn't now that a CheckColumn does not need a editor to be editable!

In my opinion it's quite confusing that some column type needs an editor and some other doesn't.
I mean, a NumberColumn with the same CustomConfig does not show it's editor, as well as a DateColumn, so I think I need to do this:

                case DataFieldType.Date:
                    col = new DateColumn() { Format = "dd/m/Y" };
                    if (Editable == true)
                    {
                        col.SetEditor(new DateField());
                    }

                    break;

                case DataFieldType.Float:
                    col = new NumberColumn() { Align = Align.End };
                    if (Editable == true)
                    {
                        col.SetEditor(new TextField());
                    }
                    break;

col.CustomConfig.Add("editable", true);

I prefer single line, as you wrote; the point is that CustomConfig is null.
Maybe it's better if I check if it is null or not before to create a new Dictionary or adding values to the existing one.

Thanks!!

[fabricio.murta]

Hello @bbros!

In my opinion it's quite confusing that some column type needs an editor and some other doesn't.

You can always just specify the editor no matter what to follow a pattern. The only reason the check column does not require an editor is because the component it displays the data is the editor field itself (check box). In all other columns, you don't see text fields or drop downs, but just text; while the column data type can help determine which component to use while editing, it has ultimately to replace the plain text within a cell with the actual component to handle value editing.

That would be the logic behind "the check column doesn't need an explicit editor". It does not need to replace its contents to enable editing. In fact, (in the plain default mode) a single click does the full edit job, dirty cell and all.

I prefer single line, as you wrote; the point is that CustomConfig is null.

At least the .Add() method should be able to init the config, I've logged this as #1847 in out issues tracking interface. Despite that, here I could just:

ColMod = new CheckColumn()
{
    Text = "Really?",
    DataIndex = "really",
    Width = 50,
    CustomConfig = new JsObject()
};

ColMod.CustomConfig.Add("editable", true);

This is basically the same you did, just initializing CustomConfig earlier. Yet, it feels the additional line in initialization could be avoided (yet allowed when one wants to provide the values on init). There's nothing wrong with your approach at all. Sorry for the misled suggestion.

Just in case, the code above reproduced the following TagHelpers' markup:

<ext-checkColumn text="Really?" dataIndex="really" width="50" x:raw-editable="true" />

[fabricio.murta]

Notwithstanding, we have just logged issue #1848 to track the missing CheckColumn.Editable config.

We'll post follow-ups here as each issue gets implemented.

[bbros]

Thanks!

PS: In case you already read the previous post which I edited, I found a bug in my code. sorry.