We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

130486 May 15,2017 04:47 PM UTC May 17,2017 01:16 PM UTC AngularJS 1
loading
Tags: ejTreeGrid
weam ghalab
Asked On May 15, 2017 04:47 PM UTC

 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 [Syncfusion]
Replied On May 17, 2017 01:16 PM UTC

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, 
Please let us know if require further assistance on this. 
Regards, 
Jayakumar D 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;