is there a way to disable/enable cell edit of the grid. for example i have a master-detail form screen. when user wants to analyze a record, i disable all controls of the form with ng-disabled. but i could not prevent editing the grid. i tried "cellEditableCondition" option. But, i runs only when grid is loading. it would be nice if grid have an option like "disableEdit" and accepts a scope variable. when i open my form in edit mode, grid would be editable, and when in view mode grid would be disabled.
i found a solution. you can use cellEditableCondition attribute of the grid column. if you apply a function to this attribute, you can enable/disable dynamically cells. here is a plunker:
$scope.canEdit = function () { return $scope.pageOptions.isView; };
$scope.pageOptions = { isView : false};
$scope.gridOptions1 = {
enableRowSelection: true,
enableSelectAll: true,
enableFiltering: true,
columnDefs: [
{ name: 'name', width: '30%',cellEditableCondition: $scope.canEdit },
{ name: 'gender', width: '20%',cellEditableCondition: $scope.canEdit },
{ name: 'age', width: '20%',cellEditableCondition: $scope.canEdit },
{ name: 'company', width: '25%',cellEditableCondition: $scope.canEdit },
{ name: 'state', width: '35%',cellEditableCondition: $scope.canEdit },
{ name: 'balance', width: '25%',cellEditableCondition: $scope.canEdit }
],
isRowSelectable:function(row){if(row.entity['age']>30) return true; return false;},
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
}
};
http://plnkr.co/edit/md9AOA64Zn67KqhNmhZT?p=preview
Related
I have a table that I made using ui-grid. The table displays information about a list of news stories. In the final column, I am giving the user the ability to edit, delete, and/or make a news story.
Everything seems to be working fine with that - I am able to have a modal pop up, and after entering in the required information, I can see my data change on the server. If I refresh the page, I can also see my data change on the table. However, I would like the cell data to change without page refresh. It doesn't seem to be binding to my news data.
Here is the ui-grid:
$scope.news = getAdminNews.results;
/**
* ui-grid implementation
*/
$scope.gridOptions = {
data: 'news',
enableColumnResizing: true,
enableFiltering: true,
enableGridMenu: false,
enableColumnMenus: false,
paginationPageSizes: [25,50,75],
paginationPageSize: 25,
rowHeight: 75
};
$scope.gridOptions.columnDefs = [{
displayName: 'Title',
field: 'title.rendered',
filterCellFiltered: true,
sortCellFiltered: true,
width: '20%'
}, {
displayName: 'Body',
field: 'body',
width: '20%'
}, {
displayName: 'Created',
field: 'created',
type: 'date',
cellFilter: 'date:"yyyy-MM-dd"',
filterCellFiltered: true,
sortCellFiltered: true,
width: '20%',
sort: {
priority: 0
}
},
{
displayName: 'Actions',
displayName: 'Actions',
width: '20%',
enableSorting: false,
enableFiltering: false,
field: 'actions',
cellTemplate: 'table-cell-actions'
}
];
$scope.gridOptions.onRegisterApi = function(gridApi) {
$scope.gridApi = gridApi;
};
And one part of my controller which is working successfully:
$scope.newPost = function() {
ngDialog.openConfirm({
template: 'modalPostNew',
className: 'ngdialog-theme-default',
scope: $scope
}).then(function() {
var newPost = {
"id": 0,
"title": $scope.newPostForm.title
}
AdminNews.save(newPost);
toaster.pop('success', 'Updated', 'News item updated successfully.');
});
}
I needed to update my $scope.news data that ui-grid was populating the table with. Here is what my controller looks like now:
$scope.newPost = function() {
ngDialog.openConfirm({
template: 'modalPostNew',
className: 'ngdialog-theme-default',
scope: $scope
}).then(function() {
var newPost = {
"id": 0,
"title": $scope.newPostForm.title
}
AdminNews.save(newPost).$promise.then(function(response) {
var myObj = {
"id": response.data.id,
"title": {
"rendered": response.data.title
}
}
$scope.news.push(myObj);
});
toaster.pop('success', 'Updated', 'News item updated successfully.');
});
}
I have a grid below when user click on subcategory Name column i am populating another grid on right side that is data for selected row, I want to add function to subcategory Name column when user click i want to refresh right side grid data to default. (no data should be display in right side until user select a row).
angular.module('thirdPartyManagementApp').value('subCategoryGridConfig', {
subCategoryGrid: {
sortable: true,
filterable: true,
selectable: true,
height: 600,
toolbar: [
{
template: kendo.template('<kendo-tabstrip><ul><li ng-class="{\'k-state-hover k-state-active\': defaultAllTab}">All</li>')
},
{
template: kendo.template('<li ng-class="{\'k-state-hover k-state-active\': defaultPendingTab}">Pending Review</li>')
},
{
template: kendo.template('<li ng-class="{\'k-state-hover k-state-active\': defaultReviewTab}">Reviewed</li></ul><kendo-tabstrip>')
}
],
columns: [
{
template: '<strong><span ng-if="this.dataItem.sortCode === 1" class="text-success">NEW</span><span ng-if="this.dataItem.sortCode === 2" class="text-danger">!</span></strong>',
width: '30px'
},
{
template: kendo.template('{{this.dataItem.subCategoryName}}<br/>Vendors...'),
field: 'subCategoryName',
title: 'Subcategory',
width: '100px',
template: (function(e) {
subCategoryGrid.columns.filter(function(data) {
return data.field === "subCategoryName";
})
subCategoryGrid.refresh();
});
},
{
field: 'status',
title: 'Status',
width: '65px'
}
]
},
Kendo grid hasn't sorting event, but datasource contains change event that fires when data changed and also sorted:
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events-change
Try update data in this event handler
Don't forget check e.action to prevent loop
When I try to remove selected row in ng-grid the removed rows are still shown in UI.
My grid option is
$scope.gridOptions = {
data: 'myData',
multiSelect: true,
displaySelectionCheckbox: true,
selectedItems: $scope.mySelections,
showFooter: true,
showColumnMenu:false,
showFilter :false,
enableCellEdit: false,
enableCellSelection: false,
enableRowSelection: false,
showSelectionCheckbox: false,
beforeSelectionChange: function() {
return $scope.option.enableRowSelection;
},
}
And I remove or splice the data using
$scope.removeItem=function(){
angular.forEach($scope.mySelections, function(row, index){
angular.forEach($scope.myData, function(data, index){
if(data.indexno == row.indexno){
$scope.myData.splice(index,1);
$scope.gridOptions.data = 'myData';
console.log("after",$scope.myData);
console.log("after data",$scope.gridOptions.data);
}
});
});
$(".badge").html($scope.mySelections.length);
}
Any suggestions or solutions please
The way I have removed a row is by only allowing the user to select 1 row at a time but you could make it so that everything the user selects gets removed. this is the line of code that I used to actually do the removing
$scope.GridOptions.data.splice($scope.GridApi.grid.renderContainers.body.visibleRowCache.indexOf($scope.selectedRow), 1);
But here is how I did it. Here is my grid options at the top of my controller with a var that holds the selected row. you could make this an array of selected rows however!
$scope.selectedRow = null;
$scope.GridOptions = {
enableSorting: true,
enableRowSelection: true,
enableRowHeaderSelection: false,
enableColumnResizing: true,
columnDefs: [
{ name:'User Name', field: 'username', width: '15%', minWidth: 100},
{ name:'Dependency Key', field: 'id', width: '20%', minWidth: 100},
{ name:'Dependency File', field: 'file', width: '30%', minWidth: 100},
{ name:'Modified By', field: 'modifiedBy', width: '15%', minWidth: 100},
{ name:'Modified On', field: 'modifiedOn', width: '10%', minWidth: 100, cellTemplate:'<div class="ui-grid-cell-contents">{{grid.appScope.convertDate(row.entity.modifiedOn)}}</div>'},
{ name:'Dep. File Checksum', field: 'checksumAmericas', width: '10%', minWidth: 100}
],
onRegisterApi : function(gridApi) {
$scope.GridApi = gridApi;
}
};
$scope.GridOptions.multiSelect = false;
then this method gets called each time the user clicks on a row. I get which row the user has selected and assigned it to $scope.selectedRow
$scope.GridOptions.onRegisterApi = function(gridApi){
//set gridApi on scope
$scope.GridApi = gridApi;
$scope.GridApi.selection.on.rowSelectionChanged($scope,function(row){
if($scope.selectedRow == null)//user has not selected a row
$scope.selectedRow = row;
else if(row.entity.username == $scope.selectedRow.entity.username && row.entity.id == $scope.selectedRow.entity.id)//user clicked the same row that was selected and now has unselected
$scope.selectedRow = null;
else //user selected new row
$scope.selectedRow = row;
});
};
Then to when the user clicks remove button it calls a method and inside that method i check to see if $scope.selectedRow is not null and then to remove from the table is just 1 line
if($scope.selectedRow != null)
$scope.GridOptions.data.splice($scope.GridApi.grid.renderContainers.body.visibleRowCache.indexOf($scope.selectedRow), 1);
This website really helps with ui-grid functionality:
http://ui-grid.info/
http://ui-grid.info/docs/#/tutorial/210_selection
Hope this helps
I've hooked up a DropDown editor inside a Grid column, and I've followed the Kendo example here :
http://demos.telerik.com/kendo-ui/grid/editing-custom
I actually do have the downdown editor working in Add/Edit mode, and with the DataSource binded to it. However, I can't figure out why the styling is all messed up.
As you can see in the below image, the dropdown is rendered but there is also an text box rendered just below it.
All appears to be styling fine in my plunker example, http://plnkr.co/edit/mxBYYerPLazQwctQkDjS?p=preview, but not in my real project code.
My HTML :
vm.userDimenGridOptions = { // Kendo grid - USER DIMENSIONS...
selectable: true,
sortable: true,
pageable: true,
columns: [
{ field: "id", width: "50px", hidden: true },
{ field: "dimension", width: "120px", editor: dimenDropDown, template: "#=dimension#" },
{ field: "hierarchy", width: "80px" },
{ template: '<button onclick="return up(\'#=uid#\')">up</button><button onclick="return down(\'#=uid#\')">down</button>' },
{ command: [{ name: "edit", text: '' }, { name: "destroy", text: '' }], width: 170 }
],
editable: "inline",
toolbar: ["create"],
messages: {
commands: {
cancel: "Cancel",
canceledit: "Cancel",
create: "dimension",
destroy: "Delete",
edit: "Edit",
save: "Save changes",
select: "Select",
update: "Update"
}
}
};
My angular controller code :
// SERVER-SIDE DIMENSIONS DATA SOURCE
vm.dimensionsDataSource = new kendo.data.DataSource({
transport: {
read: getDimensionsFromServer
}
});
function dimenDropDown(container, options) {
$('<input id="dimenDropDown" data-text-field="name" data-value-field="name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
dataTextField: "name",
dataValueField: "name",
dataSource: vm.dimensionsDataSource
});
}
I also wanted to show an image of what the Insepect Elements looks lik in Chrome. Indeed some weird behavior here; see the SPAN inside the SPAN. And within each SPAN tag there's an INPUT tag.
Why two input tags ???
Take the Template off from the column and try. I'm not sure though
{ field: "dimension", width: "120px", editor: dimenDropDown }
If I have more than one instance of a Grid I have numerous problems. One problem is that the saving of state (ie. sorting, filter widths etc.), doesn't work properly. Saving of state is reset when I navigate to another instance of the same Grid. However if I am on the page with just one grid, I can click on refresh, and change things about, and everything saves OK. Its just when i navigate to a screen with another instance of my grid.
Yes, I am setting a different stateId for the two instances, and I am making a call to Ext.state.Manager at the start of the application :
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
The creation of an instance looks like this :
this.packageGrid = Ext.create('js.grid.PackageGrid', {
stateId: 'CompletePackageGrid', //for my other instance I obviously use a different string here
width: 979,
height: 400,
});
And my Grid code looks like this :
Ext.define('js.grid.PackageStore', {
extend: 'Ext.data.JsonStore',
model: 'js.model.Package',
remoteFilter : false,
remoteSort: false
});
var createColumns = function () {
var columns = [{
dataIndex: 'id',
text: 'ID',
width: 80,
filter: {
type: 'int'
}
}, {
dataIndex: 'packageName',
text: 'Name of Packet',
width: 300,
filter: {
type: 'string'
}
}, {
}];
return columns;
};
Ext.define('js.grid.PackageGrid', {
extend: 'Ext.grid.Panel',
title: '',
multiSelect: true,
autoExpandColumn: 'name',
loadMask: true,
stateful: true, //*******STATEFUL!!!!
filterable: true,
initComponent : function (){
this.columns = createColumns();
this.initialConfig.columns = this.columns;
this.store = new js.grid.PackageStore();
this.plugins = {
ptype: 'bufferedrenderer',
trailingBufferZone: 20, // Keep 20 rows rendered in the table behind scroll
leadingBufferZone: 50 // Keep 50 rows rendered in the table ahead of scroll
};
this.viewConfig = {
stripeRows: true,
enableTextSelection: true
};
this.features = {
ftype: 'filters',
encode: false,
local: true
};
this.callParent();
}
});
I have tried to put as much code into my initComponent method, so there is less risk of objects being shared.
How does the code for my Grid look? Is there anything there that would explain this problem?