[CLOSED] Javascript - Updating a TreeGrid

Page 2 of 2 FirstFirst 12
  1. #11
    It should be reproducible with some simple example.

    This technique should help you to prepare a sample.
    How to prepare a sample
  2. #12
    Upon further inspection, it appears that the item is "deselected" in its data, but visually it is. Here is a code sample:

    View:
    @{
        ViewBag.Title = "Edit With JavaScript";
        Layout = "~/Views/Shared/_BaseLayout.cshtml";
    }
    @section example{
        <h2>@ViewBag.Title</h2>
        @(
     Html.X().TreePanel().ID("reinsurerTree")
        .RootVisible(false)
        .TopBar(Html.X().Toolbar().Items(Html.X().ToolbarTextItem().Text("Reinsurer Tree")))
        .Plugins(Html.X().CellEditing())
        .SelectionModel(Html.X().CheckboxSelectionModel().AllowDeselect(true).Mode(SelectionMode.Multi))
        .Store(
            Html.X().TreeStore()
            .Model(
                    Html.X().Model()
                            .Fields(new ModelField("someCustomAttribute"))
                            .Fields(new ModelField("someDate"))
                  )
                            .Proxy(Html.X().AjaxProxy().Url(Url.Action("GetTreeData"))))
            .ColumnModel(
                            Html.X().TreeColumn().Text("Text").DataIndex("text"),
                            Html.X().Column().Text("Some custom attribute").DataIndex("someCustomAttribute").Width(200).Editor(e => e.Add(new Ext.Net.TextField())),
                                   Html.X().DateColumn()
                                   .Text("Some Date Field").DataIndex("someDate")
                                   .Editor(e => e.Add(new Ext.Net.DateField()))
                                   .HeaderItems(hdr => hdr.Add(Html.X().Toolbar().Items(
                                                                                           Html.X().ToolbarFill(),
                                                                                           Html.X().Button().Icon(Icon.Email).StandOut(true),
                                                                                           Html.X().Button().Icon(Icon.Calendar).StandOut(true)
                                                                                                                                       .Listeners(lstnr =>
                                                                                                                                                    lstnr.Click.Handler = "showDateUpdaterWindow('someDate','Enter new date.');")
                                                                                       )
                                                                )
                                                )
                            )
    
     )
        @(Html.X().Window().ID("winDates")
          .Hidden(true)
          .Width(300)
          .Height(150)
          .Title("Enter New Date")
          .BodyPadding(5)
          .Resizable(false)
          .Closable(false)
          .Center()
          .Modal(true)
          .Layout(LayoutType.Anchor)
          .Icon(Icon.Calendar)
          .Items(Html.X().DateField().ID("newDateField").SelectedDate(DateTime.Today).Text("Enter Date").AnchorHorizontal("100%").AllowBlank(false),
                        Html.X().Hidden().ID("dateStoreColumn")
                )
          .Buttons(Html.X().Button().Icon(Icon.Accept).Text("Update").Listeners(lstnr =>
                                                                                  lstnr.Click.Handler = "setDates(#{dateStoreColumn}.value,#{newDateField}.value)"),
                  Html.X().Button().Icon(Icon.Cancel).Text("Cancel").Listeners(lstnr =>
                                                                                 lstnr.Click.Handler = "#{winDates}.hide();")
                        ))
    
    <script type="text/javascript">
        /*********************************************************
        Document Reinsurer Grid - Show Date Updater
        showDateUpdaterWindow(storeColumnName as string)
        *********************************************************/
        function showDateUpdaterWindow(storeColumnName, winTitle) {
            try {
                //This code allows for the static code without causing errors
                //if this code is injected before the window is initialized.
                App.winDates.setTitle(winTitle);
                App.dateStoreColumn.value = storeColumnName;
                Ext.ComponentQuery.query('#winDates')[0].show();
    
            }
            catch (ex) {
                showErr('The data window form did not load properly.  Please contact GRiDS Support for further assistance.');
            }
        }
        /*********************************************************
        Document Reinsurer Grid - Update Tracking Dates
        setDates(storeColumnName as string)
        *********************************************************/
        function setDates(storeColumnName, newDate) {
            var rootNode = App.reinsurerTree.getRootNode();
    
            rootNode.cascadeBy(function (node) {
                //conditions: if the node is not the root, the node is selected and it is not the parent.
                if (node !== rootNode) {
                    if (App.reinsurerTree.selModel.isSelected(node)) {
                        node.beginEdit();
                        node.set(storeColumnName, newDate);
                        node.endEdit();
                    }
                }
            });
    
            App.winDates.hide();
        }
    </script>
    }



    Controller:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    namespace Ext.Net.MVC.Examples.Areas.Aon.Controllers
    {
        public class Tree_GridController : Controller
        {
            //
            // GET: /Aon/Tree_Grid/
    
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult GetTreeData()
            {
                TreeStore tStore = new TreeStore();
                NodeCollection nodes = new NodeCollection();
                Node node1 = new Node();
                node1.Text = "Node 1";
                node1.Leaf = true;
                node1.Icon = Icon.PlayGreen;
                node1.AttributesObject = new { someCustomAttribute = "value 1" };
                nodes.Add(node1);
    
                Node node2 = new Node();
                node2.Text = "Node 2";
                node2.Icon = Icon.PlayGreen;
                node2.Leaf = false;
                node2.AttributesObject = new { someCustomAttribute = "value 2" };
               
    
                Node node3 = new Node();
                node3.Text = "Node 3";
                node3.Leaf = true;
                node3.Icon = Icon.PlayGreen;
                node3.AttributesObject = new { someCustomAttribute = "value 3" };
                node2.Children.Add(node3); 
                
                nodes.Add(node2);
    
                return Content(nodes.ToJson());
            }
    
            public ActionResult EditWithJavascript()
            {
                return View();
            }
    
        }
    }
  3. #13
    Quote Originally Posted by adelaney View Post
    Upon further inspection, it appears that the item is "deselected" in its data, but visually it is.
    Please clarify the steps to reproduce.

    I tried these steps.

    1. Select all nodes.

    2. Call this in the console. It returns 3.
    App.reinsurerTree.selModel.getSelection().length
    3. Update the cells with a new date.

    4. Call again the above code. It still returns 3.
  4. #14
    It appears that with all the database trouble with the forum over the past couple of days that you may have lost my last post. Here is the sample code again.


    View
    @{
        ViewBag.Title = "Edit With JavaScript";
        Layout = "~/Views/Shared/_BaseLayout.cshtml";
    }
    @section example{
        <h2>@ViewBag.Title</h2>
        @(
     Html.X().TreePanel().ID("reinsurerTree")
        .RootVisible(false)
        .TopBar(Html.X().Toolbar().Items(Html.X().ToolbarTextItem().Text("Reinsurer Tree")))
        .Plugins(Html.X().CellEditing())
        .SelectionModel(Html.X().CheckboxSelectionModel().AllowDeselect(true).Mode(SelectionMode.Multi))
        .Store(
            Html.X().TreeStore()
            .Model(
                    Html.X().Model()
                            .Fields(new ModelField("someCustomAttribute"))
                            .Fields(new ModelField("someDate"))
                  )
                            .Proxy(Html.X().AjaxProxy().Url(Url.Action("GetTreeData"))))
            .ColumnModel(
                            Html.X().TreeColumn().Text("Text").DataIndex("text"),
                            Html.X().Column().Text("Some custom attribute").DataIndex("someCustomAttribute").Width(200).Editor(e => e.Add(new Ext.Net.TextField())),
                                   Html.X().DateColumn()
                                   .Text("Some Date Field").DataIndex("someDate")
                                   .Editor(e => e.Add(new Ext.Net.DateField()))
                                   .HeaderItems(hdr => hdr.Add(Html.X().Toolbar().Items(
                                                                                           Html.X().ToolbarFill(),
                                                                                           Html.X().Button().Icon(Icon.Email).StandOut(true),
                                                                                           Html.X().Button().Icon(Icon.Calendar).StandOut(true)
                                                                                                                                       .Listeners(lstnr =>
                                                                                                                                                    lstnr.Click.Handler = "showDateUpdaterWindow('someDate','Enter new date.');")
                                                                                       )
                                                                )
                                                )
                            )
    
     )
        @(Html.X().Window().ID("winDates")
          .Hidden(true)
          .Width(300)
          .Height(150)
          .Title("Enter New Date")
          .BodyPadding(5)
          .Resizable(false)
          .Closable(false)
          .Center()
          .Modal(true)
          .Layout(LayoutType.Anchor)
          .Icon(Icon.Calendar)
          .Items(Html.X().DateField().ID("newDateField").SelectedDate(DateTime.Today).Text("Enter Date").AnchorHorizontal("100%").AllowBlank(false),
                        Html.X().Hidden().ID("dateStoreColumn")
                )
          .Buttons(Html.X().Button().Icon(Icon.Accept).Text("Update").Listeners(lstnr =>
                                                                                  lstnr.Click.Handler = "setDates(#{dateStoreColumn}.value,#{newDateField}.value)"),
                  Html.X().Button().Icon(Icon.Cancel).Text("Cancel").Listeners(lstnr =>
                                                                                 lstnr.Click.Handler = "#{winDates}.hide();")
                        ))
    
    <script type="text/javascript">
        /*********************************************************
        Document Reinsurer Grid - Show Date Updater
        showDateUpdaterWindow(storeColumnName as string)
        *********************************************************/
        function showDateUpdaterWindow(storeColumnName, winTitle) {
            try {
                //This code allows for the static code without causing errors
                //if this code is injected before the window is initialized.
                App.winDates.setTitle(winTitle);
                App.dateStoreColumn.value = storeColumnName;
                Ext.ComponentQuery.query('#winDates')[0].show();
    
            }
            catch (ex) {
                showErr('The data window form did not load properly.  Please contact GRiDS Support for further assistance.');
            }
        }
        /*********************************************************
        Document Reinsurer Grid - Update Tracking Dates
        setDates(storeColumnName as string)
        *********************************************************/
        function setDates(storeColumnName, newDate) {
            var rootNode = App.reinsurerTree.getRootNode();
    
            rootNode.cascadeBy(function (node) {
                //conditions: if the node is not the root, the node is selected and it is not the parent.
                if (node !== rootNode) {
                    if (App.reinsurerTree.selModel.isSelected(node)) {
                        node.beginEdit();
                        node.set(storeColumnName, newDate);
                        node.endEdit();
                    }
                }
            });
    
            App.winDates.hide();
        }
    </script>
    }
    Controller
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    namespace Ext.Net.MVC.Examples.Areas.Aon.Controllers
    {
        public class Tree_GridController : Controller
        {
            //
            // GET: /Aon/Tree_Grid/
    
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult GetTreeData()
            {
                TreeStore tStore = new TreeStore();
                NodeCollection nodes = new NodeCollection();
                Node node1 = new Node();
                node1.Text = "Node 1";
                node1.Leaf = true;
                node1.Icon = Icon.PlayGreen;
                node1.AttributesObject = new { someCustomAttribute = "value 1" };
                nodes.Add(node1);
    
                Node node2 = new Node();
                node2.Text = "Node 2";
                node2.Icon = Icon.PlayGreen;
                node2.Leaf = false;
                node2.AttributesObject = new { someCustomAttribute = "value 2" };
               
    
                Node node3 = new Node();
                node3.Text = "Node 3";
                node3.Leaf = true;
                node3.Icon = Icon.PlayGreen;
                node3.AttributesObject = new { someCustomAttribute = "value 3" };
                node2.Children.Add(node3); 
                
                nodes.Add(node2);
    
                return Content(nodes.ToJson());
            }
    
            public ActionResult EditWithJavascript()
            {
                return View();
            }
    
        }
    }

    What I see happening is that the values are set correctly for the selected items. However, once completed, the items appear to be deselected, but if you inspect the node via code, the code value is still set to "selected." Please try to see if you experience anything similar. I am using I8, as that is the client requirement.
  5. #15
    Hi @adelaney,

    Seems we did not miss your post. At least, I see, seems, the same example in your previous post.

    Anyway, apologize for the inconvenience with the unstable forums.

    Please clarify did you read my post #13?

    I still can't reproduce it.

    Maybe, it was fixed in ExtJS 4.1.2 which we incorporated into Ext.SVN 2.1 branch a few days ago. Seems I remember this bug.

    I would suggest you to update and re-test.
Page 2 of 2 FirstFirst 12

Similar Threads

  1. TreeGrid getNodeById in Javascript ?
    By Mohammad in forum 1.x Help
    Replies: 6
    Last Post: Dec 04, 2011, 10:02 AM
  2. Replies: 1
    Last Post: Dec 04, 2011, 10:01 AM
  3. Replies: 6
    Last Post: Nov 24, 2011, 12:47 PM
  4. [CLOSED] Get selected node in javascript (Treegrid)
    By fordprefect in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 01, 2011, 4:00 PM
  5. using javascript add a new treenode to a treegrid
    By huchaonian in forum 1.x Help
    Replies: 3
    Last Post: Oct 14, 2010, 9:32 AM

Tags for this Thread

Posting Permissions