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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

AutoComplete inside InlineFormTemplate

Thread ID:





127109 Oct 26,2016 01:19 PM UTC Nov 7,2016 04:07 AM UTC jQuery 3
Tags: ejGrid
Magnus Hagelin
Asked On October 26, 2016 01:19 PM UTC


I'm using your controls for AngularJs and want to use AutoComplete inside my grid's template for inlineform. If I move the code in template so it's not inside <script> it works as a charm .
I have two issues with using athe template: 
1, The styling gets overridden somewhere.
2, The templates code is out of scope.

What am I doing wrong? A stripped-down version of the code below: 

        <div ej-grid
                <div e-columns>
                    <div e-column e-field="applicationId" e-headertext="App ID" e-isprimarykey="true" e-visible="false"></div>
                    <div e-column e-field="applicationName" e-headertext="App Name"></div>
                    <div e-column e-field="moduleId" e-headertext="Mod ID" e-visible="false"></div>
                    <div e-column e-field="moduleName" e-headertext="Mod Name"></div>
<script id="template" type="text/template">
            <div id="control">
                <input ej-autocomplete
                       e-width="100%" />

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 27, 2016 12:18 PM UTC

Hi Magnus, 

We could see you would like to render a AutoComplete control in the inlineform template. Template rendering deals with the jsrender and JavaScript, so we cannot place AngularJS control within the Jsrender and place the values. Instead of doing that, we can use the JavaScript controls in the ActionComplete event (requesType as “beginedit” or “add” ) of the Grid. Refer to the following code example. 

        angular.module('listCtrl', ['ejangular']) 
        .controller('PhoneListCtrl', function ($scope) { 
            $scope.data = obj; 
            $scope.actionComplete = function (args) { 
                if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "inlineformtemplate") { 
                        fields: { text: "name", key: "applicationId" }, 
                        dataSource: autoData 
                    }).ejAutocomplete("selectValueByKey", $("#applicationId").val());; 
                    if (args.requestType == "beginedit") { 
                        $("#applicationId").ejAutocomplete({ enabled: false }); 
          $scope.edit= { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "inlineformtemplate", inlineFormTemplateID: "#template"  }, 
          $scope.tools = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }; 
    <script id="template" type="text/template"> 
        <b>Order Details</b> 
        <table cellspacing="10"> 
                <td style="text-align: right;"> 
                    App ID 
                <td style="text-align: left"> 
                    <input id="applicationId" name="applicationId" value="{{: applicationId}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable" /> 
                     . . . .  
                            . ..  

Based on your code example, we have placed the AutoComplete control with the text/key pair fields and dataSource. 

Seeni Sakthi Kumar S. 

Magnus Hagelin
Replied On November 4, 2016 01:26 PM UTC

Thanks a lot. I was hoping that there were a way of doing this without putting the code in the controller, but now I know.


Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 7, 2016 04:07 AM UTC

Hi Magnus, 

Thanks for the update. We are happy to your requirement has been achieved. If you require further assistance, please get back to us. 

Seeni Sakthi Kumar S. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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