Ext JS TreeGrid with WCF Restful Service

The TreeGrid of Ext JS is one of the most powerful controls of ext js control library. It has been added to the library recently. Most of the features and flexibilities of Tree and Grid are in TreeGrid.

Let’s see how we can use treegrid with WCF restful service.

1> Treegrid is not included in the default ext js’s script library. It has separate script and css files. To use this control we have to download the script files and add it into our project. You will get everything in the demo project.

2> We can create a new treeGrid by using the following code snippet:

var treeGrid = new Ext.ux.tree.TreeGrid({
            width: 900,
            root: localallTagsNode,
            renderTo: 'treeRegion',
            autoHeight: true,
            columns: colModel,
            loader: treeGridLoaderlocal
        });

You have to set the root node. 'treeRegion' is div where the control will be rendered. colModel is collection of columns defined as:

var colModel = [{
            header: 'Team Name',
            dataIndex: 'Name',
            id:"Id",
            width: 230
        },
        {
            header: 'Total Match',
            dataIndex: 'TotalMatch',
            id: "Id",
            width: 150
        },
        {
            header: 'Win',
            dataIndex: 'Win',
            width: 150
        },
        {
            header: 'Loss',
            dataIndex: 'Loss',
            width: 150
        }];

‘dataIndex’ is property name of JSON object.

3> There is no default json tree loader for treeview. However, you will find an extended version of the Treeloader for json object. You will find this inside ExtWrapper.js file.

4> In order to create a JSONTreeLoader, use the following code snippet:

var  treeGridLoaderlocal = new JsonTreeLoader({
        dataUrl: ServiceHelper.getServiceUrl('GetTeam'),
        requestMethod: 'post',
        responseRoot: 'GetTeamResult'
    });

dataUrl is the url of the restful service. In the above example ‘GetTeam’ is the operation name of the service. Another important thing to notice is ‘respoonseRoot’. 'GetTeamResult' is the root element of returned JSON object. This is how WCF restful service returns data. The syntax is operationName + ‘Result’.

That’s all you need to create TreeGrid in Ext JS with WCF restful service.

You can download the source code from here.

Hope this helps!