AutoComplete inside InlineFormTemplate

[Magnus Hagelin]

Hi

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>

        <div ej-grid

             id="Grid"

             e-datasource="vm.model.modules"

             e-editSettings-editMode="inlineformtemplate"

             e-editsettings-inlineformtemplateid="#template"

                <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>

                </div>

            </div>

    </div>

</div>

<script id="template" type="text/template">

            <div id="control">

                <input ej-autocomplete

                       id="auto-default"

                       type="text"

                       e-datasource="vm.model.applications"

                       e-fields-key="applicationId"

                       e-fields-text="name"

                       e-width="100%" />

            </div>

</script>

[Seeni Sakthi Kumar Seeni Raj]

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") { 

                    $("#applicationId").ejAutocomplete({ 

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

            <tr> 

                <td style="text-align: right;"> 

                    App ID 

                </td> 

                <td style="text-align: left"> 

                    <input id="applicationId" name="applicationId" value="{{: applicationId}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable" /> 

                </td> 

                     . . . .  

                            . ..  

            </tr> 

                    ..   

        </table> 

    </script> 

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

Regards, 

Seeni Sakthi Kumar S. 

[Magnus Hagelin]

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.

Regards

/Magnus

[Seeni Sakthi Kumar Seeni Raj]

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. 

Regards, 

Seeni Sakthi Kumar S.