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

How to use in AngularJS

Thread ID:

Created:

Updated:

Platform:

Replies:

132164 Aug 17,2017 02:56 PM UTC Aug 19,2017 01:22 PM UTC ASP.NET Core 1
loading
Tags: Autocomplete
Mariusz Wojewoda
Asked On August 17, 2017 02:56 PM UTC

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 01:22 PM UTC

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.

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

;