PDA

View Full Version : How to implement "CommandColumn" for treepanel in Ext.Net 7?


wilmercastrillon
Jun 10, 2021, 2:09 PM
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>
fabricio.murta
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 (https://examples5.ext.net/#/TreePanel/Advanced/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!
wilmercastrillon
Jun 11, 2021, 4:18 PM
Excellent, thanks for your help
fabricio.murta
Jun 11, 2021, 6:48 PM
Glad it helped, thanks for the feedback!