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

ejMaskEdit change event

Thread ID:

Created:

Updated:

Platform:

Replies:

128458 Jan 24,2017 06:42 AM Feb 3,2017 07:18 AM Angular 5
loading
Tags: ejMaskEdit
Agne
Asked On January 24, 2017 06:42 AM

Hello,

I have treeview component where data is displayed from database. I want to filter data in that treeview also getting data from database (by using textbox, or maskedit component). Filter (maskedit) is working, but in seems not correctly or I do not know how to write it. The problem is: when I input text in maskedit the filter is working correctly (I get correct data from database) but when I click with mouse somewhere else (not only on application but anywhere on window/other applications), somehow maskedit change event is firing again, but all the method values are undifined. What I need to do that change event won't fire again when I just click with mouse somewhere else on window)?

I am using html tags for treeview and maskedit like this:
    <ej-treeview #gpTreeViewMenuControl id="treeView" cssClass="customize"  (nodeSelect)="onNodeSelected($event)" width="100%" [height]="menuHeight" [fields]="menuFields" expandOn='click' (nodeExpand)="onNodeExpand($event)" (nodeCollapse)="onNodeCollapse($event)"></ej-treeview>
    <div id="filter">
        <input id="maskedit" ej-maskedit watermarkText="Search" inputmode="ej.InputMode.Text" maskFormat="" width="100%" (change)="onFilterChange($event)" />
    </div>

And in Typescript file change method like this:
    //Function triggers while change the TextBox input value and start new search
    onFilterChange(args) {
        if (this.inputObj.get_StrippedValue() != null)
        {
            this.searchVal = this.inputObj.get_StrippedValue().toLowerCase();
            this.search(this.searchVal);
        }
        else
        {
            $("#treeView").ejTreeView({loadOnDemand: true});
            this.menuFields = this.menuFieldSaveLoad;
        }
    }

    //Filtering data from database by input text in maskedit
    search(searchVal) {
        $("#treeView").ejTreeView({loadOnDemand: false});
        var myUrl = 'http://localhost:57526/';
        var dataManager = new ej.DataManager({ url: myUrl + "menu/GetMenuPost?phraseSearch=" + searchVal, crossDomain: true, adaptor: new ej.UrlAdaptor(),
            headers: [{Authorization: 'Bearer ' + JSON.parse(localStorage.getItem('currentUser')).authToken}]  });
        this.menuFields = { dataSource: dataManager, id: 'id', parentId: 'parent_Id', text: 'text', hasChild: 'leaf', expanded: 'expanded', imageUrl: 'iconCls', tableName: 'className' };
    }

Piramanayagam Ramakrishnan [Syncfusion]
Replied On January 25, 2017 10:41 AM

Hi Agne, 
 
Thanks for contacting Syncfusion support. 
 
We have analysed your query (“ejMaskEdit change event triggers when I click with mouse somewhere else (not only on application but anywhere on window/other applications)”). We would like to inform you that, the “change” event will be triggered when focus out the component from Angular. We can identify origin of “change” event using “isInteraction” event arguments. We can use the below code to control the “change” event triggering from Angular (When focus out the component/click on window/other application). 
 
[Script] 
 
function onFilterChange(args) { 
    if(args.isInteraction == true || args.isInteraction == false )  
    { 
        //isInteraction == true ->User change the value  
        //isInteraction == false ->Dynamically change the value from MaskEdit component. 
        //isInteraction == undefined ->It’s triggers from angular  
        //your code block 
    } 
} 
 
 
 
For your reference we have prepared simple sample, it can be downloaded from below location. 
 
 
If still the problem persists, please revert back the provided sample based on your application along with replication procedure. This would be more helpful for us to provide better solution at the earliest. 
 
Regards, 
Ashokkumar B. 


Agne
Replied On January 25, 2017 11:04 AM

Hello,

it was very helpful, my problem is solved! Thank you very much!

Balamurugan P [Syncfusion]
Replied On January 26, 2017 12:05 AM

Hi Agne,  
  
Most welcome. 
  
Regards, 
Balamurugan 


Agne
Replied On February 2, 2017 09:57 AM

Hello again,

I am still working with this filter and change event. I want to insert option to delete all text in maskEdit on click. I am doing with this code (from example: http://jsbin.com/bebug/11/edit?html,css,output):
    ngAfterViewInit()
    {
        console.log(angularObj.inputObj.get_StrippedValue());
            function tog(v){return v?'addClass':'removeClass';}
            $(document).on('input', '.clearable', function(){
                $(this)[tog(this.value)]('x');
            }).on('mousemove', '.x', function( e ){
                $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');  
            }).on('touchstart click', '.onX', function( ev ){
                ev.preventDefault();
                $(this).removeClass('x onX').val('').change();
            });
   }

The problem is - when I click on x, text on maskEdit component is deleted, but change event is not triggered. But when I am clicking somewhere else - event triggers (args.isInteraction = true).

Ashokkumar Balasubramanian [Syncfusion]
Replied On February 3, 2017 07:18 AM

Hi Agne,   
   
We have analyzed your code snippet. We have found that you have tried to change the value of MaskEdit component to empty string also trying to manually call the change event. We would like to let you know that change event will be automatically triggered when changing MaskEdit value. To change the MaskEdit component value, please use the 'value' API.   
   
Please refer your modified code block.   
   
ngAfterViewInit()   
    {   
        console.log(angularObj.inputObj.get_StrippedValue());   
            function tog(v){return v?'addClass':'removeClass';}    
            $(document).on('input', '.clearable', function(){   
                $(this)[tog(this.value)]('x');   
            }).on('mousemove', '.x', function( e ){   
                $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');      
            }).on('touchstart click', '.onX', function( ev ){   
                ev.preventDefault();   
                $(this).removeClass('x onX');   
                // create the object for maskedit control   
                var obj=$(this).ejMaskEdit("instance");   
                obj.option("value","");   
            });   
   }   
   
To know more details about the value property, please refer the below API reference.   
   
 
Please let us know if you need further assistance on this. 
   
Regards,   
Ashokkumar B.  


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

;