1. Home
  2. Forum
  3. Angular - EJ 2
  4. text clear issue of dropdown list

text clear issue of dropdown list

Hi Team,

I am using ejs grid version: "^21.2.3", and angular 16,

I tried to clear text value of dropdown list getting below error


this.DDlobject.value = null -- issue







code:

component

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';

import { DropDownListComponent } from "@syncfusion/ej2-angular-dropdowns";

@Component({

selector: 'ge-upload-lcadata',

templateUrl: './upload-lcadata.component.html',

styleUrls: ['./upload-lcadata.component.scss'],

encapsulation: ViewEncapsulation.None,

})

export class UploadLcadataComponent implements OnInit {

@ViewChild('ddlelement', { static: false })

public DDlobject: DropDownListComponent;

public value: string = '';

public ccDropdownList: any[] = [];


constructor() { }



ngOnInit(): void {

this.ccDropdownList = [

{

id: "1",

value: "Yes"

},

{

id: "2",

value: "No"

},

];

}

onCCChange(event: any) {

let value = event.value;

}

reSetValue(){

debugger;

this.DDlobject.value = null;

}


}


html

<div>

  <ejs-dropdownlist #ddlelement id='ddlelement' [dataSource]='ccDropdownList'

                    [fields]="{ text: 'value', id: 'id' }"

                    [value]="value"

                    popupHeight='auto' popupWidth='auto'

                    [ignoreAccent]='true'

                    placeholder='Select a value'

                    filterBarPlaceholder='Filter of Credit Card'

                    (change)='onCCChange($event)'>

  </ejs-dropdownlist>

  <button type="button" class="btn btn-secondary btnfont mar-left-15" (click)="reSetValue()">Reset</button>

</div>


might be if i used angular 16 and ejs grid  "^21.2.3", getting below issue




i observed 

 used angular 8 and ejs grid "^19.3.54",", 

not issue of  this.DDlobject.value = null;


please resolve issue and let me know asap.


Thanks & Regards

Chalamaiah N





6 Replies
HS Hemanthkumar S Syncfusion Team May 25, 2023 08:21 AM UTC

Hi Narsimsetty Chalamaiah,


Greetings from Syncfusion support.


Before we proceed with providing a solution to your query, we would like to request some additional information to better understand the issue you are facing. Please provide us with the following details:


  1. Could you please provide a detailed description of the usage of Syncfusion EJ2 Dropdown in the Grid?
  2. Are you using a dropdown inside the column template or row template or some other template of the Grid?
  3. Could you kindly share the complete code for rendering the Grid? Having the full code will allow us to review the implementation and potentially identify any issues or suggest improvements.
  4. Please provide the versions of the Syncfusion EJ2 Dropdown package that you are using in both Angular 8 and Angular 16. This information is crucial for reproducing the issue accurately and ensuring that the solution aligns with the specific package version.
  5. If possible, sharing a video demonstration of the issue would greatly assist us in better understanding your query. It would allow us to visualize the problem and provide more precise guidance or suggestions.
  6. If you have a reproducible sample that showcases the issue, please share it with us. Having a sample will enable us to directly analyze and validate the problem, which can lead to a faster resolution.


We appreciate your cooperation in providing us with the requested information, as it will help us provide a more effective solution to your query.


Regards,

Hemanth Kumar S


NC Narsimsetty Chalamaiah May 25, 2023 11:52 AM UTC

Hi  Hemanthkumar ,


I am using Dropdown list out side grid, this is not grid realted issue,

am using     "@syncfusion/ej2-angular-dropdowns": "^21.2.3", version with angular 16,

getting    this.DDlobject.value = null; issue only

i am giving  all code to you. 

please find below code 

Component Code:

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';

import { DropDownListComponent } from "@syncfusion/ej2-angular-dropdowns";

@Component({

  selector: 'ge-upload-lcadata',

  templateUrl: './upload-lcadata.component.html',

  styleUrls: ['./upload-lcadata.component.scss'],

  encapsulation: ViewEncapsulation.None,

})

export class UploadLcadataComponent implements OnInit {

  @ViewChild('ddlelement', { static: false })

  public DDlobject: DropDownListComponent;

  public value: string = '';

  public ccDropdownList: any[] = [];

  constructor() { }

  ngOnInit(): void {

    this.ccDropdownList = [

      {

        id: "1",

        value: "Yes"

      },

      {

        id: "2",

        value: "No"

      },

    ];

  }


  onCCChange(event: any) {

    let value = event.value;

  }

  reSetValue() {

    this.DDlobject.value = null;

  }

}





Html

<div>

  <ejs-dropdownlist #ddlelement id='ddlelement' [dataSource]='ccDropdownList'

                    [fields]="{ text: 'value', id: 'id' }"

                    [value]="value"

                    popupHeight='auto' popupWidth='auto'

                    [ignoreAccent]='true'

                    placeholder='Select a value'

                    filterBarPlaceholder='Filter of Credit Card'

                    (change)='onCCChange($event)'>


  </ejs-dropdownlist>

  <button type="button" class="btn btn-secondary btnfont mar-left-15" (click)="reSetValue()">Reset</button>

</div>








If not understand please setupcall on 26-05-2023 by 4pm IST, 


Thanks & Regards

Chalamaiah N


NC Narsimsetty Chalamaiah May 25, 2023 12:14 PM UTC

Hi Team,

I followed below link 

https://stackblitz.com/edit/angular-dgvhuv-sjyvso?file=src%2Fapp.component.ts


I am using ejs grid version: "^21.2.3", and angular 16, getting below issue 

but  As i observed used angular 8 and ejs grid "^19.3.54", not getting issue 


please find previous request link : https://support.syncfusion.com/support/tickets/441627

please find below screen shot 



if not understand please set up call on 26-05-2023 by 4pm.


Thanks & Regards

Chalamaiah N


NC Narsimsetty Chalamaiah May 30, 2023 02:14 AM UTC

Hi Team,


I replayed on 25th may but so far i didn't get resolve issue, please update asap.


Thanks & Regards

Chalamaiah N


PK Priyanka Karthikeyan Syncfusion Team May 30, 2023 01:52 PM UTC

Hi Narsimsetty,

We have prepared sample as per shared information. You can resolve the reported issue by change the following line on your sample. Please find the code snippet and sample attached for your reference. 

@ViewChild('ddlelement', { static: false })
public DDlobject!: DropDownListComponent;
reSetValue() {
    (this.DDlobject as any).value = null;
  }

Sample: https://stackblitz.com/edit/gmmgo1-juslgk?file=src%2Fapp%2Fapp.component.ts,package.json,src%2Fapp%2Fapp.module.ts,src%2Findex.html

Regards,

Priyanka K


NC Narsimsetty Chalamaiah May 30, 2023 04:14 PM UTC

Thanks for update , it is working as expected.


Thanks & regards

Chalamaiah N



Loader.
Up arrow icon