Add multi Cascaded Drop-down-List in the tree-grid Angular1

[weam ghalab]

 I need project DDL To filter Scope DDL then  Scope Filter ProcessDDL then process Will Filter three DDL (Trade,Zone and Revision) when i used the cascaded property it doesnt work

   [AllowAnonymous]

        [Route("getScope")]

        public HttpResponseMessage GetScope(HttpRequestMessage request)

        {

            return CreateHttpResponse(request, () =>

            {

                HttpResponseMessage response = null;

                var Scopes = _unitOfWork.ScopeRepository.GetAll(i => i.Archived != true && i.Processes.Where(l => l.Archived != true).Count() > 0).ToList();

                var scopeData = Scopes.Select(x => new {

                    x.ProjectID,

                    x.ScopeID,

                    x.ScopeName

                });

                response = request.CreateResponse(HttpStatusCode.OK, scopeData);

                return response;

            });

        }

        [AllowAnonymous]

        [Route("getProcess")]

        public HttpResponseMessage GetProcess(HttpRequestMessage request)

        {

            return CreateHttpResponse(request, () =>

            {

                HttpResponseMessage response = null;

                var processes = _unitOfWork.ProcessRepository.GetAll(i => i.Archived != true).ToList();

                var processData = processes.Select(x => new {

                    x.ScopeID,

                    x.ProcessID,

                    x.ProcessName

                });

                response = request.CreateResponse(HttpStatusCode.OK, processData);

                return response;

            });

        }

        [AllowAnonymous]

        [Route("getZones")]

        public HttpResponseMessage GetZones(HttpRequestMessage request)

        {

            return CreateHttpResponse(request, () =>

            {

                HttpResponseMessage response = null;

                var Zones = _unitOfWork.ProcessZoneRepository.GetAll(i => i.Archived != true && i.Process.Archived!=true&&i.Zone.Archived!=true).ToList();

                var zoneData = Zones.Select(x => new {

                    x.ProcessID,

                    ZoneID = x.ZoneID,

                    x.Zone.ZoneName

                });

                response = request.CreateResponse(HttpStatusCode.OK, zoneData);

                return response;

            });

        }

HTML:

 <div id="TreeGridContainer" ej-treegrid="TreeGridOption" >

                    </div>

JS:

 columns: [

                          {

                              field: "ProcessTransactionID", headerText: "ProcessTransaction ID", visible: false, isPrimaryKey: true, hideFromChooser: true

                          },

                          {

                              field: "EmployeeID", headerText: "Employee", editType: ej.TreeGrid.EditingType.Dropdown, dropdownData: $scope.EmployeeList,

                              editParams: {  fields: { text: "EmployeeName", value: "EmployeeID" } }

                          },

                          {

                              field: "ProjectID", headerText: "Project", editType: ej.TreeGrid.EditingType.Dropdown, dropdownData: $scope.ProjectList, validationRules: { required: true },

                              editParams: {

                                  fields: { text: "ProjectName", value: "ProjectID" }, selectedItemIndex: 0, cascadeTo: 'ScopeID',cascade: 'onChange'

                              }

                          }, {

                              field: "ScopeID", headerText: "Scope", editType: ej.TreeGrid.EditingType.Dropdown, validationRules: { required: true }, dropdownData: $scope.ScopeList,

                              editParams: {

                                  fields: { text: "ScopeName", value: "ScopeID" }, selectedItemIndex: 0, cascadeTo: 'ProcessID', cascade: 'onChange'

                              }

                          },

                          {

                              field: "ProcessID", headerText: "Process", editType: ej.TreeGrid.EditingType.Dropdown, validationRules: { required: true }, dropdownData: $scope.ProcessList,

                              editParams: {

                                  fields: { text: "ProcessName", value: "ProcessID" }, selectedItemIndex: 0, cascadeTo: 'ZoneID,TradeID,RevisionID', cascade: 'onChange'

                              }   

                          },

                          {

                              field: "ZoneID", headerText: "Zone", editType: ej.TreeGrid.EditingType.Dropdown, dropdownData: $scope.ZoneList,

                              editParams: { fields: { text: "ZoneName", value: "ZoneID" }, selectedItemIndex: 0 }

                          },

                          {

                              field: "TradeID", headerText: "Trade", editType: ej.TreeGrid.EditingType.Dropdown, dropdownData: $scope.TradeList,

                              editParams: { fields: { text: "TradeName", value: "TradeID" }, selectedItemIndex: 0 }

                          },

                          {

                              field: "RevisionID", headerText: "Revision", editType: ej.TreeGrid.EditingType.Dropdown, dropdownData: $scope.RevisionList,

                              editParams: { fields: { text: "RevisionName", value: "RevisionID" }, selectedItemIndex: 0 }

                          },

                          {

                              field: "CheckIn", headerText: "CheckIn", editType: ej.TreeGrid.EditingType.DatePicker, format: "{0:MM/dd/yyyy}", validationRules: { date: true }

                          },

                          {

                              field: "CheckOut", headerText: "CheckOut", editType: ej.TreeGrid.EditingType.DatePicker, format: "{0:MM/dd/yyyy}", validationRules: { date: true }

                          }

                ]

