Hi, 

please help,

i'm need to add sub deparments (child) under department(parent) object and also have to do crud on both objects.

this is controller so far :-

public class DepartmentController {
    public Department__c record{get;set;}
    public List<Department__c> Departments{get;set;}
    public Sub_Department__c recordSub{get;set;}
    public List<Sub_Department__c> subD{get;set;}
    
    public DepartmentController() {
        Departments = [SELECT Id, Name, Description__c FROM Department__c];
    }
    public Department__c getDepartment() {
        Id id = System.currentPageReference().getParameters().get('id');
        subD = [SELECT Id, Name,Description__c FROM Sub_Department__c 
                WHERE Department__c = :id];
        If(id == null){
            record = new Department__c();
        }else{
            record  = [SELECT Id, Name,Description__c FROM Department__c WHERE Id = :id];
        }
        return record;
    }
    public void addSubDeptRow(){
        Id id = System.currentPageReference().getParameters().get('id');
        insert new Sub_Department__c(Name = 'Sub',Department__c = id);
        //recordSub = new Sub_Department__c();
        //system.debug('####before subD : '+subD.size());
        //subD.add(recordSub);
       // system.debug('####after subD : '+subD.size());
    }
    public PageReference save(){
        upsert(record);
        PageReference redirect = new PageReference('/apex/listViewDepartment');
        redirect.setRedirect(true); 
        return redirect;
    }
    public void add(){
        upsert(record);
    }
    public PageReference deleteRow(){
        Id id = System.currentPageReference().getParameters().get('id');
        delete [Select Id From Department__c WHERE Id = :id];
        PageReference redirect = new PageReference('/apex/listViewDepartment');
        redirect.setRedirect(true); 
        return redirect;
    }
    public PageReference deleteSubRow(){
        Id id = System.currentPageReference().getParameters().get('id');
        delete [Select Id From Sub_Department__c WHERE Id = :id];
        PageReference redirect = new PageReference('/apex/listViewDepartment');
        redirect.setRedirect(true); 
        return redirect;
    }
}

 this is visualforce :

<apex:page controller="DepartmentController" showHeader="false">
        <apex:stylesheet value="{!$Resource.detailForms}"/>
        <apex:includescript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"/>
        <apex:stylesheet value="{!URLFOR($Resource.DataTables, 'DataTables/css/ColReorder.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.DataTables, 'DataTables/css/ColVis.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.DataTables, 'DataTables/css/TableTools.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.DataTables, 'DataTables/css/ColumnFilterWidgets.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.DataTables, 'DataTables/css/styles-min.css')}"/>
        <apex:includeScript value="{!URLFOR($Resource.DataTables, 'DataTables/js/jquery.dataTables.js')}" />
        <apex:includeScript value="{!URLFOR($Resource.DataTables, 'DataTables/js/ColVis.js')}" />
        <apex:includeScript value="{!URLFOR($Resource.DataTables, 'DataTables/js/ZeroClipboard.js')}" />
        <apex:includeScript value="{!URLFOR($Resource.DataTables, 'DataTables/js/TableTools.js')}" />
        <apex:includeScript value="{!URLFOR($Resource.DataTables, 'DataTables/js/ColumnFilterWidgets.js')}" />
        <style>
            .selected { background-color:blue; }
        </style>
        
        <script type="text/javascript" charset="UTF-8">
            window.onload = hideall;
            function hideall(){
                $('.onrowSelect:first').trigger('click');
                $('.add:first').hide();
                $('.edit:first').hide();    
            }        
            $(document).ready( function () {
              var oTable = $('#contacttable').dataTable( {
                  "sDom": 'WRC<"clear">lftip',
                  "bJQueryUI": true,
                  "sPaginationType": "full_numbers",
                  "aoColumnDefs": [ { "bVisible": false, "aTargets": [ ] }],
                  "oColumnFilterWidgets": { "aiExclude": [ 0, 3, 4 ] }
             });
             $('.onrowSelect').click(function() {
                    var selRow = $(this).attr('value');
                    $(this).parent().parent().find("tr").removeClass("selected");
                    $(this).parent().addClass("selected");
                    //alert(selRow1);
                    $('.'+selRow).trigger('click');
                    displayedit();
            });
          });
        function confirmDelete() {
            return confirm('Are you sure you want to delete?');
        }
        function displayadd() {
            $('.add:first').show();
            $('.edit:first').hide();
        }
        function displayedit() {
            $('.add:first').hide();
            $('.edit:first').show();
        }         
        </script>
