ActionItem handler.

[Malin]

I am creating a TreePanel inside a window on the code behind.
Simplified code is posted at the end of the post.

What I am trying to achieve is similar to example in here :
LINK
but with one small change. Instead of having javascript function in cshtml page I created DirectMethod to handle click on the ActionItem.
But there seems to a problem be with some json encoding (recurrsion in serialization maybe?).
After clicking the action item I see this :


My other direct methods from this namespace works just fine ( used by buttons and message boxes).
I don't know if it matters but tree panel is being build from another project in my visual studio solution, however from the same project I build message boxes and they all work.

Tree panel is being build as follows :

var panel = new TreePanel();
var action = new ActionItem
{
    Handler = "Namespace.Method",
};
panel.ColumnModel.Columns.Add(
   new ActionColumn
   {
     Text = "Edit",
     MenuDisabled = false,
     Align = Alignment.Center,
     Items = { action },
   }
);

In my controller method which I am trying to call looks as follows :

[DirectMethod(Namespace = "Namespace")]
public ActionResult Method
(params object[] param) // result doesn't change if I change it to anything else
{
     return this.Direct(); // result doesn't change if I change it for example to this.Redirect("anothercontroller");
}

Obviously, creating handler

Handler="Method()"

works but all arguments are null.

[fabricio.murta]

Hello!

Can you post the example with the changes you done? Just providing some parts of the code did not make much sense in a first review of your question, the namespace changes became quite confusing, for example as how your handler to call a direct method is working.

[Malin]

I don't know how much more celar to be so I post real life example.
I am working on file editing via ext.net using htmleditor.
Mainly I have one controller (DesktopController) and builder class which builds all my ext.net objects.
I want to have a tree panel which contains tree of my catalogs and files

This is how I build my TreePanel :

public static TreePanel Build(string userName)
        {
            var wrapper = new StorageHelper(userName);
            var root = new Node
            {
                Text = userName
            };
            root.GetFoldersFrom(wrapper.IterateEverything());
            var column = new GridHeaderContainer();
            column.Add(new TreeColumn());
            var panel = new TreePanel
            {
                Title = @"Files",
                Width = 900,
                MinWidth = 900,
                Height = 500,
                Icon = Icon.FolderFont,
                AutoScroll = true,
                UseArrows = true,
                RootVisible = false,
                SingleExpand = true,
                Fields =
                {
                    new ModelField("fileName"),
                    new ModelField("lastChanged")
                },
                TopBar =
                {
                    new ToolbarCollection
                    {
                        new Toolbar
                        {
                            Items =
                            {
                                new Button{Text = @"Expand all",
                                    Handler = "this.up('treepanel').expandAll()"
                                },
                                new Button{Text = @"Collapse all",
                                   Handler = "this.up('treepanel').collapseAll()"
                                }
                            }
                        }
                    }
                },
                Root = { root }
            };
            panel.ColumnModel.Columns.Add(
                new TreeColumn
                {
                    Text = "Name",
                    DataIndex = "fileName"
                }
            );
            panel.ColumnModel.Columns.Add(
                new Column
                {
                    Text = "Last Changed",
                    DataIndex = "lastChanged"
                }); 
            var action = new ActionItem
            {
                Tooltip = "Edit the file",
                Handler = "Files.EditFile",
                Icon = Icon.NoteEdit, 
                
            };  
            panel.ColumnModel.Columns.Add(
                new ActionColumn
                {
                    Text = "Edit",
                    MenuDisabled = false,
                    Align = Alignment.Center,
                    Items = { action },
                }
                );
            return panel;
        }

In code above method "GetFoldersFrom" generates all nodes.
StorageHelper class is designed to be a proxy between my code and other classes which do things on files.
In my controller I have a method

[DirectMethod(Namespace = "Files")]
        public ActionResult EditFile(params object[] param)
        {
            return this.Redirect("asdf");
        }

