0
bbakermmc created
Following your example for the Kendo Grid integrations.
I get an error: Unable to get property 'filter' of undefined or null reference
/ action 'getUsers'
abp.services.app.user.getUsers = function(input, ajaxParams) {
return abp.ajax($.extend(true, {
url: abp.appPath + 'api/services/app/User/GetUsers' + abp.utils.buildQueryString([{ name: 'filter', value: input.filter }, { name: 'permission', value: input.permission }, { name: 'role', value: input.role }, { name: 'sorting', value: input.sorting }, { name: 'maxResultCount', value: input.maxResultCount }, { name: 'skipCount', value: input.skipCount }]) + '',
type: 'GET'
}, ajaxParams));;
};
<div>
<h1>@L("Users")</h1>
<div class="row buttons-area">
</div>
<div class="row">
<div class="col-md-12">
<div id="UsersGrid"></div>
</div>
</div>
</div>
<script>
$(function () {
$('#UsersGrid').kendoGrid({
editable: true,
filterable: false,
columns: [{
field: 'userName',
title: 'UserName'
}, {
field: 'name',
title: 'Name'
}, {
field: 'surname',
title: 'Surname'
}, {
field: 'emailAddress',
title: 'EmailAddress'
}, {
field: 'isActive',
title: 'IsActive',
template: '#= isActive ? "YES" : "NO" #'
}],
dataSource: new kendo.data.DataSource({
autoSync: true,
transport: {
read: function(options) {
abp.services.app.user.getUsers()
.done(function (result) {
options.success(result.items);
})
.fail(function(error) {
options.error(error);
});
},
update: function(options) {
abp.services.app.user.updateUser(options.data)
.done(function(result) {
options.success(null);
})
.fail(function(error) {
options.error(error);
});
}
},
schema: {
model: {
id: 'id',
fields: {
id: {
editable: false,
nullable: true
},
userName: {
editable: true
},
name: {
editable: true
},
surname: {
editable: true
},
emailAddress: {
editable: true
},
isActive: {
editable: false
}
}
}
}
})
});
});
</script>
5 Answer(s)
-
0
Can you also make an example using the MVC helpers. The intellisense is way better when trying to remember all of Teleriks toggles :)
-
0
Heres the MVC Core version that I got working.... Finally after I realized they changed the default serializer to camelCase lol
@(Html.Kendo().Grid<UserListDto>() .Name("Grid") .Columns(columns => { columns.Bound(p => p.Name); columns.Bound(p => p.Surname); columns.Bound(p => p.IsActive); }) //.ToolBar(toolbar => { // toolbar.Create(); // toolbar.Save(); //}) //.Editable(editable => editable.Mode(GridEditMode.InCell)) .Pageable() .Mobile(MobileMode.Auto) .Navigatable() .Sortable() .Scrollable() .Filterable() .ColumnMenu() .DataSource(dataSource => dataSource .Custom() .PageSize(20) .Schema(schema => schema.Data("result.items").Total("result.totalCount").Errors("result.error") .Model(m => { m.Id(x => x.Id); m.Field(x => x.Name).From("name"); m.Field(x => x.Surname).From("surname"); m.Field(x => x.IsActive).From("isActive"); })) .Transport(transport => { transport.Read(read => read.Url("http://localhost:62114/api/services/app/User/GetUsers") ); }) ))Heres a more enhanced version
@using MMC.Platform.Authorization.Users.Dto @{ ViewData["Title"] = "View"; } @(Html.Kendo().Grid<UserListDto>() .Name("Grid") .Columns(columns => { columns.Bound(p => p.UserName).Title(@L("UserName")); columns.Bound(p => p.Name).Title(@L("Name")); columns.Bound(p => p.Surname).Title(@L("Name")); columns.Bound(p => p.Roles).Title(@L("Roles")).ClientTemplate("#= getRoleNames(Roles)#"); columns.Bound(p => p.EmailAddress).Title(@L("EmailAddress")); columns.Bound(p => p.IsEmailConfirmed).Title(@L("EmailConfirm")) .ClientTemplate("#if(IsEmailConfirmed) {# <span class='label label-success'> #= app.localize('Yes') # </span>#} else {# <span class='label label-default'> #= app.localize('No') # </span>#}#") .Filterable(filterable => filterable.Messages(m => m.IsFalse(@L("No"))).Messages(m => m.IsTrue(@L("Yes")))); columns.Bound(p => p.IsActive).Title(@L("Active")) .ClientTemplate("#if(IsActive) {# <span class='label label-success'> #= app.localize('Yes') # </span>#} else {# <span class='label label-default'> #= app.localize('No') # </span>#}#") .Filterable(filterable =>filterable.Messages(m=>m.IsFalse(@L("No"))).Messages(m=>m.IsTrue(@L("Yes")))); columns.Bound(p => p.LastLoginTime).Title(@L("LastLoginTime")).ClientTemplate("#= moment(LastLoginTime).format('L')#"); columns.Bound(p => p.CreationTime).Title(@L("CreationTime")).ClientTemplate("#= moment(CreationTime).format('L')#"); }) //.ToolBar(toolbar => { // toolbar.Create(); // toolbar.Save(); //}) //.Editable(editable => editable.Mode(GridEditMode.InCell)) .Pageable() .Mobile(MobileMode.Auto) .Navigatable() .Sortable() .Scrollable() .Filterable() .ColumnMenu() .DataSource(dataSource => dataSource .Custom() .PageSize(20) .Schema(schema => schema.Data("result.items").Total("result.totalCount").Errors("result.error") .Model(m => { m.Id(x => x.Id); m.Field(x => x.Name).From("name"); m.Field(x => x.Surname).From("surname"); m.Field(x => x.UserName).From("userName"); m.Field(x => x.Roles).From("roles"); m.Field(x => x.EmailAddress).From("emailAddress"); m.Field(x => x.IsEmailConfirmed).From("isEmailConfirmed"); m.Field(x => x.IsActive).From("isActive"); m.Field(x => x.LastLoginTime).From("lastLoginTime"); m.Field(x => x.CreationTime).From("creationTime"); })) .Transport(transport => { transport.Read(read => read.Url("http://localhost:62114/api/services/app/User/GetUsers") ); }) )) <script> function getRoleNames(roles) { var roleNames = ''; for (var j = 0; j < roles.length; j++) { if (roleNames.length) { roleNames = roleNames + ', '; } roleNames = roleNames + roles[j].roleName; }; return roleNames; } </script> -
0
hi
is your issue still active?
-
0
Yeah, if use the javascript method it give me the filter is null error.
-
0
Hi @BBakerMMC,
We don't have any plan for more telerik samples at the moment. For your problem, I think you need to pass an object containing filter field to getUsers function call in kendo's read function in dataSource.
This is what I mean:
read: function(options) { abp.services.app.user.getUsers({filter: 'filterValue'}) ... ... ... }Thanks.
