we decided to go with KoGrid, after some research, we could do all we need. Thank you all for help. You may find our test code below. Have a nice day.
<!--3rd party library scripts -->
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/json2.js"></script>
<script src="~/Scripts/es5-sham.min.js"></script>
<script src="~/Scripts/es5-shim.min.js"></script>
<script src="~/Scripts/knockout-2.1.0.js"></script>
<script src="~/Scripts/q.js"></script>
<script src="~/Scripts/jquery.json-2.3.js"></script>
<script src="~/Scripts/KoGrid.debug.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var GridViewModel = function () {
var self = this;
self.products = ko.observableArray();
self.currentPage = ko.observable(1);
self.pageSize = ko.observable(10);
self.totalServerItems = ko.observable(80);
self.selectedItem = ko.observable();
self.sortInfo = ko.observable();
self.filterInfo = ko.observable();
self.updateItem = function () { };
var entityModel = window.breeze.entityModel;
var entityManager = new entityModel.EntityManager('api/Service');
var metadataStore = entityManager.metadataStore;
metadataStore.importMetadata($.toJSON(metadata));
var op = window.breeze.FilterQueryOp;
this.getPagedDataAsync = function (pageSize, page, filterInfo, sortInfo) {
var columnName = "ProductID";
if (sortInfo != null)
columnName = sortInfo.column.field + " " + sortInfo.direction;
var query = entityModel.EntityQuery.from("Products").orderBy(columnName).skip((page - 1) * pageSize).take(pageSize);
for (var propertyName in filterInfo) {
query = query.where(propertyName, op.StartsWith, filterInfo[propertyName]);
}
entityManager.executeQuery(query).then(function (data) {
self.products.removeAll();
var items = data.results;
items.forEach(function (item) {
self.products.push(item);
});
});
};
this.dataChangedTrigger = ko.computed(function () {
var page = self.currentPage(),
pageSize = self.pageSize(),
filterInfo = self.filterInfo(),
sortInfo = self.sortInfo();
if (page && pageSize) {
self.getPagedDataAsync(pageSize, page, filterInfo, sortInfo);
}
return null;
});
}
var model = new GridViewModel();
ko.applyBindings(model);
model.getPagedDataAsync(10, 1, model.filterInfo(), model.sortInfo());
});
</script>
<div id="sandBox" class="example" style="height: 600px; width:600px; max-width: 700px;"
data-bind="koGrid: { data: products,
columnDefs: [{ field: 'ProductName', width: 200 },
{ field: 'QuantityPerUnit', width: 200 },
{ field: 'UnitPrice', width: 150 }],
autogenerateColumns: false,
isMultiSelect: false,
enablePaging: true,
useExternalFiltering: true,
useExternalSorting: true,
filterInfo: filterInfo,
sortInfo: sortInfo,
pageSize: pageSize,
pageSizes: [10, 20, 50],
currentPage: currentPage,
totalServerItems: totalServerItems,
selectedItem: selectedItem }">
</div>
<!-- Application scripts -->
<script src="~/Scripts/breeze.js"></script>
<script src="~/Scripts/app/metadata.js"></script>
