Styjun

Cut the gold chain

Creating a histogram using custom data

Can Ogre clerics use Purify Food and Drink on humanoid characters?

Do I need a shock-proof watch for cycling?

Why does independence imply zero correlation?

Is there a term for the belief that "if it's legal, it's moral"?

How do I choose a villain in the Waterdeep: Dragon Heist adventure?

How do I professionally let my manager know I'll quit over an issue?

Why do all the teams that I have worked with always finish a sprint without completion of all the stories?

What is the highest voltage from the power supply a Raspberry Pi 3 B can handle without getting damaged?

Explain why a line can never intersect a plane in exactly two points.

Primes and SemiPrimes in Binary

How to make clear to people I don't want to answer their "Where are you from?" question?

Can humans ever directly see a few photons at a time? Can a human see a single photon?

Prime sieve in Python

Why is it recommended to mix yogurt starter with a small amount of milk before adding to the entire batch?

Boss wants someone else to lead a project based on the idea I presented to him

Hit the Bulls Eye with T in the Center

Encounter design and XP thresholds

Loss of power when I remove item from the outlet

Android Material and appcompat Manifest merger failed in react-native or ExpoKit

Putting a plot inside a tab

What is the meaning of "понаехать"?

Excluding a rectangular region from an image in FITS

Angular Ag Grid Clear Text Input Issue

Angular Ag Grid Single Click Issue with IE 11Angular HTML bindingHow to detect a route change in Angular?Angular EXCEPTION: No provider for HttpAngular - Set headers for every requestWhat is the equivalent of ngShow and ngHide in Angular 2+?Angular/RxJs When should I unsubscribe from `Subscription`How to detect when an @Input() value changes in Angular?Huge number of files generated for every Angular projectCan't bind to 'ngModel' since it isn't a known property of 'input'Clearing data in ag-grid and angular2

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

Hi, I am using Ag Grid enterprise version 17.0 with Angular 5. The text fields seem to have an issue. I am unable to clear the values in text fields. The cross symbol associated with the text field as per the attachment is not clearing the text on click of it. Can you please let me know how to make this clear text field work using the cross symbol ? Please find the attachment for your reference.

Column Definition

 headerName: 'Contact Name',
 formEditable: true,
 isRequired: true,
 width: 150,
 minWidth: 150,
 suppressPaste: false,
 field: 'contactName',
 suppressFilter: true,

angular ag-grid

share|improve this question

edited Mar 25 at 7:47

Nithin

asked Mar 25 at 7:37

NithinNithin

4711

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you include your code as well, for the table's column definitions
  
  – Senal
  Mar 25 at 7:43
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can I check your code for your custom cell editor? Are you using a custom component for it? ag-grid.com/javascript-grid-cell-editor/…
  
  – wentjun
  Mar 25 at 7:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi, I have updated the question with table column definition. The contact name appears with a cross symbol but when I click on it, nothing happens.
  
  – Nithin
  Mar 25 at 7:48
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi, A wrapper has been created on top of current ag grid but for the text fields the usual ag grid text field has been used.
  
  – Nithin
  Mar 25 at 7:53
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it works. check this plunk plnkr.co/edit/S6PcE5nLoWtBKgNls2jy?p=preview for reference. OR, provide us a plunk reproducing the issue
  
  – Paritosh
  Mar 25 at 8:06
  

  
  
  
  

 | 
show 1 more comment

0

Hi, I am using Ag Grid enterprise version 17.0 with Angular 5. The text fields seem to have an issue. I am unable to clear the values in text fields. The cross symbol associated with the text field as per the attachment is not clearing the text on click of it. Can you please let me know how to make this clear text field work using the cross symbol ? Please find the attachment for your reference.

Column Definition

 headerName: 'Contact Name',
 formEditable: true,
 isRequired: true,
 width: 150,
 minWidth: 150,
 suppressPaste: false,
 field: 'contactName',
 suppressFilter: true,

angular ag-grid

share|improve this question

edited Mar 25 at 7:47

Nithin

asked Mar 25 at 7:37

NithinNithin

4711

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you include your code as well, for the table's column definitions
  
  – Senal
  Mar 25 at 7:43
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can I check your code for your custom cell editor? Are you using a custom component for it? ag-grid.com/javascript-grid-cell-editor/…
  
  – wentjun
  Mar 25 at 7:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi, I have updated the question with table column definition. The contact name appears with a cross symbol but when I click on it, nothing happens.
  
  – Nithin
  Mar 25 at 7:48
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi, A wrapper has been created on top of current ag grid but for the text fields the usual ag grid text field has been used.
  
  – Nithin
  Mar 25 at 7:53
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it works. check this plunk plnkr.co/edit/S6PcE5nLoWtBKgNls2jy?p=preview for reference. OR, provide us a plunk reproducing the issue
  
  – Paritosh
  Mar 25 at 8:06
  

  
  
  
  

 | 
