What's New?

How to implement "CommandColumn" for treepanel in Ext.Net 7?

  1. #1
    Jun 10, 2021, 2:09 PM

    How to implement "CommandColumn" for treepanel in Ext.Net 7?

    I did not find a "CommandColumn", and i add an "ext-widgetColumn" with buttons as alternative, but now i need to hide some buttons, and add events using the rows values, how can I do it?

    <ext-treePanel id="MyTree" flex="4" title="Example" scrollable="true" frame="true" margin="5">
    <root>
        <ext-treeNode text="Composers" expanded="true">
            <children>
                <ext-treeNode text="Mozart" iconCls="x-md md-icon-person">
                    <children>
                        <ext-treeNode text="Concertos">
                            <children>
                                <ext-treeNode text="Piano Concerto No. 12" iconCls="x-md md-icon-music-note" leaf="true" />
                                <ext-treeNode text="Piano Concerto No. 17" iconCls="x-md md-icon-music-note" leaf="true" />
                                <ext-treeNode text="Clarinet Concerto" iconCls="x-md md-icon-music-note" leaf="true" />
                                <ext-treeNode text="Violin Concerto No. 5" iconCls="x-md md-icon-music-note" leaf="true" />
                                <ext-treeNode text="Violin Concerto No. 4" iconCls="x-md md-icon-music-note" leaf="true" />
                            </children>
                        </ext-treeNode>
                    </children>
                </ext-treeNode>
            </children>
        </ext-treeNode>
    </root>
    <columns>
        <ext-treeColumn Flex="1" DataIndex="text" />
        <ext-widgetColumn width="100">
            <widget>
                <ext-button iconCls="x-md md-icon-menu-book" width="40" />
            </widget>
        </ext-widgetColumn>
    </columns>
</ext-treePanel>
  2. #2
    Jun 10, 2021, 7:55 PM
    Hello @wilmercastrillon, and welcome to Ext.NET forums!

    The CommandColumn is not supported by Ext.NET 7 and you can't use it simply via markup.

    The good news though, is that the related client-side code is actually present in Ext.NET 7 and you can, if you rely a little more in custom client-side code, enable the feature and use it. It should work just fine if you don't need a very elaborate columns definition to the tree panel.

    I am taking you want functionality similar to Ext.NET 5's TreePanel with Command Column. Picking up from this example, a fully working tree panel with command column can be implemented.

    One not-so-good news would be that it'd be necessary to define the entire <columns> block from custom config, not just the custom column. But don't falter for, with some caprice, it is still possible to have really tidy and maintainable code, taking advantage of ASP.NET Core facilities!

    For the provided example, it will be added context for a full test case. Please, when posting questions, try to follow this pattern, so we can easily copy-paste it in a test project and reproduce the scenario being presented. This is especially useful when reporting specific issues that need to be reproduced in a given configuration of the page.

    The code would then be:

    View t63152_treePanelCmdCol.cshtml
    @page
@model MyProject.t63152_treePanelCmdColModel
@{ Layout = null; }

<!DOCTYPE html>

<html>
<head>
    <title>
        TreePanel with Command Column - Ext.NET Examples
    </title>
    <script type="text/javascript">
        var gridCommandModel = [{
            xtype: "button",
            command: "Edit",
            tooltip: {
                text: "Edit Node"
            },
            iconCls: "x-md md-icon-edit"
        }];

        var editCommandHandler = function (item, command, record, recordIndex, cellIndex) {
            Ext.toast('Edit <b>' + record.data.text + '</b>');
        }

        var toolbarPreparer = function (grid, toolbar, rowIndex, record) {
            return record.data.leaf;
        };

        var columnModel = [{
            flex: 1,
            xtype: "treecolumn",
            dataIndex: "text"
        }, {
            width: 80,
            xtype: "commandcolumn",
            commands: gridCommandModel,
            // prepareToolbar: toolbarPreparer, # this will show the buttons only for leaves
            listeners: {
                command: {
                    fn: editCommandHandler
                }
            }
        }];
    </script>
</head>
<body>
    <h1>
        TreePanel with Command Column
    </h1>

    <ext-treePanel id="MyTree" title="Example" scrollable="true" frame="true" margin="5" height="900" width="600">
        <root>
            <ext-treeNode text="Composers" expanded="true">
                <children>
                    <ext-treeNode text="Mozart" iconCls="x-md md-icon-person">
                        <children>
                            <ext-treeNode text="Concertos">
                                <children>
                                    <ext-treeNode text="Piano Concerto No. 12" iconCls="x-md md-icon-music-note" leaf="true" />
                                    <ext-treeNode text="Piano Concerto No. 17" iconCls="x-md md-icon-music-note" leaf="true" />
                                    <ext-treeNode text="Clarinet Concerto" iconCls="x-md md-icon-music-note" leaf="true" />
                                    <ext-treeNode text="Violin Concerto No. 5" iconCls="x-md md-icon-music-note" leaf="true" />
                                    <ext-treeNode text="Violin Concerto No. 4" iconCls="x-md md-icon-music-note" leaf="true" />
                                </children>
                            </ext-treeNode>
                        </children>
                    </ext-treeNode>
                </children>
            </ext-treeNode>
        </root>
        <customConfig>
            <ext-add key="columns" value="columnModel" mode="Raw" />
        </customConfig>
    </ext-treePanel>
</body>
</html>
    Model t63152_treePanelCmdCol.cshtml.cs
    using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyProject
{
    public class t63152_treePanelCmdColModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}
    (nothing in the model code actually, but it is useful to share, making clear there's no further code from the model/code behind)

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Jun 11, 2021, 4:18 PM
    Excellent, thanks for your help
  4. #4
    Jun 11, 2021, 6:48 PM
    Glad it helped, thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. [CLOSED] MultiCombo and possibility to tweak it to implement "type-ahead" and/or "filtering" of the items?
    By adrianot in forum 3.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 01, 2017, 5:38 PM
  2. [CLOSED] it is possible to implement "InputMask" dynamically ??
    By opendat2000 in forum 4.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 23, 2016, 12:11 AM
  3. Ext Grid Component Column on Popup giving "me is not defined" and "find exact of Null"
    By PriceRightHTML5team in forum 2.x Help
    Replies: 1
    Last Post: Apr 06, 2016, 12:05 PM
  4. Cannot deserialize the current JSON object (e.g. {"name":"value"}) into type 'Ext.Net.SelectedRowCollection' because the type re
    By lasantha in forum 1.x Help
    Replies: 1
    Last Post: Sep 11, 2013, 5:39 PM
  5. [CLOSED] Ext.net v2 Beta release: Panel collapsed with CollapseMode="Mini" and Split="true"
    By supera in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 02, 2012, 5:37 PM

Tags for this Thread

Posting Permissions