ejMaskEdit change event

[Agne]

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]

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. 

 

Sample. 

 

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]

Hello,

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

[Balamurugan P]

Hi Agne,  

  

Most welcome. 

  

Regards, 

Balamurugan 

[Agne]

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]

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.   

   

https://help.syncfusion.com/api/js/ejtextboxes#members:value   

 

Please let us know if you need further assistance on this. 

   

Regards,   

Ashokkumar B.