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. Image for the cookie policy date

AutoComplete inside InlineFormTemplate


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%" />

3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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. 

MH Magnus Hagelin 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.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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. 

Live Chat Icon For mobile
Up arrow icon