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

dropdownlist on dialog template for angular grid not working

I have asp.net mvc 5 project (.net 4.6.1) with webapi 2 created with visual studio 2015.
I'm using syncfusion javascript library version and angular widgets.
In my project there is grid (angular widget) for which I'm trying to create dialog template for editing.
The problem is with column for which I would like to show dropdownlist control on dialog. When dialog shows then dropdownlist is displayed but is not filled with options I provided as datasource. The method in webapi controller providing options data for dropdown is not even called.

My grid is declared as follows:

<div id="grd" ej-grid e-datasource="systems" 
     e-allowpaging="true" e-pagesettings="sys_pageset"
     e-allowsorting="true" e-allowmultisorting="true" e-sortsettings="sys_sortset"
     e-allowfiltering="true" e-filtersettings="sys_filterset" e-allowsearching="true" e-searchsettings="sys_searchset"
     e-allowgrouping="true" e-groupsettings="sys_groupset"
     e-editsettings="sys_editset" e-actioncomplete="gridactioncomplete"
    <div e-columns>
        <div e-column e-field="Id" e-headertext="Id" e-allowfiltering="false" e-allowgrouping="false" e-isprimarykey="true" e-isidentity="true"></div>
        <div e-column e-field="Name" e-headertext="Name"></div>
        <div e-column e-field="Date" e-headertext="Date" e-format="{0:yyyy-MM-dd}"></div>
        <div e-column e-field="Number" e-headertext="Num"></div>
        <div e-column e-field="SomeComplex.Name" e-headertext="Some"></div>
        <div e-column e-field="AnotherComplex.Name" e-headertext="Another"></div>
        <div e-column e-template="true" e-templateid="#links2tpl" e-headertext="Links"></div>

This is its configuration:

<script type="text/javascript">
    (function () {
        var app = angular.module('myapp', ['ejangular']);
        app.controller('myctrl', function ($scope) {
            $scope.systems = ej.DataManager({ url: '/api/app', adaptor: 'WebApiAdaptor' });
            $scope.sys_pageset = { pageSize: 2 };
            $scope.sys_sortset = { sortedColumns: [{ field: 'Id', direction: 'ascending' }] };
            $scope.sys_filterset = { filterType: 'menu', showPredicate: false };
            $scope.sys_searchset = { fields: ['Name'], operator: 'contains', key: '', ignoreCase: true };
            $scope.sys_groupset = { showToggleButton: true, showDropArea: false };
            $scope.sys_editset = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: 'dialogtemplate', dialogEditorTemplateID: '#dialogtpl', allowEditOnDblClick: false, showDeleteConfirmDialog: true };
            $scope.sys_toolbarset = { showToolbar: true, toolbarItems: ['search', 'add', 'edit', 'delete', 'update', 'cancel'] };

            $scope.gridactioncomplete = function (args) {
                    datasource: ej.DataManager({ url: '/api/app/some', adaptor: 'WebApiAdaptor' }),
                    fields: { value: 'Id', text: 'Name', id: 'Id' }

My dialog template:

<script type="text/template" id="dialogtpl">
            <td><input id="tbxId" name="Id" value="{{:Id}}" disabled="disabled" class="e-field e-ejinputtext" /></td>
            <td><input id="tbxName" name="Name" value="{{:Name}}" class="e-field e-ejinputtext" /></td>
            <td><input id="dtpDate" name="Date" value="{{:Date}}" /></td>
            <td><input id="tbxNumber" name="Number" value="{{:Number}}" /></td>
                <input id="ddlSome" />

Sample row data which is returned from server for grid datasource:

{ Id: 1, Name: 'test', Date: '2017-02-28', Number: 1, SomeComplex: { Id: 1, Name: 'aaa' } }

Sample data returned from server for dropdown datasource:

[ { Id: 1, Name: 'aaa' }, { Id: 2, Name: 'bbb' } ]

Please, tell me, how should I:
1. load options for dropdownlist on dialog?
2. bind selected value in dropdown from and to data object for currently edited grid row?

best regards

6 Replies

AM amsm February 28, 2017 01:51 PM UTC

exscuse me, I forgot to attach my solution code.

Attachment: test_mvc_webapi_ef_ng_f05bee90.zip

PK Prasanna Kumar Viswanathan Syncfusion Team March 1, 2017 04:40 PM UTC

Hi Sir, 

Thanks for contacting Syncfusion support. 

According to your code snippet we have created a sample and we can reproduce the mentioned issue in the sample. In your code snippet we found that you have used improper API name(datasource) for the dropdownlist in the actionComplete event of ejGrid. So, we suggest you to use the proper API name(dataSource) for the dropdownlist. 

To display the selected value in dropdown, use selectItemByValue method of ejDropDownList. As you have bind the adaptor in grid, so we suggest to use the selectItemByValue method in dataBound event of ejDropDownList.  

Find the code example and sample:  

<div class="row"> 
    var value; 
    angular.module("GridCtrl", ["ejangular"]) 
        .controller("bodyCtrl", function ($scope) { 
            $scope.gridactioncomplete = function (args) { 
                if (args.requestType == "beginedit" || args.requestType == "add") { 
                    value = parseInt(args.row.children().eq(2).text()); 
                        dataSource: ej.DataManager({ url: '/api/Orders/GetSome', adaptor: 'WebApiAdaptor' }), 
                        fields: { value: 'EmployeeID', text: 'EmployeeID', id: 'EmployeeID' }, 
                        dataBound: function (args) { 

Refer to the Help document for the selectItemByValue method. 

Prasanna Kumar N.S.V 

AM amsm March 1, 2017 07:09 PM UTC

Thank You very much for answer.
I have one more question about dialog template in context of angular widget.
Documentation says that at template the input tags for data fields should have id, name and value attributes in form:
<input type="text" id="EmployeeID" name="EmployeeID" value="" />
(this is written at: https://help.syncfusion.com/angular-1/grid/editing)

... but when I did this in that way then editing is not working, it mean values are not binding to controls and data object. Also assigning: value='EmployeeID' doesn't help.
To fix this I must write such snippet in this way:

<input id="EmployeeID" name="EmployeeID" value="{{:EmployeeID}}" />

Please explain:

1. why the code as described in the documentation is not working?
2. is "ng-model" attribute applicable in this context? (how?)
3. is any difference between attribute "text/template" and "text/ng-template"?

best regards

SA Saravanan Arunachalam Syncfusion Team March 2, 2017 12:46 PM UTC

Hi Amsm, 
Query 1:  why the code as described in the documentation is not working? 
In the documentation, we have missed to render the template with jsrender syntax ({{:EmployeeID}}) to populate the value in the edit form while editing. We will make this correction on the document and it will refreshed in online on March 3rd 2017. 
Query 2: is "ng-model" attribute applicable in this context? 
No, we can’t use the ng-model angular property in the editing template. Please refer to the below documentation link, we have an inbuilt two-way binding support for the following Grid properties. 
Query 3: is any difference between attribute "text/template" and "text/ng-template"? 
The text/ng-template which is used to render the jsrender template in angularjs and it is compile that template with current scope automatically.  
The text/template which is used to render the template in javascript and if you use in angular, you need to externally compile it by using $compile method of angularjs.   
Saravanan A. 

AM amsm March 2, 2017 01:58 PM UTC

thank You very much for help.

SA Saravanan Arunachalam Syncfusion Team March 3, 2017 04:54 AM UTC

Hi Amsm,  
Thanks for your update.            
We are happy that the provided information helped you. 
Saravanan A. 

Live Chat Icon For mobile
Up arrow icon