I am sporadically seeing my grid not show any rows when in fact there are rows bound to the grid. Does anyone see if my usage pattern is incorrect when integrating angular? Thanks!
EDIT - It also appears the strange behavior only occurs when leaving the page and coming back to the page for a full refresh.
$scope.init = function () {
$scope.loading.busy.right = consigneeService.api.getActivity(session.consignee.id()).then(function (result) {
$scope.details = result;
$scope.gridOptions.dataSource.read();
});
};
$scope.gridOptions = {
dataSource: new kendo.data.DataSource({
transport: {
read: function (options) {
options.success($scope.details);
}
}
}),
sortable: {
allowUnsort: false
},
autoBind: false,
columns: [
{ field: 'activityDate', title: 'Activity Date', width: '150px', template: "{{ dataItem.activityDate | cmsUTCToLocal : 'short' }}" },
{ field: 'activityDetails', title: 'Activity Details', width: '300px;' },
{ field: 'createUserId', title: "Created By", width: "125px" }
]
};
Related
I have a Kendo grid in html as follows:
<div
kendo-grid="grid"
k-options="gridOptions"
k-data-source="gridData"
k-selectable="true"
k-columns="gridColumns"
k-editable="editableOptions">
</div>
The Angular back end is:
$scope.gridData = new kendo.data.DataSource({
data: $scope.users, <-- the data binds correctly in the grid
editable: {
createAt: "bottom"
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "string", visible: true },
Name: { type: "string", editable: true }
}
}
},
sort: [
{ field: "Name", dir: "asc" }
],
pageSize: 15,
editable: true
});
$scope.gridOptions = {
};
$scope.gridColumns = [
{ field: 'Name', title: 'First Name', width: 60 },
{ field: 'Id', title: ' ', width: 120 },
{
command: ["destroy"],
title: " ",
width: "175px",
editable: "inline"
}
];
$scope.editableOptions = "inline";
So the User Data Load correctly with 5 rows, but there should be an extra row at the bottom for adding a new user via the line
editable: {
createAt: "bottom"
},
but this is not being created when the grid loads.
Also, they should be able to delete via the following command
{
command: ["destroy"],
title: " ",
width: "175px",
editable: "inline"
}
but this is also not being displayed.
What am I missing here?
make the row editable when clicking on the edit button:
Define editable once, like this:
editable: {
mode: "inline" ,
createAt: "bottom"
},
Your command:
{
command: ["edit","destroy"]
}
and also add toolbar for create:
toolbar: ["create"]
Here is a sample : Sample Dojo
make it editable once click in the cell:
editable:
editable: {
createAt: "bottom"
},
command:
{
command: ["destroy"]
}
toolbar:
toolbar: ["create", "save", "cancel"],
and also in your dataSource set batch: true
Here is a sample: Sample Dojo
Need a demo or source when use a dropdownlist in mode table on filter column in kendo grid of jquery or angularjs.
{
field: "VolunteerConnectName",
title: vm.module_resources.VolunteerConnect_Text,
filterable: {
cell: {
template: function (args) {
args.element.kendoDropDownList({
dataSource: args.dataSource,
optionLabel: "Seleccione",
dataTextField: "VolunteerConnectName",
dataValueField: "VolunteerConnectName",
valuePrimitive: true
});
},
operator: "eq",
showOperators: false
},
},
width: "20%"
},
filterable and values for rows and values for mode table.
{
field: "VolunteerConnect",
title: vm.module_resources.VolunteerConnect_Text,
width: "20%",
values: [
{ text: "Sí", value: true },
{ text: "No", value: false }
],
template: function (dataItem) {
var content = "";
content = (dataItem.VolunteerConnect) ? "Sí" : "";
return content;
},
filterable: true
}
I am using Kendo UI's Angular grid. I am trying to pass a parent controller's function to a template that is based on another Angular directive (as a handler). I have a component with a controller that grabs the Kendo Grid options from a service.
(function () {
'use strict';
angular.module('ins.admin.userreg')
.component('insUserRegGrid', {
templateUrl: 'admin/user-registration/grid/user-reg-grid.tpl.html',
controllerAs: 'vm',
controller: controller
});
controller.$inject = ['insUserRegGridSvc', 'insUserRegRouteSvc', '$timeout'];
function controller(insUserRegGridSvc, insUserRegRouteSvc, $timeout) {
var vm = this;
vm.options = insUserRegGridSvc.getOptions();
vm.goToCreate = insUserRegRouteSvc.goToCreate;
vm.onActiveChange = function(value) {
console.log('changed' + value);
}
}
})();
Here are the options within that service (where the command template for Active is defined):
(function () {
'use strict';
angular.module('ins.admin.userreg')
.factory('insUserRegGridSvc', insUserRegGridSvc);
insUserRegGridSvc.$inject = ['_', 'insUserRegResrc', 'insFormatUtil', 'insAppSettingsSvc'];
function insUserRegGridSvc(_, insUserRegResrc, insFormatUtil, insAppSettingsSvc) {
function getOptions() {
return {
dataSource: {
transport: {
read: function (e) {
insUserRegResrc.getUsersWithRoles().$promise.then(function (response) {
response.map(function (i) {
i.UserID = i.UserId;
i.Url = insAppSettingsSvc.apiRoot + 'UserRegistration/Post/' + i.UserId;
i.FirstName = i.FirstName;
i.MiddleName = i.MiddleName;
i.LastName = i.LastName;
if (i.Role[0]) {
i.RoleName = i.Role[0].RoleName;
} else {
i.RoleName = "";
}
if (i.Reports[0]) {
i.Manager = i.Reports[0].FullName;
} else {
i.Manager = "";
}
i.Email = i.Email;
i.Active = i.IsActive;
});
response = _.orderBy(response, ['UserId'], ['asc']);
e.success(response);
});
}
},
pageSize: 10
},
resizable: true,
pageable: true,
editable: false,
sortable: true,
toolbar: "<a ng-click='vm.goToCreate()' class='btn ins-btn-update k-grid-add pull-left' title='Add New'>add</a>",
columns: [
{ title: 'User Id', field: 'UserID', sortable: true, width: 150 },
{ title: 'First Name', field: 'FirstName', sortable: true, width: 150 },
{ title: 'Last Name', field: 'LastName', sortable: true, width: 150 },
{ title: 'Role', field: 'RoleName', sortable: true, width: 150 },
{ title: 'Manager', field: 'Manager', sortable: true, width: 150 },
{ title: 'Email', field: 'Email', sortable: true, width: 150 },
{
title: 'Active',
width: 85,
command: [
{
name: "Toggle Active",
template: "<ins-toggle ins-id='activeToggle' ins-model='dataItem.Active' ins-on-change='vm.onActiveChange' ins-on-text='yes' ins-off-text='no' ins-enabled='true'></ins-toggle>"
}
]
},
{
width: 85,
command: [
{ name: "Edit", template: "<a class='k-button k-button-icontext k-grid-edit' data-toggle='tooltip' ui-sref='.edit({ userId: {{dataItem.UserID}}})' title='#: name #'> <span class='k-icon k-edit'></span> </a>" }
]
}
]
}
}
return {
getOptions: getOptions
};
}
})();
From the above code, focus on the following:
{
title: 'Active',
width: 85,
command: [
{
name: "Toggle Active",
template: "<ins-toggle ins-id='activeToggle' ins-model='dataItem.Active' ins-on-change='vm.onActiveChange' ins-on-text='yes' ins-off-text='no' ins-enabled='true'></ins-toggle>"
}
]
},
As you can see I am trying to pass the parent controller's vm.onActiveChange method as a scope attribute to ins-toggle. ins-toggle's ins-on-change scope attribute is setup as insOnChange: '&?' and works in other scenarios outside of Kendo's grid.
Does Kendo not allow for us to pass parent functions into directive's as a part of a template?
I have found out that it has nothing to do with Kendo, and it actually had to do with the Toggle directive I was using from UI-Bootstrap. Sorry everyone.
I have single page application with KendoUI and AngularJs. I have two grid with two controllers. When I select first grid row (movie), I want to pass movieId to second controller and get actors for this movie.
Here my second controller:
myApp.controller("ActorsCtrl", function ($scope, $rootScope) {
$rootScope.$on("SetMovieId", function (event, movieId) {
alert(movieId);
$scope.movieId = movieId;
$scope.actorsGrid.dataSource.read();
$scope.actorsGrid.dataSource.refresh();
});
$scope.actorsGrid = {
dataSource: {
type: "application/json",
transport: {
read: {
url: "/Actors/GetActors",
data: { movieId: $scope.movieId }
}
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: true,
pageable: true,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "Name",
title: "Name",
width: "120px"
}, {
field: "BirthDate",
title: "Birth Date",
template: "#= kendo.toString(kendo.parseDate(BirthDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",
width: "120px"
}]
};
});
Is this movieId adding correct?
How to refresh grid?
My example doesn't work :(
Kendo UI Datasource has event requestStart where you can pass parameters to request url.
var urlFormat = "/actors/{0}";
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/actors/",
dataType: "jsonp"
}
},
requestStart: function(e) {
e.options.url = kendo.format(urlFormat, movieId);
}
});
I am using Kendo Ui grid to display data , i have been searching for solution for detail record popup dialog using angular with kendo.once user click detail for each record i want to popup complete detail in dialog box.
so far i have implemented below code...
HTML
<div kendo-grid="lrrSearchGrid" options="lrrSearchGridOptions">
</div>
CTRL.JS
$scope.lrrSearchData = {};
$scope.lrrSearchData = null;
$scope.mappedLRRSearchData = {};
$scope.mappedLRRSearchData = null;
// Search
$scope.searchLRRs = function () {
SubCategory.searchLRRBasedOn(1, $scope.search.searchBy, $scope.search.searchParam).then(function (data) {
$scope.lrrSearchData = data.data;
$scope.lrrSearchGrid.setDataSource(new kendo.data.DataSource({
data: $scope.lrrSearchData,
pageSize: 5
}));
}, function (err) {
if (err.status === 404) {
$scope.searchError = 'No Records Found';
}
});
};
$scope.gotoSubCats = function() {
$state.go('app.subCats');
};
// Setting the LRR Search Data
$scope.lrrSearchGridOptions = lrrSearchGridConfig.lrrSearchGrid;
lrrSearchGridConfig.lrrSearchGrid.dataSource = resetLRRSearchData();
$scope.mappedLRRGridOptions = lrrSearchGridConfig.mappedLRRGrid;
lrrSearchGridConfig.mappedLRRGrid.dataSource = resetMappedLRRSData();
Config.js
lrrSearchGrid: {
sortable: true,
pageable: {
previousNext: false,
pageSizes: false
},
scrollable: true,
filterable: true,
columns: [
{
field: 'regionName',
title: 'Jurisdiction',
width: '32px'
}, {
field: 'regInvetoryName',
title: 'Inventory',
width: '32px'
},{
field: 'ruleIdentifier',
title: 'Rule Id',
width: '25px'
}, {
field: 'citationValue',
title: 'Rule Citation',
width: '30px'
}, {
field: 'ruleName',
title: 'Rule Standard Name',
width: '30px'
}, {
field: 'subPartId',
title: 'Subpart Id',
width: '30px'
}, {
field: 'subpartCitation',
title: 'Subpart Citation',
width: '40px'
}, {
field: 'subpartRuleName',
title: 'Subpart Standard Name',
width: '40px'
},{
field: 'Detail',
title: 'Action',
width: '40px',
filterable:false,
template : function(dataItem) {
if (typeof dataItem.lrrDetail == "string") {
return "<a href=\</a>";
}
}
}
]
}
Thanks in advance i will appreciate any help.
I have created a fiddle for the same,check if it helps you
: http://jsfiddle.net/Sowjanya51/6r01vccj/3/
you can use the custom command option of kendo grid to achieve this.