JQuery tree plugin with Dynamic Data

Introduction:

In this article i do explain that how we can bind JQuery tree plugin with Dynamic Data.
For this i have used JStree jquery Plugin.
Click here to download the code.



Binding the JQuery plugin is very easy in java script. First i have created a Web Method which will call on page load.

Using Code:
I have created a class name Codes, FlatTreeAttribute and RecursiveObject classes as below


public class Codes
{
    public Int64 Id { getset; }
    public Int64 ParentId { getset; }
    public Int64 Level { getset; }
    public string Code { getset; }
   
}

public class RecursiveObject
{
    public string data { getset; }
    public Int64 id { getset; }
    public Int64 level { getset; }
    public FlatTreeAttribute attr { getset; }
    public List<RecursiveObject> children { getset; }
}

public class FlatTreeAttribute
{
    public string id;
    public Int64 level { getset; }
    public bool selected;
}



Now I will create a page Method “GetTreeData()” Which will return the data source as in string format by using java script Serializer. I have created a List<Codes> with the static data as below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Script.Serialization;
using System.Web.Services;


public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
     

    }
    [WebMethod(true)]
    public static string GetTreeData()
    {
      
        List<Codes> objCode = GetDataSource();
        var recursiveObjects = FillRecursive(objCode, 0);
        string myjsonmodel = new JavaScriptSerializer().Serialize(recursiveObjects);

        return myjsonmodel;
    }

    #region Data

    private static  List<Codes> GetDataSource()
    {
        List<Codes> lstCodes = new List<Codes>();

        lstCodes = new List<Codes>{
                        new Codes { Id = 1, ParentId = 0, Code = "Code1" },
                        new Codes { Id = 2, ParentId = 0, Code = "Code2" },
                        new Codes { Id = 11, ParentId = 1, Code = "Code1.1" },                       
                        new Codes { Id = 12, ParentId = 1, Code = "Code1.2" },                       
                        new Codes { Id =21, ParentId = 2, Code = "Code2.1" }, 
                        new Codes { Id =22, ParentId = 2, Code = "Code2.2" }, 
                        new Codes { Id =31, ParentId = 11, Code = "Code3" }, 
                        new Codes { Id =32, ParentId = 11, Code = "Code3" }, 
                        new Codes { Id =33, ParentId = 21, Code = "Code3" }, 
                        new Codes { Id =34, ParentId = 21, Code = "Code3" }, 
                        new Codes { Id =35, ParentId = 21, Code = "Code3" }, 
                        new Codes { Id =36, ParentId = 22, Code = "Code3" }, 
                        new Codes { Id =41, ParentId = 36, Code = "Code3" }, 
                        new Codes { Id =42, ParentId = 36, Code = "Code3" }, 
                        new Codes { Id =43, ParentId = 36, Code = "Code3" }, 
                    };


        return lstCodes as List<Codes>;


    }

    #endregion

    private static List<RecursiveObject> FillRecursive(List<Codes> flatObjects, Int64 parentId)
    {
        List<RecursiveObject> recursiveObjects = new List<RecursiveObject>();

        foreach (var item in flatObjects.Where(x => x.ParentId.Equals(parentId)))
        {
            recursiveObjects.Add(new RecursiveObject
            {
                data = item.Code,
                id = item.Id,
                level = item.Level,
                attr = new FlatTreeAttribute { id = item.Id.ToString(), level = item.Level, selected = true },
                children = FillRecursive(flatObjects, item.Id)
            });
        }
        return recursiveObjects;
    }

  
}



Finally the ASPX code as below.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default"
    Title="JS Tree" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="description" content="Data Tree with JQuery">
    <meta name="keywords" content="Data Tree, JQuery Tree, JS Tree, JSTree with Multiple level, DataTree with hierarchical relation">   
    <meta charset="UTF-8">
    <title>JS Tree</title>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.jstree.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#tree").jstree(
                {
                    "checkbox""{ real_checkboxes: false, checked_parent_open: false }",
                    "plugins": ["themes""json_data""ui"],
                    "json_data": {
                        "ajax": {
                            "type""POST",
                            "contentType""application/json; charset=utf-8",
                            "url""Default.aspx/GetTreeData",
                            "dataType""json",
                            "data""{}",
                            "success"function (retval) {
                                if (retval.hasOwnProperty('d')) {
                                    return (eval(retval.d));
                                }
                            }
                        }
                    }
                }).bind("select_node.jstree"function (e, data) {

                    var text = data.inst.get_text();
                    alert("Selected Node is: " + text) ;                  
                });
        });     
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="tree">
    </div>
    </form>
</body>
</html>







Comments

Popular posts from this blog

Introduction to Agile development

Cross Domain AJAX Request:Error blocked by CORS policy: No 'Access-Control-Allow-Origin' header

What is Aws?