Sunday, March 20, 2011

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.

image

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!

Tuesday, March 8, 2011

Could not open key: Software\Microsoft\ASP.NET\x.x.x.x : ASP.NET Application Installation issue

The problem is related to ASP.NET application installation. I had an ASP.NET 4.0 application. I created a setup for that application. I tried to install it in a machine where .Net framework 4.0 was installed. I got the following error:

clip_image002

I was unable to infer the problem from the above error. After googling a bit, I figured the problem out. My machine had .net framework 4.0 Beta installed and my web application was developed in released version of .Net framework 4.0. The version of the web application and .net runtime of deployed machine didn’t match. In order to install asp.net application, the ASP.NET version of install application and .net runtime version of the web server’s machine has to be same. You can check the version from the property of Setup project.

clip_image004

This requirement is true for any version of ASP.NET application to be installed.

Monday, March 7, 2011

Never define blank div as <div id=”dv”/>

Today, I came across an interesting behavior of div. It may be well-known to everyone but new to me. I needed a blank div. I wanted to set the InnerHTML of the div from javascript. Instead of end tag, I declared the div as <div id=”dv”/>

No wonder, I can access the div from Javascript. When I assign anything (say “Test”) into innerHtml of the div, the html below the div is replaced by the “Test”. However, if you declare the div as <div id=”dv”></div>, it will work as expected. 

Therefore, we should always use end tag of div.

Hope this helps to someone!

Sunday, March 6, 2011

The page cannot be found: Install .Net framework 4.0 and deploy ASP.Net 4.0 application in IIS 6.0

You have an IIS 6.0 web server with .net framework 2.0 installed. You want to deploy ASP.Net 4.0 application in this web server. In order to this, you will install .net framework 4.0 and deploy your asp.net 4.0 application. When you access your newly deployed application, you will get “The page cannot be found”.

A lot of headless running around ensued after this, trying to figure out why 404 is occurring. It is difficult to trace this error. Since the web application is deployed accurately, there is no reason of this error.

The problem is in the following image:

clip_image002

When you install the .net framework 4.0, by default it’s not allowed. You have to allow it to run the asp.net 4.0 application.

Hope this helps!

Tuesday, March 1, 2011

Use jsTree with WCF Restful Service

If you try to use jsTree with WCF Restful service, you will find some difficulty. It is not as simple as drag a control from toolbox, drop it onto aspx page and bind the data source. You need to tweak the jsTree source code to use it with WCF Restful Service. Below is the snapshot of Demo application.

The demo application uses WCF restful service. The service contains a GetTreeData operation which returns a list of TreeData as a JSON. The property name of the TreeData class has to be same as declared in the demo application. jsTree uses these property name to construct the tree. I have added an additional property for custom css which is not available in the default jsTree source code. You can add a custom css for each node now.

When WCF restful service returns JSON, it adds a root property under which the actual returned object remains. So you have to tell the jsTree to use the actual JSON object. To make this happen, I have added a “dataPath” property to jsTree and changed the source a bit.

If you click on the node, it will not be expanded by default. The jsTree doesn’t support this. I have changed jsTree source to make this happen. Therefore, use the source code of JsTree included in the demo application rather than original jsTree source code.

You can download the demo application from here.

Hope this helps!