[Jayakumar Duraisamy]

Hi Weam, 

Thanks for contacting Syncfusion support. 

We have analyzed your given code and understood that to achieve cascaded behavior with three dropdown columns in TreeGrid.  

We would like to suggest you that to use dropdown client side events to achieve cascaded behavior in dropdown list when edit the row. In the TreeGrid column, we have editParams property to enable/disable API’s/events of other controls. By using this property, we can bind the events like change and beforePopupShown of dropdown list. When click the dropdown list at that time we will update filtered record to the cascade dropdown list’s datasource in the beforePopupShown event and when change the dropdown value it will clear the value of cascade dropdown controls. 

Please refer following code snippet 

// Sample dropdown’s data 

var projectData = [ 

                { id: 1, text: "Project1", value: "Project1" }, 

                { id: 2, text: "Project2", value : "Project2" } 

        ]; 

        var scopeData = [ 

       { id: 1, parentID: "Project1", text: "Scope1", value: "Scope1" }, 

       { id: 2, parentID: "Project2", text: "Scope2", value: "Scope2" }, 

       { id: 1, parentID: "Project1", text: "Scope3", value: "Scope3" }, 

       { id: 2, parentID: "Project2", text: "Scope4", value: "Scope4" } 

        ]; 

        var processData = [ 

            { parentID: "Scope1", text: "Process 1", value: "Process 1" }, 

            { parentID: "Scope2", text: "Process 2", value: "Process 2" }, 

            { parentID: "Scope3", text: "Process 3", value: "Process 3" }, 

            { parentID: "Scope4", text: "Process 4", value: "Process 4" }, 

        ]; 

var columns = [ 

//… 

{ 

                        field: "project", headerText: "ProjectID", editType: "dropdownedit", dropdownData: projectData, editParams: {fields: { text: "text", value: "value" }, change: "projectChange"} 

                    }, 

            { 

                field: "scope", headerText: "ScopeID", editType: "dropdownedit", dropdownData: scopeData, editParams: { 

                    fields: { text: "text", value: "value" }, beforePopupShown: "updateScopeData", change: "scopeChange" 

                } 

            }, 

            { field: "process", headerText: "ProcessID", editType: "dropdownedit", dropdownData: processData, editParams: { fields: { text: "text", value: "value" }, beforePopupShown: "updateProcessData" } }, 

 

            ];   $scope.columns = columns; 

 

We have also prepared a sample for your reference, please find the sample location as below, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Cascade_DLL_TreeGrid-955044147.zip  

Please let us know if require further assistance on this. 

Regards, 

Jayakumar D