Retrieving the Transaction Log of Added and Removed Nodes (igTree)

Topic Overview

Purpose

This topic explains, with code examples, how to retrieve the transaction log about adding and removing nodes in the igTree™ control.

Required background

The following topics are prerequisites to understanding this topic:

Adding and Removing Nodes Overview and Examples (igTree): This topic explains, with code examples, how to add and remove nodes of igTree control programmatically.

In this topic

This topic contains the following sections:

Introduction

Overview

Transaction log stores information about added or removed nodes from igTree. The information is stored in an array, which contains JSON objects. Each JSON object has a type of operation (a property with addnode and removenode string values) and node data such as node text. The igTree control supports retrieving that transaction log. Retrieving the transaction log is done with the transactionLog method. This method returns the JSON object containing the type of operation and the node data.

Code Example: Retrieving the Transaction Log

Description

The code in this example demonstrates retrieving the transaction log and parsing it to HTML output. The HTML output contains the type of operation – whether the nodes have been added or removed and the node text.

Prerequisites

To complete the procedure, you need:

An HTML file with an instance of the igTree control bound to a data source
A placeholder defined in the HTML file for displaying the transaction log
At least one add/remove node operation performed in the igTree.

Preview

This preview picture demonstrates the transaction log retrieved with the code in this example and then converted to HTML and displayed beneath the tree to which it pertains.

Code

Place this code in the placeholder for displaying the transaction log in the HTML page.

In JavaScript:

// parsing transaction log arguments to a string
function parseData(data) {
                var string = "", i;
                if (data.length) {
                    for (i = 0; i < data.length; i++) {
                        string += data[i].Text + (i < data.length - 1 ? ", " : "");
                    }
                } else {
                    string += data.Text;
                }
                return string;
            }
var log = $("#tree").igTree("transactionLog");
var html = "";
for (i = 0; i < log.length; i++) {
    html += "<p>" + log[i].type +  " " + parseData(log[i].tdata.data)
 + "</p>";
}

Ignite UI | Help Topics