Updating Static Tree Panel through Direct Events (MVC, C#, Razor)

  1. #1

    Updating Static Tree Panel through Direct Events (MVC, C#, Razor)

    In order to push back a lot of code as far back as possible (into the Model), we've had to use a lot of direct events in order to refresh info gained from that model. So the example here: Refresh Static Tree will not work - you really can't post back to your model from a Direct Method

    After trying numerous configurations of returning nodes, node collections, node collections without a root and many different JavaScripts handle the resulting returns, this post: http://forums.ext.net/showthread.php...l-to-get-nodes got it very close. The real trick was the differences in what object the Direct Event got back and what the Direct Method
    got.

    If you want to refresh a Tree Panel with a Direct Event, here is the relevant bits:

    .cshtml (incl. Javascript)
    <script>
    var UpdateTreeSuccess = function (tree, node) {
    
                if (!Ext.isEmpty(node)) {
                    tree.setRootNode( node.result[0] ); //note the node.result[0] - this is where the root object you want is in the Direct Result!
                    tree.getRootNode().expand( true );
                }
                else {
                    tree.getRootNode().removeAll();
                }
    
            };
    </script>
    
    Html.X().TreePanel()
                        .ID("TreePanel1")
                        .Icon(Icon.BookOpen)
                        .Tools(
                            Html.X().Tool()
                                .Type(ToolType.Refresh)
                                .ID("hiddenRefreshTree")
                                .DirectEvents(de =>
                                    {
                                        de.Click.Url = Url.Action("UpdateTree");
                                        de.Click.Success = "UpdateTreeSuccess(App.TreePanel1, result);";
                                        de.Click.Failure = "alert('No Tree');";
                                    }
                                )
                                .ToolTip("Refresh")
                        )
                        .Title("Tournament Dates")
                        .Root(
                            Html.X().Node()
                            .NodeID("TreeRoot")
                            .Text("RootText")
                            .Children(r =>
                                {
                                    //do your static tree work here
                                }
                            )
    
                        )

    controller.cs
    public ActionResult UpdateTree( modelType ModelName )
            {
                return this.Direct(ModelName.ExtNetNodeCollection);
            }
    model (in this case looking through data in an array to separate out by months)
    public Ext.Net.NodeCollection ExtNetNodeCollection
    {
    
          get
                {
    
    		Ext.Net.NodeCollection oNodeCollection = new Ext.Net.NodeCollection ( );
    
                    Ext.Net.Node oRootNode = new Ext.Net.Node();
    		oRootNode.Text = "Some Text"
    		oRootNode.NodeID = "TreeRoot";
    		oRootNode.Leaf = false;
    		oNodeCollection.Add ( oRootNode );
    
                    for (int month = 1; month < 13; month++)
                    {
                        if (this.SomeData.Where(p => p.Data_Date.Month == month).Count() > 0)
                        {
                            Node oMonthNode = new Node();
                            oMonthNode.Text = (Convert.ToDateTime( month + "/1/" + Year)).ToString("MMMM");
    			oMonthNode.Leaf = false;
                            oRootNode.Children.Add(oMonthNode);
    
                            foreach (var rows in this.SomeData.Where(c => c.Data_Date.Month == month))
                            {
                                Node oDataNode = new Node();
    			    oTourneyNode.Text = rows.Data_Desc + " - " + rows.Data_Date.ToString ( "MMM dd, yyyy" );
                                oDataNode .Leaf = true;
                                oMonthNode.Children.Add(oDataNode);
                            }
                        }
                    }
    
    		return oNodeCollection;
          }
                
    }
    There are definitely disadvantages to using the Direct Events, but when you are working with a lot of information pulled data Stores that are only going to get their information through the model, rather than create new instances of that model, Direct Events are the easy route to getting your data.

    I wish there were more examples in the MVC examples explorer were direct events were utilized for this very reason.
    Last edited by dangerlinto; Nov 26, 2013 at 12:17 PM.
  2. #2
    Hi @dangerlinto,

    Thank you for sharing and the suggestion.

    Quote Originally Posted by dangerlinto View Post
    you really can't post back to your model from a Direct Method
    Could you, please, elaborate on that? I don't quite understand what you mean.
  3. #3
    Quote Originally Posted by Daniil View Post
    Could you, please, elaborate on that? I don't quite understand what you mean.
    The direct event will post back to your controller with your model in MVC without any extra work on your behalf. As near as I can tell, I'd have to rewire everything up in the JavaScript - using the example i referenced, the Direct Method is passing a string (node) back to the controller to get the data needed to rebuild the tree. But what if the data I need is in a model that requires 10, 15, or 20 or more variables to get at.? My first thought was to break the data out of that model, but while my more simplistic, cut-down version doesn't show it, the data can't be separated so easily. Posting back the entire model is the only efficient way to get at the data.

    If there was a way in the direct method to wrap up the entire model's worth of data to pass back to the controller, I guess that would be fantastic
  4. #4
    Quote Originally Posted by dangerlinto View Post
    The direct event will post back to your controller with your model in MVC
    Probably, you mean that it submits a form. Because a DirectEvent doesn't submit a Model.

    Quote Originally Posted by dangerlinto View Post
    without any extra work on your behalf.
    Yes, a DirectEvent submits a form automatically, if it can find it. But it is possible to submit a form with a DirectMethod as well using the formId config. Though, yes, with some small extra work.

    View
    @model int
    
    @{
        var X = Html.X(); 
    }
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.Net.MVC v2 Example</title>  
    </head>
    <body>
        @X.ResourceManager()
    
        <form id="form1">
            @X.NumberField().Number(Model).Name("model")
    
            @X.Button().Handler(string.Format("Ext.net.DirectMethod.request({{ url: '{0}', formId: '{1}' }})", Url.Action("GetModel"), "form1"))
        </form>
    </body>
    </html>
    Controller
    public ActionResult Index()
    {
        return View(10);
    }
    
    [DirectMethod(ClientProxy = ClientProxy.Ignore)]
    public ActionResult GetModel(int model)
    {
        X.Msg.Alert("GetModel", model).Show();
    
        return this.Direct();
    }

Similar Threads

  1. [CLOSED] Hide Tree Panel Node in Razor
    By Patrick_G in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 15, 2013, 11:14 PM
  2. Direct Events with Razor
    By gdog_5021 in forum 2.x Help
    Replies: 3
    Last Post: Aug 15, 2012, 10:46 AM
  3. [CLOSED] [Razor] Row expander + multiple direct events
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 21, 2012, 3:39 AM
  4. [CLOSED] Listeners for Tree Panel (Razor Views)
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 24
    Last Post: Apr 04, 2012, 7:56 AM
  5. [CLOSED] Tree Panel Razor View Example?
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 09, 2012, 8:22 AM

Posting Permissions