man i forgot about you ...
here is the JS
$("#jsGrid").jsGrid({
height: 'auto',
width: "100%",
sorting: false,
autoload: true,
paging: true,
pageSize: 10,
pageButtonCount: 5,
pagerContainer: "#externalPager",
pagerFormat: "current page: {pageIndex} {first} {prev} {pages} {next} {last} total pages: {pageCount}",
pagePrevText: "<",
pageNextText: ">",
pageFirstText: "<<",
pageLastText: ">>",
pageNavigatorNextText: "…",
pageNavigatorPrevText: "…",
deleteConfirm: function(item) {
return "The client \"" + item.Name + "\" will be removed. Are you sure?";
},
rowClick: function(args) {
showDetailsDialog("Edit", args.item);
},
controller: {
loadData: function(filter) {
var d = $.Deferred();
$.ajax({
type: "GET",
url: "/api/menu/loadItems",
dataType: "json",
data: filter,
}).done(function(response) {
d.resolve(response.data);
});
return d.promise();
},
insertItem: function(item) {
return $.ajax({
type: "POST",
url: "/clients/",
data: item
});
},
updateItem: function(item) {
return $.ajax({
type: "PUT",
url: "/clients/",
data: item
});
},
deleteItem: function(item) {
return $.ajax({
type: "DELETE",
url: "/clients/",
data: item
});
}
},
fields: [
{ name: "name", type: "text", width: 150 },
{ name: "languages", type: "text", width: 50 },
{
type: "control",
modeSwitchButton: false,
editButton: false,
headerTemplate: function() {
return $("<button>").attr("type", "button").text("Add")
.on("click", function () {
showDetailsDialog("Add", {});
});
}
}
]
});
well in the backend, there is nothing special.
$data['data'] = MyApp\menu\Models\Menus::find()->toArray();
foreach ($data['data'] AS &$res){
//perfeform some changes if even neederd
}
$data['itemsCount'] = count($data['data']);
echo json_encode($data);exit;