<div id="customdiv">
<apex:pageBlock id="page">
 <apex:form >
  <apex:commandbutton onclick="displayadd();" reRender="add" value="Add Department" />
 </apex:form>

<table cellpadding="0" cellspacing="0" border="0" class="display" id="contacttable" style="margin-top:20px;"> 
<thead><tr><th>Department</th><th>Description</th><th>Action</th></tr></thead>
<tbody>
    <apex:repeat value="{!Departments}" var="c">
        <tr value="{!c.Id}" >
            <td value="{!c.Id}" class="onrowSelect" colspan="1">{!c.Name}</td>
            <td value="{!c.Id}" class="onrowSelect">{!c.Description__c}</td>
    <apex:form >
        <td>
            <apex:commandbutton reRender="edit" value="edit" styleClass="{!c.Id}" status="status" style="display:none;">
            <apex:param name="id" value="{!c.Id}" /></apex:commandbutton>
            <apex:commandbutton reRender="page" value="delete" onClick="if (!confirmDelete()) return false;" action="{!deleteRow}">
            <apex:param name="id" value="{!c.Id}" /></apex:commandbutton>
        </td>
    </apex:form>
</tr></apex:repeat></tbody>
</table></apex:pageBlock></div>

<apex:outputPanel id="edit" styleClass="edit">
<apex:form id="theForm73">
 <div class="formBg">
        <apex:actionStatus startText="processing..." id="status"/><br/>
            <apex:inputHidden value="{!Department.id}" />
            <div class="formDetails">        
                <span class="detailsTitle">Department Name : </span><apex:inputText value="{!Department.name}" />
            </div>
            <div class="formDetails">
                <span class="detailsTitle">Description : </span><apex:inputText value="{!Department.Description__c}" />
            </div>
            <div class="addButton">
                <apex:commandButton value="update" action="{!save}" rerender="page" styleClass="button" />
            </div>

  <table cellpadding="0" cellspacing="0" border="0" class="display" id="contacttable" style="margin-top:20px;"> 
    <thead><tr><th>SubDepartment</th><th>Description</th><th>Action</th></tr></thead>
    <tbody>
      <apex:repeat value="{!subD}" var="c">
        <tr>
            <td class="formDetails"><apex:inputField value="{!c.Name}"/></td>
            <td class="formDetails"><apex:inputField value="{!c.Description__c}"/></td>
            <td>
                <apex:commandbutton reRender="edit" value="delete" onClick="if (!confirmDelete()) return false;" action="{!deleteSubRow}">
                <apex:param name="id" value="{!c.Id}" /></apex:commandbutton>
            </td>
        </tr>
      </apex:repeat>     
    </tbody>
                <apex:commandbutton reRender="edit" value="addSubDeptRow" action="{!addSubDeptRow}">
                <apex:param name="id" value="{!Department.Id}" /></apex:commandbutton>
  </table>
 </div>
</apex:form>     
</apex:outputPanel>

<apex:outputPanel id="add" styleClass="add">
    <apex:form >
        <div class="formBg">
            <div class="formDetails">
                <span class="detailsTitle">SubDepartment Name : </span><apex:inputText value="{!record.name}" required="true"/>
            </div>
            <div class="formDetails">
                <span class="detailsTitle">Description : </span><apex:inputText value="{!record.Description__c}" />
            </div>
            <div class="addButton">
                <apex:commandButton value="Add" action="{!save}" styleClass="button"> </apex:commandButton>
            </div>
        </div>
    </apex:form>
</apex:outputPanel>

</apex:page>