Creating a Drill-Down JQuery TreeGrid

This page describes the process of creating a drill-down JQuery TreeeGrid. The page in question is the Chart of Accounts under Finance.

The TreeGrid used is from the jqwidgets API - documentation on the API is at: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtreegrid/jquery-treegrid-getting-started.htm.The complete code for the page is in the attached file. Here is the complete walkthrough of the code.

The first step is to include the necessary CSS and JS files, this is required for using all of the JqWidgets controls.

The next step is to setup the function that is called when the document is loaded, this function will load the grid into the page.

$(document).ready(function () {

The first code to be called is to initialize the variable that contains the ledgers and groups that are displayed in the TreeGrid:

var ledgers = [

<razor>

@{

var hasComma = false;

foreach(var dbRow in OMNIFINANCE.GetChartOfAccounts())

{

if(hasComma){

}

<text>{ name: '@System.Web.HttpUtility.HtmlEncode(dbRow.name)', code: '@dbRow.code', finst: '@dbRow.finst', company: '@dbRow.company', parent_uid: '@dbRow.parent_uid', node_uid: '@dbRow.node_uid' }</text>

hasComma = true;

}

</razor>

];

- The code within the <razor> tag is executed in the server side when the page is first loaded.
- OMNIFinance.GetChartOfAccounts() calls a MyToken object that executes the SQL statement that returns the list of Account Groups and Account Ledgers. Each row that is returned is stored in the variable dbRow and the foreach loop iterates through all the rows being returned by the MyToken object.
- The <text> tag then prints the variables into the Javascript object so that the ledgers variable (in javascript) contains an array of Groups and Ledgers.

The next block of code creates an instance of the TreeGrid object and sets the various parameters associated with the TreeGrid instance.

// prepare the data

var source =

{

dataType: "json",

dataFields: [

{ name: 'name', type: 'string' },

{ name: 'code', type: 'string' },

{ name: 'finst', type: 'string' },

{ name: 'company', type: 'string' },

{ name: 'parent_uid', type: 'string' },

{ name: 'node_uid', type: 'string' }

],

hierarchy:

{

keyDataField: { name: 'node_uid' },

parentDataField: { name: 'parent_uid' }

},

id: 'node_uid',

localData: ledgers

};

var dataAdapter = new $.jqx.dataAdapter(source);

// create Tree Grid

$("#treeGrid").jqxTreeGrid(

{

altRows: true,

editable: false,

filterable: true,

source: dataAdapter,

sortable: true,

ready: function()

{

$("#treeGrid").jqxTreeGrid('expandRow', '2');

},

columns: [

{ text: 'Code', dataField: 'code', width: 100 },

{ text: 'Ledger/Group', dataField: 'name', width: 420},

{ text: 'Type', dataField: 'finst', width: 80},

{ text: 'Company', dataField: 'company', width: 200 },

{ text: '', dataField: 'parent_uid', width: 80,

cellsRenderer: function (row, column, value, rowData) {

if(rowData.parent_uid.length == 0)

{

var container = '<div style="width: 100%; height: 100%;">';

var link = "<a href='/omni/Finance/Masters/EditAccountGroup.aspx?oid="+rowData.node_uid+"' class='btn btn-default btn-xs'><span class='fa fa-pencil'></span></a>";

link += "<a href='/omni/Finance/Masters/AddAccountLedger.aspx?oid="+rowData.node_uid+"' class='btn btn-default btn-xs'><span class='fa fa-plus'></span></a>";

container += link;

container += "</div>";

return container;

}

else

{

var container = '<div style="width: 100%; height: 100%;">';

var link = "<a href='/omni/Finance/Masters/EditAccountLedger.aspx?oid="+rowData.node_uid+"' class='btn btn-default btn-xs'><span class='fa fa-pencil'></span></a>";

container += link;

container += "</div>";

return container;

}

},

]

});

</script>

The various options with the TreeGrid instance are defined in the JqWidget API.

The final step is to actually display the TreeGrid instance through HTML

</div>

<br/>