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.

AutoComplete inside InlineFormTemplate

Thread ID:

Created:

Updated:

Platform:

Replies:

127109 Oct 26,2016 09:19 AM Nov 6,2016 11:07 PM JavaScript 3
loading
Tags: ejGrid
Magnus Hagelin
Asked On October 26, 2016 09:19 AM

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 [Syncfusion]
Replied On October 27, 2016 08:18 AM

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
Replied On November 4, 2016 09:26 AM

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 [Syncfusion]
Replied On November 6, 2016 11:07 PM

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. 


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.

;