How to hide the ID in the input-dropdown?

[Alex]

I use as backend a NoSQL database with dynamic ID's. So in my case are the Task-ID's long and ugly for reading. However, I don't need to show my users the Task-ID and I hide it everywhere (context-menu and tooltip already). The only problem is the input-dropdown in the “Dependency” tab when I add or edit tasks. I can easily hide the ID-Column, but in the name field is it still visible (because the name is combined between ID-Name). So, is it possible that I can show in the name field only the name of the task without the Task-ID? In the image below can you see an example from the ID (red underline) which I try to hide.

[Gopinath Munusamy]

Hi Alex,

We have prepared a workaround sample that should help you achieve your requirement. In this sample, we have trimmed the Task ID value from the dropdown list in the Dependency tab. To achieve this, we have utilized the actionComplete event with the requestType of openAddDialog and openEditDialog. You can find the below sample and code snippets for more details,

Code Snippets:

public actionComplete(args) {

    if (args.requestType === 'openEditDialog' || args.requestType === 'openAddDialog') {

      var tabObj = document.getElementById('Gantt_Tab').ej2_instances[0];

      tabObj.selected = function (args) {

        if (args.selectedIndex === 1) {

          var ganttObj = document.getElementById('GanttDependencyTabContainer');

          if (ganttObj) {

            var gantt = ganttObj.ej2_instances[0];

            gantt.actionComplete = function (args) {

              var dropDownElement = document.getElementById('GanttDependencyTabContainername');

              if (dropDownElement) {

                var dropDown = dropDownElement.ej2_instances[0];

                if (args.requestType == 'add') {

                  dropDown.actionBegin = function (args) {

                    for (var i = 0; i < args.data.dataSource.json.length; i++) {

                      var text = args.data.dataSource.json[i].text;

                      args.data.dataSource.json[i].text = text.substr(text.indexOf('-') + 1).trim();

                    }

                  };

                }

              }

            };

          }

        }

      };

    }

  }

Sample: https://stackblitz.com/edit/angular-79cboc-toeq7a?file=app.component.ts,app.component.html,data.ts

Regards,

Gopinath M

[Alex]

Hi Gopinath,

Thanks for your support. I try out your sample already and for adding new elements work everything fine. I just change the part below because my ID can also contain '-' but it's still working fine.

for (let i = 0; i < args.data.dataSource.json.length; i++) {

         const obj = args.data.dataSource.json[i];

         args.data.dataSource.json[i].text = obj.text.substr(obj.id.length + 1).trim();

 }

The only problem which I still struggle now is when I'm editing existing elements. I saw in your sample it's also not working and still showing the ID in the name column.

I think the difficulty is that we need to change to name of the element before we open the dropdown. Do you have any solution how I can also fix it when editing elements?

Best Regards,

Alex

[Lokesh Arjunan]

Hi Alex,

We validated your query and we can achieve your requirement using beginEdit requestType of dropdown element in actionComplete event. We have attached code snippet and sample for your reference. 

Code Snippet:

app.component.ts 

public actionComplete(args) { 

    if ( 

      args.requestType === 'openEditDialog' || 

      args.requestType === 'openAddDialog' 

    ) { 

      var tabObj = document.getElementById('Gantt_Tab').ej2_instances[0]; 

      tabObj.selected = function (args) { 

        if (args.selectedIndex === 1) { 

          var ganttObj = document.getElementById('GanttDependencyTabContainer'); 

          if (ganttObj) { 

            var gantt = ganttObj.ej2_instances[0]; 

            gantt.actionComplete = function (args) { 

              var dropDownElement = document.getElementById( 

                'GanttDependencyTabContainername' 

              ); 

              if (dropDownElement) { 

                var dropDown = dropDownElement.ej2_instances[0]; 

                if (args.requestType == 'beginEdit') { 

                  for ( 

                    var i = 0; 

                    i < dropDown.dataSource.dataSource.json.length; 

                    i++ 

                  ) { 

                    var text =      dropDown.dataSource.dataSource.json[i].text; 

                    dropDown.dataSource.dataSource.json[i].text = text 

                      .substr(text.indexOf('-') + 1) 

                      .trim(); 

                  } 

                } 

                ……… 

                ……… 

              } 

            }; 

          } 

        } 

      }; 

    } 

 Sample: https://stackblitz.com/edit/angular-79cboc-qsfkwc?file=app.component.ts,app.component.html,data.ts

Regards,

Lokesh