show 1 more comment

Hi, I am using Ag Grid enterprise version 17.0 with Angular 5. The text fields seem to have an issue. I am unable to clear the values in text fields. The cross symbol associated with the text field as per the attachment is not clearing the text on click of it. Can you please let me know how to make this clear text field work using the cross symbol ? Please find the attachment for your reference.

Column Definition

 headerName: 'Contact Name',
 formEditable: true,
 isRequired: true,
 width: 150,
 minWidth: 150,
 suppressPaste: false,
 field: 'contactName',
 suppressFilter: true,

angular ag-grid

share|improve this question

edited Mar 25 at 7:47

Nithin

asked Mar 25 at 7:37

NithinNithin

4711

 headerName: 'Contact Name',
 formEditable: true,
 isRequired: true,
 width: 150,
 minWidth: 150,
 suppressPaste: false,
 field: 'contactName',
 suppressFilter: true,

angular ag-grid

angular ag-grid

share|improve this question

edited Mar 25 at 7:47

Nithin

asked Mar 25 at 7:37

NithinNithin

4711

share|improve this question

edited Mar 25 at 7:47

Nithin

asked Mar 25 at 7:37

NithinNithin

4711

asked Mar 25 at 7:37

NithinNithin

4711

asked Mar 25 at 7:37

NithinNithin

4711

1 Answer
1

active

oldest

votes

1

I have managed to create a demo thanks to the plunkr provided by @Paritosh. By Ag-grid's convention, you should create a custom component using the frameworkComponents and ICellEditorAngularComp.

You may check it out over here for the full demo, and refer to the column named 'Numeric': https://plnkr.co/edit/QWPNv9IBvaBuv8yAdWYg?p=preview

Once you are on the demo, refer to app/numeric-editor.component.ts.

Basically, I have added a 'cross' button on the input, and attached a click event binding to that button:

<div class="search_field">
 <input #input (keydown)="onKeyDown($event)" [(ngModel)]="value">
 <button type="button" (click)="clear()"style="position: absolute;top: 3px;right: 10px;">
 <span>&times;</span>
 </button>
</div>

And this is how I defined my clear() method. The idea is to set it as undefined (or empty string), and return that value respectively.

clear() 
 this.value = null;
 console.log(this.value);
 return this.value;

The styling may not be perfect, but I hope you get my idea

share|improve this answer

edited Mar 27 at 9:23

answered Mar 25 at 8:54

wentjunwentjun

