thank You for answer,
You wrote that "WebApiAdaptor is extended from ODataAdaptor" but in documentation (where You provided links), there is written that WebApiAdaptor is extended from __ UrlAdaptor __ as well as ODataAdaptor. I understand that real inheritance chain is: UrlAdaptor -> ODataAdaptor -> WebApiAdaptor, am I right? (I think this is documentation inconsistency).
but nevermind...
I have a worse problem with filtering and updating data in grid.
I created asp.net mvc + webapi2 project (.net 4.6.1) and then installed following packages:
Microsoft.AspNet.WebApi.OData - 5.7.0
Microsoft.Data.OData - 5.6.0
Syncfusion.JavaScript - 14.4.0.15
angularJS - 1.6.1
(I attached my VS 2015 solution.)
In my cshtml view file I have following scripts included:
<link rel="stylesheet" rel='nofollow' href="~/Content/bootstrap.min.css" />
<link rel="stylesheet" rel='nofollow' href="~/Content/ej/web/default-theme/ej.web.all.min.css" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.easing.1.3.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jsrender.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/ej/web/ej.web.all.min.js"></script>
<script src="~/Scripts/ej/common/ej.widget.angular.min.js"></script>
my grid is declared as follows:
<div ng-app="myapp" style="margin-top: 8em;">
<div ng-controller="myctrl">
<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-toolbarsettings="sys_toolbarset">
<div e-columns>
<div e-column e-field="Id" e-headertext="Id" e-allowfiltering="true" e-allowgrouping="true" e-isprimarykey="true"></div>
<div e-column e-field="Name" e-headertext="Name"></div>
</div>
</div>
</div>
</div>
and 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: 'dialog', allowEditOnDblClick: false, showAddNewRow: true, showDeleteConfirmDialog: true };
$scope.sys_toolbarset = { showToolbar: true, toolbarItems: ['search', 'add', 'edit', 'delete', 'update', 'cancel'] };
});
}());
</script>
this is my web api controller code:
public class AppController : ApiController
{
private Models.InMemDb _db = null;
public AppController(Models.InMemDb db)
{
_db = db;
}
public PageResult<Models.Element> Get(ODataQueryOptions<Models.Element> query)
{
if (query.SelectExpand?.SelectExpandClause?.SelectedItems?.Any() ?? false)
{
return new PageResult<Models.Element>(Enumerable.Empty<Models.Element>(), null, 0);
}
var data = _db.Data.AsQueryable();
var result = (query.ApplyTo(data) as IQueryable<Models.Element>).ToList();
var count = query.InlineCount.Value == InlineCountValue.AllPages ? _db.Data.Count : query.InlineCount.GetEntityCount(data);
return new PageResult<Models.Element>(result, null, count);
}
public void Post(Models.Element e)
{
if (e != null)
{
e.Id = _db.Data.Count + 1;
_db.Data.Add(e);
}
}
public void Put(Models.Element e)
{
if (e != null)
{
var el = _db.Data.SingleOrDefault(d => d.Id == e.Id);
if (el != null)
{
el.Name = e.Name;
}
}
}
public void Delete(int id)
{
var el = _db.Data.SingleOrDefault(d => d.Id == id);
if (el != null)
{
_db.Data.Remove(el);
}
}
}
sorting, searching, paging, grouping, adding and deleting functions work well, but:
- filtering doesn't work at all, in column header appears only filter icon and when I click it then nothing happens (filter menu should be shown).
- when I try edit any grid row, then exception is thrown (put method of controller is not even called):
- finally, when I'm adding new rows to grid this is _mad_, just look:
empty grid, showing -1 total items:
I'm adding first record
first row has been added, everything is ok:
I'm adding second row:
second row added, and it's not showing (pagesize is set to 2):
I'm adding third row:
third row added, second row added earlier is still not showing
when I click "2" button on pager then this button disappears, pager shows that there is only one page and two items (should be 2 pages and 3 items):
when I sort by Id column then second element is shown and pager still shows wrong numbers:
please, tell me what versions of libraries and scripts should I use and in what order I should they include in view to make my project work.
best regards
Adam
Attachment:
test_mvc_sf_ng_3e5f0f15.zip
