Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
315
Manually inserting data for new tree not working as UI does not update
posted

I'm manually updating all data in my treegrid.  I do this via a jQuery Ajax call which works fine for the grid and for the paging.  But, I added an event for expanding the tree so it will execute my Ajax call and after receiving the data I put that data on the correct place in the dataSource. The tree does however not expand while if I check the dataSource it does have the data in the correct format.

This is my TreeGrid definition:

 var treeGrid = $("#" + this.tableId[documentClassListId]).igTreeGrid({
        autoAdjustWidth: true,
        dataSourceType: "json",
        rendered: function (event, args) {
            //Request data
            this.refreshTreeData(documentClassListId, this.createMessage(ruleCode, documentObjectId), tableColumns);
        }.bind(this),
        requestError: function (event, args) {
            this.showError(JSON.parse(args.response.responseJSON).ErrorMessage);
        }.bind(this),
        autoGenerateColumns: false,
        initialExpandDepth: 0,
        enableRemoteLoadOnDemand: true,
        columns: tableColumns,
        rowExpanding: function (event, ui) {
            var newDocumentObjectId = $(ui.row[0]).children().last().attr("data-documentObjectId");
            this.refreshTreeData(documentClassListId, this.createMessage(ruleCode, newDocumentObjectId), tableColumns, ui.row[0].rowIndex);
        }.bind(this),
        responseDataKey: "items",
        childDataKey: "children",
        features: [
          {
              name: 'Paging',
              type: "remote",
              mode: 'rootLevelOnly',
              pageSizeChanging: function (event, args) {
                  this.pageSize = args.newPageSize;
                  this.refreshTreeData(documentClassListId, this.createMessage(ruleCode, documentObjectId), tableColumns);
              }.bind(this),
              pageIndexChanging: function (event, args) {
                  this.pageIndex = args.newPageIndex;
                  this.refreshTreeData(documentClassListId, this.createMessage(ruleCode, documentObjectId), tableColumns);
              }.bind(this)
          }
        ]
    });

and my AjaxCall is: 

$.ajax({
        url: 'MyUrlToTheData',
        dataType: "text",
        type: "POST",
        global: false,
        data: { "message": JSON.stringify(message), "columns": JSON.stringify(tableColumns), "path": this.objectPath },
        success: function (data) {
            var dataObj = JSON.parse(JSON.parse(data));
            var treeGrid = $("#" + this.tableId[documentClassListId]);
            if (row === undefined) {
                treeGrid.igTreeGrid("option", "responseTotalRecCountKey", "AvailableRowCount");
                treeGrid.igTreeGrid("option", "dataSource", dataObj);
            } else {
                var dataSource = treeGrid.igTreeGrid("option", "dataSource");
                dataSource.items[row - 1].children = dataObj.items;
                // dataSource = dataSource.items.splice(0, 3);
                treeGrid.igTreeGrid("dataSourceObject", dataSource);
                //  treeGrid.igTreeGrid("option", "dataSource", dataSource);
                treeGrid.igTreeGrid("dataBind");
            }
            return true;
        }.bind(this),
        error: function (data) {
            this.showError(JSON.parse(data.responseText).ErrorMessage);
        }.bind(this)
    });

The part where I put the data in the dataSource when a row is expanded is:

 var dataSource = treeGrid.igTreeGrid("option", "dataSource");

                dataSource.items[row - 1].children = dataObj.items;

                treeGrid.igTreeGrid("dataSourceObject", dataSource);

                //  treeGrid.igTreeGrid("option", "dataSource", dataSource);

                treeGrid.igTreeGrid("dataBind");

After this code, the data in the dataSource is correct. I'm also not getting any error messages.  But the plussign keeps a plussign and the row is not expanding.  

