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.

How to use in AngularJS

Thread ID:

Created:

Updated:

Platform:

Replies:

132164 Aug 17,2017 10:56 AM Aug 19,2017 09:22 AM ASP.NET Core 1
loading
Tags: Autocomplete
Mariusz Wojewoda
Asked On August 17, 2017 10:56 AM

Hello, 

I've got a little problem. I don't know how i can use autocomplete in AngularJS. The whole project is ASP.Core page with angularjs scripts.

Right now it looks like this:

  <ej-autocomplete e-select="select" id="searchSlownik" locale="pl-PL" min-character="0" width="100%" filter-type="@FilterOperatorType.Contains">

<e-datamanager url="/Slownik/WszystkieSlowniki" adaptor="UrlAdaptor" offline="false"></e-datamanager>

 <e-autocomplete-fields key="SlownikId" text="Nazwa" />

</ej-autocomplete>

It work's but i need to access selected item in AngularJS script. How can i add a AngularJS function to select event?

Right now i ended with something like this but it not working. 

<input ej-autocomplete e-select="select" id="srch" e-locale="pl-PL"  e-min-character="0" e-width="100%" e-filter-type="@FilterOperatorType.Contains" e-fields-key="SlownikId" e-fields-text="Nazwa" e-datamanager-url="/Slownik/WszystkieSlowniki" e-datamanager-adaptor="UrlAdaptor" e-datamanager-offline="false"/>

The problem is with datamanager. I don't know if it's proper way to configure it.


Arun Palaniyandi [Syncfusion]
Replied On August 19, 2017 09:22 AM

Hi Mariusz Wojewoda, 
 
Thanks for contacting Syncfusion support.  
 
Based on your requirement we have created an Autocomplete AngularJS sample with datasource from datamanager in ASP.NET core app. Please refer to the Code example, sample and online forum for define the select event and datamanager for Angular Autocomplete in ASP.NET core.  
 
 
Code example:  
  
<html lang="en" ng-app="Autoapp"> 
<body ng-controller="AutoCtrl"> 
    <div class="content-container-fluid"> 
        <div class="row"> 
            <div class="cols-sample-area"> 
                <h3>Autocomplete1</h3> 
                <ej-autocomplete id="searchSlownik" min-character="0" width="100%" watermark-text="searchSlownik" query="ej.Query()" filter-type="@FilterOperatorType.Contains" select="onselect"> 
 
                    <e-datamanager url="Home/GetData" adaptor="UrlAdaptor" offline="false"></e-datamanager> 
                    <e-autocomplete-fields key="Id" text="Subject" /> 
 
                </ej-autocomplete> 
                <br /> 
                <br /> 
                <br /> 
                <h3>Autocomplete2</h3> 
                <input ej-autocomplete id="srch" e-min-character="0" type="text" e-datasource="dataList" e-watermarktext="searchSlownik" e-query="dataquery" e-select="onselect" e-fields-key="Id" e-fields-text="Subject" e-width="100%" /> 
            </div> 
        </div> 
    </div> 
 
    <script> 
        var dataManger = ej.DataManager({ 
            url: "Home/GetData", 
            adaptor: "UrlAdaptor", 
            offline: false 
        }); 
        var query = ej.Query(); 
        angular.module('Autoapp', ['ejangular']) 
        .controller('AutoCtrl', ['$scope', '$timeout', function ($scope, $timeout) { 
            $scope.dataList = dataManger; 
            $scope.dataquery = query; 
            $scope.onselect = function (e) { 
                alert("select is triggered") 
            } 
 
        }]); 
 
        function onselect(e) { 
            alert("select is triggered") 
        } 
    </script> 
</body> 
 
</html>  
  
 
 
  
 
 
Also please find the below UG documentation for more information regarding the Datamanager configuration. 
 
 
 
 Please let us know if you have any queries.     
 
Regards,     
Arun P.     
 


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.

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.

;