hi,
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 14.4.0.15 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"
e-toolbarsettings="sys_toolbarset">
<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>
</div>
</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) {
$('#dtpDate').ejDatePicker();
$('#tbxNumber').ejNumericTextbox();
$('#ddlSome').ejDropDownList({
datasource: ej.DataManager({ url: '/api/app/some', adaptor: 'WebApiAdaptor' }),
fields: { value: 'Id', text: 'Name', id: 'Id' }
});
};
});
})();
</script>
My dialog template:
<script type="text/template" id="dialogtpl">
<table>
<tr>
<td>Id</td>
<td><input id="tbxId" name="Id" value="{{:Id}}" disabled="disabled" class="e-field e-ejinputtext" /></td>
</tr>
<tr>
<td>Name</td>
<td><input id="tbxName" name="Name" value="{{:Name}}" class="e-field e-ejinputtext" /></td>
</tr>
<tr>
<td>Date</td>
<td><input id="dtpDate" name="Date" value="{{:Date}}" /></td>
</tr>
<tr>
<td>Number</td>
<td><input id="tbxNumber" name="Number" value="{{:Number}}" /></td>
</tr>
<tr>
<td>Some</td>
<td>
<input id="ddlSome" />
</td>
</tr>
</table>
</script>
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
Adam