I've tried a lot already and searched though your forums and Google, but no luck so far.  Any idea's?

  • 345
    Verified Answer
    Offline posted

    Hello Marco,

     

    Thank you for contacting Infragistics Support.

     

    I created and isolated sample in order to investigate the issue, but I was unable to reproduce the behavior you describe.

    I used the code that I am sending you – it has two different data source objects, Selection and Paging features enabled, and I am using some of the code from your ajax call – the “dataSourceObject” option and the “dataBind” method. Still the igTreeGrid works as expected after I change the data source at runtime.

     

    Please test this sample on your side; whether or not it works correctly may help indicate the nature of this problem - if it shows the API method working correctly, this indicates a possible problem in the code of your application. It would help if you can provide a small, isolated sample application that demonstrates the behavior you are seeing.

     

    Or, if this sample project is not an accurate demonstration of what you're trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one.

     

    If you need any additional assistance, feel free to contact me.

    <!DOCTYPE html>
    <html>
    <head>
        <title>Sample</title>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
        <script src="http://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.loader.js"></script>
        <style>
            #btn-div{
                text-align: center;
               
            }
            #table-div, #btn-div{
                margin: 50px auto;
                width: 800px
            }
        </style>
    </head>
    <body>
        <div id="btn-div">
            <input id="changeDS" type="button" value="Change DataSourceObject" disabled>
        </div>
        <div id="table-div">
            <table id="treeGrid"></table>
        </div>
        <script>
            $.ig.loader({
    			scriptPath: "http://cdn-na.infragistics.com/igniteui/2017.2/latest/js/",
    			cssPath: "http://cdn-na.infragistics.com/igniteui/2017.2/latest/css/",
    			resources: "igGrid.*,igTreeGrid.*,igHierarchicalGrid.*,igCombo",		
                ready: function() {
                    var hierarchicalDS = [
                        {
                            "id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "52%", "products": [
                                { "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "10%" },
                                { "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "10%" },
                                { "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "10%" },
                                { "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "10%" },
                                {
                                    "id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [
                                        { "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "10%" },
                                        { "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" },
                                        { "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" }
                                    ]
                                },
                                {
                                    "id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "15%", "products": [
                                        { "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "15%" },
                                        { "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "10%" },
                                        { "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "10%" },
                                        { "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "10%" }
                                    ]
                                },
                                { "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" }
                            ]
                        }
                    ]
                    var hierarchicalDS2 = [
                        {
                            "id": 0, "tasks": "Project Plan 2", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [
                                { "id": 1, "tasks": "Planning 2", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "10%" },
                                { "id": 2, "tasks": "Write a specification 2", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" },
                                { "id": 3, "tasks": "Create a demo application 2", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" },
                                { "id": 4, "tasks": "Collect a feedback 2", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" },
                                {
                                    "id": 5, "tasks": "Design 2", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [
                                        { "id": 8, "tasks": "Conceptual Design 2", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" },
                                        { "id": 9, "tasks": "Preliminary Design 2", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" },
                                        { "id": 10, "tasks": "Final Design 2", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" }
                                    ]
                                },
                                {
                                    "id": 6, "tasks": "Development 2", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "15%", "products": [
                                        { "id": 11, "tasks": "Implementation 2", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "15%" },
                                        { "id": 12, "tasks": "Testing 2", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "10%" },
                                        { "id": 13, "tasks": "Bug fixing 2", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "10%" },
                                        { "id": 14, "tasks": "Documenting 2", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "10%" }
                                    ]
                                },
                                { "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" }
                            ]
                        }
                    ]
                    $("#changeDS").on("click", function(){
                        $("#treeGrid").igTreeGrid("dataSourceObject", hierarchicalDS2);
                        $("#treeGrid").igTreeGrid("dataBind");
                        $(this).prop("disabled", true)
                    });
                    $("#treeGrid").igTreeGrid({
                        width: "100%",
                        dataSource: hierarchicalDS,
                        autoGenerateColumns: false,
                        autoCommit: true,
                        height: 500,
                        width: 800,
                        primaryKey: "id",
                        columns: [
                            { headerText: "ID", key: "id", width: "10%", dataType: "number", hidden: true },
                            { headerText: "Tasks", key: "tasks", width: "30%", dataType: "string" },
                            { headerText: "Start", key: "start", width: "20%", dataType: "string" },
                            { headerText: "Finish", key: "finish", width: "20%", dataType: "string" },
                            { headerText: "Duration", key: "duration", width: "20%", dataType: "string" },
                            { headerText: "Progress", key: "progress", width: "10%", dataType: "string" }
                        ],
                        childDataKey: "products",
                        rendered: function(){
                            $("#changeDS").prop("disabled", false)
                        },
                        features: [
                            {
                                name: "Selection",
                                multipleSelection: true,
                            },
                            {
                                name: "Paging",
                                pageSize: 10,
                                mode: 'allLevels'
                            }
                        ]
                    });   
                }    
            });
        </script>
    </body>
    </html>