Method above is suppoused to take data from node such as it's name etc. For now it doesn't really matter what it does. I stopped debugger at first { on this method but it's never getting there.
Two previous columns work but not the last one.
When I press button for "edit" javascript console shows error posted in my post above.

[fabricio.murta]

Hello Malin!

Okay, this makes perfect sense now as for why your direct method is not being called.

When we ask for an example, we actually ask for a working sample, providing the code as what you get when you click 'sources' in the Examples Explorer. Otherwise, we are just left wondering what your code does.

But in the example you provided it is clearly different than what you provided on your first post... So maybe there's a confusion in-between. Again, I can't just run your provided sample for missing bits & pieces for a fully running sample and I hope you understand that. If this still does not help you, let's try to clear up the matter of writing runnable examples and I am sure we'd be able to help you.

Your line 63, last post you have: Handler="Files.EditFile". This maybe is a common confusion between Fn and Handler properties of an event. You provided it the right way in your first post, last code block: Handler="Method()" although there was a doubt about the missing namespace -- which defaults to App.direct when not specified anywhere.

Almost everywhere you can use Handler= you can also use Fn=. While Fn is the name of the function to call with its predefined parameters, Handler is but a portion of JavaScript code that will be eval()'ed on the event.

So when you use Handler="Files.EditFile", you are running a line that does nothing. Just references to the function handle. It could be something like:

var myfn = Filed.EditFile;
myfn();

That would make more sense in the context. At some extent, it is what Fn= does. But in your case, all that would be enough would be:

Handler = "Files.EditFile();"

And the direct method should be actually called! Well, that is, if I got your example right by the portion you provided of it.

I hope this helps and clarifies the whole concept! If still there's something that does not work, please, review one of our examples in Examples Explorer and share with us the example with your test case in the shape you can get one example off the website when you click 'sources': in the case of MVC, at least a view and a controller would be necessary, often having also the model.

Reviewing the forum guidelines can also help! Please take your time:
- Forum Guidelines For Posting New Topics
- More information required

[Malin]

Thank you for your fast answer it was helpfull and I think now I understeand more.
Nevertheless when I use my handler as you suggested

Handler = "Files.EditFile();"

I can't post any arguments to it.
I need to capture at least one of one of button properties as it can be seen here http://mvc4.ext.net/#/TreePanel_Advanced/TreeGrid/
In example on this site we have :

X.ActionColumn()
                    .Text("Edit")
                    .Width(40)
                    .MenuDisabled(true)
                    .Align(Alignment.Center)
                    .Items(
                        X.ActionItem()
                            .Tooltip("Edit task")
                            .Icon(Icon.PageWhiteEdit)
                            .Handler("handler")
                            .IsDisabled(func => {
                                func.Handler = "return !record.data.leaf;";
                            })
                    )

And then handler is define

 var handler = function(grid, rowIndex, colIndex, actionItem, event, record, row) {
            Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : '') , record.get('task'));
        };

Thus it does intercept for example colIndex. In my handler there is no way that I can capture it because I call method without arguments.

[fabricio.murta]

Hello!

Sorry, it was my mistake, under an ActionItems, the Handler keyword expects a function name that follows the argument list as you shown: grid, rowIndex, colIndex, actionItem, event, record, row.

I've checked the example you pointed and it works accordingly so, all you have to do is a javascript function with the signature above, and from inside that JavaScript call the direct method following the direct method overview example, thus passing to the direct method what you want to.

I hope this helps!

[Malin]

Thank you for your response.

That is exactly what am I trying to do BUT without javascript on my page.
Is there any way to do it via DirectMethod or just from C# ?

I really do not want to put any javascript via typing to my .cshtml file.
The more statically typed the better.

[fabricio.murta]

Hello!

So what you want is a direct event. You pass parameters to it differently.

First things first, understand how it works: Events - Direct Events overview.

Got that? It is time for adding parameters for a direct event. This happens here, see: Dynamic Partial Rendering - Add Tab.

On this example, don't mind the dynamic partial rendering. What you want is what happens before so.

In the example you have a "+" button that, when clicked, adds a tab. If you look at the source code Index.cshtml, you can see that the click event of the button redirects to the AddTab action and passes to it a containerId parameter.

Once you look at the action code in Add_TabController.cs, there's how it can get the containerId variable in the action. With zero JavaScript.

But bear this in mind: Ext.NET is a framework for another JavaScript framework -- ExtJS is its name. It is an interface for C#, VB.NET, WebForms, MVC, but the end code in the client's page is always dependent on the JavaScript code run on the user browser. This means that sometimes for some very specific tasks or for some customizations, you may end up needing a bit of JavaScript on your page. If you browse our examples explorer you'll notice some examples using JavaScript helper code to "polish" the page.

Likewise, CSS formatting may be necessary -- in cases you want to customize something out of how it looks with the current theme.

I hope this helps!