[CLOSED] Javascript - Updating a TreeGrid

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Javascript - Updating a TreeGrid

    I have a TreeGrid panel that is editable via the cell-editing plugin. However, I need to do "bulk" updates on the client via some button clicks. For one, I need to give the users the ability to set a date for all the rows for a given column. I have been able to find a row's column in the store by this:

    App.reinsurerTree.store.tree.root.childNodes[1].childNodes[0].data.DateSentToRI
    And I have been able to set the value by this:
    App.reinsurerTree.store.tree.root.childNodes[1].childNodes[0].data.DateSentToRI = new Date('1/1/1980')
    However, the grid is not visually changing. I am assuming that there is another function to call, but I tried using "setDate" to no avail. e.g.
    App.reinsurerTree.store.tree.root.childNodes[1].childNodes[0].data.DateSentToRI.setDate(new Date('1/1/1980'))
    I also tried to "sync" the grid to the store after changing the value, but that didn't seem to work either.

    Can you please tell me the correct way to go about changing the data on the client-side?

    There are two caveats - 1) I need to see the new date reflected to the screen via javascript with the indicator that the value has changed, and 2) I need to put the grid into a state that will allow it to pass the updated data back to my controller once my (DirectEvent) "Save" button is clicked.


    Thanks in advance.
    Last edited by Daniil; Sep 25, 2012 at 7:02 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Please investigate the example.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script type="text/javascript">
            var setNewDate = function () {
                var tree = App.TreePanel1,
                    root = tree.getRootNode(),
                    newDate = new Date(2012, 8, 20);
    
                root.cascadeBy(function (node) {
                    if (node !== root) {
                        node.beginEdit();
                        node.set("date", newDate);
                        node.endEdit();
                    }
                });
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:TreePanel ID="TreePanel1" runat="server" RootVisible="false">
                <Fields>
                    <ext:ModelField Name="date" Type="Date" DateFormat="yyyy-MM-dd" />
                </Fields>
                <ColumnModel>
                    <Columns>
                        <ext:TreeColumn runat="server" Header="Text" DataIndex="text" />
                        <ext:DateColumn 
                            runat="server" 
                            Header="Date" 
                            DataIndex="date" 
                            Format="yyyy-MM-dd">
                            <Editor>
                                <ext:DateField runat="server" Format="yyyy-MM-dd" />
                            </Editor>    
                        </ext:DateColumn>
                    </Columns>
                </ColumnModel>
                <Root>
                    <ext:Node Text="Root" Expanded="true">
                        <Children>
                            <ext:Node NodeID="Node1" Text="Node 1" Leaf="true">
                                <CustomAttributes>
                                    <ext:ConfigItem Name="date" Value="2012-09-19" Mode="Value" />
                                </CustomAttributes>
                            </ext:Node>
                            <ext:Node Text="Node 2" Leaf="true">
                                <CustomAttributes>
                                    <ext:ConfigItem Name="date" Value="2012-09-19" Mode="Value" />
                                </CustomAttributes>
                            </ext:Node>
                        </Children>
                    </ext:Node>
                </Root>
                <Plugins>
                    <ext:CellEditing runat="server" />
                </Plugins>
            </ext:TreePanel>
            <ext:Button runat="server" Text="Set new date">
                <Listeners>
                    <Click Fn="setNewDate" />
                </Listeners>
            </ext:Button>
        </form>
    </body>
    </html>
    Last edited by Daniil; Sep 19, 2012 at 2:07 PM. Reason: Removed View from the sample since it is not required
  3. #3
    This is great! However, I been handed a wrinkle. I had to add the checkbox selection model and the items to update should only be the rows that are selected. I tried
     node.data.selected
    and
    node.get("selected")
    , but that always returned false. How can I check for selection in this scenario?
  4. #4
    As an update, I did get this to work:
    App.reinsurerTree.selModel.selected.getByKey(node.id)
    However, I don't know if this is the best/correct method to do this. If possible, please let me know if there is a better method.
  5. #5
    Please use the isSelected method.
    http://docs.sencha.com/ext-js/4-1/#!...hod-isSelected
  6. #6
    That works!

    One final thing. After the code executes, all my selections are cleared. I would prefer that not to happen. Is there a way to do that?
  7. #7
    Quote Originally Posted by adelaney View Post
    After the code executes, all my selections are cleared.
    Please clarify what code?
  8. #8
    This:

    /*********************************************************
     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.
            debugger;
            if (node !== rootNode) {
                if (node.isLeaf() && App.reinsurerTree.selModel.isSelected(node)) {
                    node.beginEdit();
                    node.set(storeColumnName, newDate);
                    node.endEdit();
                }
            }
        }); 
    }
  9. #9
    Seems it doesn't clear selection with my test case.

    Please provide a full sample to reproduce.
  10. #10
    Oh boy. That's a lot of code. I am not sure you are going to like that. One thing that I see that might be an easy test is that my button is in the header of the grid, and that button opens a modal window with a datefield to pick a date from. I'm not sure why that would matter, but it is a difference. If that isn't it or if you prefer, I will send all the code.
Page 1 of 2 12 LastLast

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