current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote -1 down vote favorite

This is my table structure:

Table structure

I want create TREEVIEW Format of State---> district --> city --> village in MVC

This is my query:

CREATE TABLE [dbo].[countrylist] 
( 
    [countrylistid]      [INT] IDENTITY(1, 1) NOT NULL, 
    [kodepos_postcode]   [VARCHAR](50) NULL, 
    [kelurahan_village]  [VARCHAR](50) NULL, 
    [kecamatan_district] [VARCHAR](50) NULL, 
    [jenis_type]         [VARCHAR](50) NULL, 
    [kab_city]           [VARCHAR](50) NULL, 
    [propinsi_state]     [VARCHAR](50) NULL, 
    CONSTRAINT [PK_countryList] PRIMARY KEY CLUSTERED ( [countrylistid] ASC ) 
    WITH (pad_index = OFF, statistics_norecompute = OFF, ignore_dup_key = OFF, 
    allow_row_locks = on, allow_page_locks = on) ON [PRIMARY] 
) 
ON [PRIMARY]
share|improve this question
    
Generally Stackoverflow does not answer overly broad 'how do I do this' type questions. In this case it appears you have done little research on your own to develop a treeview or find a package to make a treeview. Additionally, the formatting on your question could be improved for readability. See stackoverflow.com/help/how-to-ask – Cody G. yesterday
up vote 0 down vote

Below steps you need to perform,

  1. Get your data from DB
  2. Prepare tree structure in javascript and store that in to scope variable
  3. Bind that variable to UI

Once we got proper tree structured data, we can render that using recursive template.

DEMO

I considered your data like

DATA

scope.dataFromDB= [
              {'id':1 ,'propinsi_STATE' : 0, 'village':"State 1"},
              {'id':4 ,'propinsi_STATE' : 2 ,'village':"Taluka 1.1"},
              {'id':3 ,'propinsi_STATE' : 1, 'village':"District 2"},
              {'id':5 ,'propinsi_STATE' : 0, 'village':"State 2"},
              {'id':6 ,'propinsi_STATE' : 0, 'village':"State 3"},
              {'id':2 ,'propinsi_STATE' : 1, 'village':"District 1"},
              {'id':7 ,'propinsi_STATE' : 4, 'village':"village 1.1.1"},
              {'id':8 ,'propinsi_STATE' : 1, 'village':"District 3"},
              {'id':9 ,'propinsi_STATE' : 3, 'village':"Taluka 2.1"}
              ];

HTML 

<div my-directive></div>
    <script id="myDirectiveTemplate" type="text/ng-template">
          <ul>
            <li ng-repeat="item in items">
              {{item.village}}
              <div ng-if="item.children.length > 0" ng-include="'itemTemplate'"></div>
            </li>
          </ul>
    </script>
   <script type="text/ng-template" id="itemTemplate">
    <ul>
      <li ng-repeat="item in item.children">
          {{item.village}}
         <div ng-if="item.children.length > 0" ng-include="'itemTemplate'"></div>
      </li>
    </ul>
  </script>

I hope this will help you.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.