5,7481422

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for the update. I got the idea. I will try to implement the functionality which you have mentioned
  
  – Nithin
  Mar 25 at 9:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Nithin yup, do let me know if it works on your end too.
  
  – wentjun
  Mar 25 at 9:37
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  You should not need to do this. Don't go into x-y problem. Here the issue is, the x icon is provided by IE, which is not working in OP's post. Creating custom editor component is overhead here
  
  – Paritosh
  Mar 25 at 11:01
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @wentjun Hi, Thanks for your kind support. I have implemented your solution and it works fine. But there is one question. May i know why you are setting this.value = undefined instead of null ?
  
  – Nithin
  Mar 27 at 9:17
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Would you mind to have a look at this issue and address it ?[stackoverflow.com/questions/56022346/…
  
  – Nithin
  May 8 at 5:37
  

  
  
  
  

 | 
show 2 more comments

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55333124%2fangular-ag-grid-clear-text-input-issue%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

I have managed to create a demo thanks to the plunkr provided by @Paritosh. By Ag-grid's convention, you should create a custom component using the frameworkComponents and ICellEditorAngularComp.

You may check it out over here for the full demo, and refer to the column named 'Numeric': https://plnkr.co/edit/QWPNv9IBvaBuv8yAdWYg?p=preview

Once you are on the demo, refer to app/numeric-editor.component.ts.

Basically, I have added a 'cross' button on the input, and attached a click event binding to that button:

<div class="search_field">
 <input #input (keydown)="onKeyDown($event)" [(ngModel)]="value">
 <button type="button" (click)="clear()"style="position: absolute;top: 3px;right: 10px;">
 <span>&times;</span>
 </button>
</div>

And this is how I defined my clear() method. The idea is to set it as undefined (or empty string), and return that value respectively.

clear() 
 this.value = null;
 console.log(this.value);
 return this.value;

The styling may not be perfect, but I hope you get my idea

share|improve this answer

edited Mar 27 at 9:23

answered Mar 25 at 8:54

wentjunwentjun

5,7481422

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for the update. I got the idea. I will try to implement the functionality which you have mentioned
  
  – Nithin
  Mar 25 at 9:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Nithin yup, do let me know if it works on your end too.
  
  – wentjun
  Mar 25 at 9:37
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  You should not need to do this. Don't go into x-y problem. Here the issue is, the x icon is provided by IE, which is not working in OP's post. Creating custom editor component is overhead here
  
  – Paritosh
  Mar 25 at 11:01
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @wentjun Hi, Thanks for your kind support. I have implemented your solution and it works fine. But there is one question. May i know why you are setting this.value = undefined instead of null ?
  
  – Nithin
  Mar 27 at 9:17
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Would you mind to have a look at this issue and address it ?[stackoverflow.com/questions/56022346/…
  
  – Nithin
  May 8 at 5:37
  

  
  
  
  

 | 
show 2 more comments

1

I have managed to create a demo thanks to the plunkr provided by @Paritosh. By Ag-grid's convention, you should create a custom component using the frameworkComponents and ICellEditorAngularComp.

You may check it out over here for the full demo, and refer to the column named 'Numeric': https://plnkr.co/edit/QWPNv9IBvaBuv8yAdWYg?p=preview

Once you are on the demo, refer to app/numeric-editor.component.ts.

Basically, I have added a 'cross' button on the input, and attached a click event binding to that button:

<div class="search_field">
 <input #input (keydown)="onKeyDown($event)" [(ngModel)]="value">
 <button type="button" (click)="clear()"style="position: absolute;top: 3px;right: 10px;">
 <span>&times;</span>
 </button>
</div>

And this is how I defined my clear() method. The idea is to set it as undefined (or empty string), and return that value respectively.

clear() 
 this.value = null;
 console.log(this.value);
 return this.value;

The styling may not be perfect, but I hope you get my idea

share|improve this answer

edited Mar 27 at 9:23

answered Mar 25 at 8:54

wentjunwentjun

5,7481422

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for the update. I got the idea. I will try to implement the functionality which you have mentioned
  
  – Nithin
  Mar 25 at 9:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Nithin yup, do let me know if it works on your end too.
  
  – wentjun
  Mar 25 at 9:37
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  You should not need to do this. Don't go into x-y problem. Here the issue is, the x icon is provided by IE, which is not working in OP's post. Creating custom editor component is overhead here
  
  – Paritosh
  Mar 25 at 11:01
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @wentjun Hi, Thanks for your kind support. I have implemented your solution and it works fine. But there is one question. May i know why you are setting this.value = undefined instead of null ?
  
  – Nithin
  Mar 27 at 9:17
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Would you mind to have a look at this issue and address it ?[stackoverflow.com/questions/56022346/…
  
  – Nithin
  May 8 at 5:37
  

  
  
  
  

 | 
show 2 more comments

I have managed to create a demo thanks to the plunkr provided by @Paritosh. By Ag-grid's convention, you should create a custom component using the frameworkComponents and ICellEditorAngularComp.

You may check it out over here for the full demo, and refer to the column named 'Numeric': https://plnkr.co/edit/QWPNv9IBvaBuv8yAdWYg?p=preview

Once you are on the demo, refer to app/numeric-editor.component.ts.

Basically, I have added a 'cross' button on the input, and attached a click event binding to that button:

<div class="search_field">
 <input #input (keydown)="onKeyDown($event)" [(ngModel)]="value">
 <button type="button" (click)="clear()"style="position: absolute;top: 3px;right: 10px;">
 <span>&times;</span>
 </button>
</div>

And this is how I defined my clear() method. The idea is to set it as undefined (or empty string), and return that value respectively.

clear() 
 this.value = null;
 console.log(this.value);
 return this.value;

The styling may not be perfect, but I hope you get my idea

share|improve this answer

edited Mar 27 at 9:23

answered Mar 25 at 8:54

wentjunwentjun

5,7481422

<div class="search_field">
 <input #input (keydown)="onKeyDown($event)" [(ngModel)]="value">
 <button type="button" (click)="clear()"style="position: absolute;top: 3px;right: 10px;">
 <span>&times;</span>
 </button>
</div>

clear() 
 this.value = null;
 console.log(this.value);
 return this.value;

share|improve this answer

edited Mar 27 at 9:23

answered Mar 25 at 8:54

wentjunwentjun

5,7481422

answered Mar 25 at 8:54

wentjunwentjun

5,7481422

answered Mar 25 at 8:54

wentjunwentjun

5,7481422