I need to change the value in a particular row wise column value in ui grid i.e., from Inactive to active status
I have a table in ui grid like
ID Name Status
1 India Active
2 Germany Inactive
3 France Active
4 Italy Active
5 Canada Inactive
My grid code
$scope.gridOptions = {
columnDefs: [
{
field : 'name',
displayName : 'Name',
width : '25%',
enableColumnMenu : false,
sort : {
direction : uiGridConstants.ASC
},
cellTemplate : '<div class="ngCellText" ng-class="col.colIndex()" ng-controller="NameController"><a ng-click="editPop({{row.entity}})">{{COL_FIELD}}</a></div>'
}, {
field : 'status',
displayName : 'Status',
width : '25%',
enableColumnMenu : false,
cellTemplate: '<div ng-controller="StatusController" ng-if=\"row.entity.status == \'Active\'\" ><img src=\'assets/img/on.png\' /><a ng-click="checkStatusDepend(row.entity.id,row.entity.name,row.entity.status)">Active</a></div>'+
'<div ng-controller="StatusController" ng-if=\"row.entity.status == \'Inactive\'\" ><img src=\'assets/img/off.png\' /><a ng-click="checkStatusDepend(row.entity.id,row.entity.name,row.entity.status)">Inactive</a></div>'
}
],
data: 'myData'
};
For calling this grid
getPage();
var getPage = function(obj) {
object.charge({}, function(list){
$scope.myData = list.data;
});
};
I am getting the list in myData so it is displayed in ui grid table.
I am updating the status in status controller
$rootScope.$emit("statusUpdateCall",id);
and for changing the value in another controller
$rootScope.$on('statusUpdateCall', function(events, args){
getPage();
});
I want to change for ID no 2 status Inactive to Active, in backend using rest spring i am updating in database but in frontend i need to change it to Active.
Currently i load the data from beginning.
I have gone through the angularjs ui grid tutorial using splice it removes particular row and add a new row with new changed data.
But without splice is there any other options are there to update particular column value?
Related
I want to edit row of data table(which is coming from some rest api call,the data in datatable is populated through angular js).
My Question is I need to add one input field in each row and when I submit then all the data will go and save in the database.So can you guys help me adding input field and when I submit then how to get all the datatable data and make a JSON request.
enter image description here
Please refer the image and I need to add input field in notes column and when press save button then it should take all the 7 datas in datatable and make a json request.
javascript Code:
vm.dataTableInstance = $('.datatable-basic').DataTable({
data : priorityAttrs,
columns : [
{ data: 'priority', title : 'Priority', width : '10%' },
{ data: 'attrName', title : 'Attribute Name', width: '30%' },
{ data: 'notes', title : 'Notes' },
{ data: null, orderable : false, width:'5%', render : function(data, type, row){
return '<ul class="icons-list"><li class="delete-user text-danger-600" onclick="angular.element(this).scope().deleteAttribute(this, \''+data.attrName+'\')"><a><i class="icon-trash"></i></a></li></ul>';
}}
],
});
You can use Angular-Xeditable for add data tables. please refer this document.
install xeditable
bower install angular-xeditable
Include angular-xeditable into your project
add "xeditable" to dependencies
var app = angular.module("app", ["xeditable"]);
I have a KendoUI Grid bound using Angular and I'd like to implement a custom action dropdown command or template column on each row. I need to track the dropdown change event for any of the rows when the grid is in display mode, not edit mode. The dropdown is effectively just a list of all of the name properties of the grid rows that I want to user to be able to select to move the row after another existing row.
For instance, say I have this data:
Id Name Position
A Red 1
B Blue 2
C White 3
I'd like each row to display a dropdown column while in display mode (so it acts like a row command). The dropdown would contain the names Red,Blue,White with corresponding values. When a user picks one of those colors, I will change the position of that row to the row position after the color selected. It's basically a row reorder dropdown instead of using drag and drop.
My other option is to show a couple of template columns with a move up/move down metaphor to do the switch but that gets a little cumbersome when you want to move a row more than a couple of positions.
Any ideas?
Ok, I did some more searching and found out a way to do this although it's not 100% of the way there yet. I also found a way to bind the dropdown to the data that populates the grid
The other thing I found when doing it this way is it is painfully slow in rendering the grid now.
<div id="mainGrid" kendo-grid="mainGrid" k-options="mainGridOptions"></div>
//grid columns
$scope.mainGridOptions = {
dataSource: {
transport: {
read: function (e) {
gridcolumnService.getGridColumns().success(function (data) {
e.success(data);
});
},
},
},
columns: [
{ field: "Name" },
{ field: "ColumnSettings.Type", title: "Type" },
{ field: "ColumnSettings.PrimaryKey", title: "Primary Key", template: '<input type="checkbox" #= ColumnSettings.PrimaryKey ? "checked=checked" : "" # disabled="disabled" ></input>' },
{ field: "ColumnSettings.Title", title: "Title" },
{ field: "ColumnSettings.Editable", title: "Editable", template: '<input type="checkbox" #= ColumnSettings.Editable ? "checked=checked" : "" # disabled="disabled" ></input>' },
{ field: "ColumnSettings.Visible", title: "Visible", template: '<input type="checkbox" #= ColumnSettings.Visible ? "checked=checked" : "" # disabled="disabled" ></input>' },
{ field: "LookupDataCommandId", title: "Lookup", template: '#= LookupDataCommandId ? "Yes" : "" #' },
{ template: '<select id="reorder-dropdown" kendo-drop-down-list k-on-change="exchangeRows(dataItem, kendoEvent)" k-data-source="reorderData()" k-data-text-field="\'Name\'" k-data-value-field="\'GridColumnId\'"></select>' },
{ template: '<a kendo-button k-icon="\'pencil\'" ng-click="editGridColumn(dataItem.GridColumnId)">Edit</a>', width: 100 }
]
};
$scope.reorderData = function() {
return $scope.mainGrid.dataSource.data();
};
$scope.exchangeRows = function (fromRow, e) {
$log.log(fromRow.GridColumnId, e.sender.dataItem().GridColumnId);
};
I'm using the new Angular UI Grid (that is planned to replace ng-grid).
My data needs some formatting before it's displayed in the table. For instance, my server returns an attribute named "status" as a number, but I want to display it as a nice name.
If status=1 display "Todo", if status=2 display "Doing" etc.
How can this be done in UI Grid?
The preferred method now is to use a cellFilter, rather than a custom template. Custom templates are OK, but they impose more workload on upgrade - you have to check whether new features require modifications to your template.
There is a reasonable example of filters in the tutorials: http://ui-grid.info/docs/#/tutorial/201_editable
Note the cellFilter: 'mapGender' on the gender column, and the filter itself defined further below in the tutorial:
.filter('mapGender', function() {
var genderHash = {
1: 'male',
2: 'female'
};
return function(input) {
if (!input){
return '';
} else {
return genderHash[input];
}
};
})
First step, add a cellTemplate to the column:
$scope.gridOptions.columnDefs = [
{field:'status', displayName: 'Status',cellTemplate: 'statusTemplate.html'}
];
The Template-File should look like this (COL_FIELD is the actual field):
<div style="text-align: center">{{COL_FIELD==1 ? 'Todo' : 'Doing'"}}</div>
Hope, you got the idea! :)
The shortest way is use CellTemplate with appScopeProvider:
vm.gridOptions = {
columnDefs: [
{
field: 'status',
cellTemplate: '<div>{{grid.appScope.formatStatus(row)}</div>'
}
],
appScopeProvider: {
formatStatus: function (row) {
return row.entity.status === 1 ? 'Todo' : 'Doing';
},
}
}
I have a model defined on the client.
module Shared{
export class HotelType{
ID : number;
Description : string;
}
export class Hotel{
ID : number;
Type : HotelType
}
}
I am using ngGrid to display the data.
What I do in my controller is very simple. Call the service and populate the data in the ng grid.
this.$scope.gridOptions = {
data: 'hotels',
columnDefs: [{ field: 'ID', displayName: 'HotelID' },
{ field: 'Type.Description', displayName: 'Description' }],
multiSelect: false,
selectedItems: []
};
ServiceManager.CallMethod(...)
.success((hotels) => {
this.$scope.hotels= hotels;
});
All my hotels are of the same type. First row in the grid if fine.
10 - Best hotel
but the description in other rows is empty
11 -
12 -
When looking at what I get from my service I noticed I get an array of Hotels which is fine.
hotels[0].Type is a object with an $id = 2 and has all the properties (Description : "Best hotel" etc..)
But, hotels[1].Type only has one property $ref "2".
And it is the same with all other types in other hotels.
I believe this is the reason why ng grid is displaying a description in only first row.
Does anyone know how this can be fixed?
I would like to see description in all of the row of ng grid..
Thank you.
I have a working sort-able grid using the ext 3.4 grid filter plugin. I would like to default the active column to filter true values. User who needs the inactive records could remove the filter. How do I specify a default filter column and value?
Thanks in advance!
colModel: new Ext.grid.ColumnModel({
defaults: {
sortable: true
// How do I specify a default filter value
//
// Only show active records unless the user changes the filter...
},
columns: [{
dataIndex:'f_uid',
id:'f_uid',
header:'ID',
hidden:true
}, {
dataIndex:'f_name',
id:'f_name',
header:'Name',
}, {
xtype:'booleancolumn',
dataIndex:'f_active',
id:'f_active',
header:'Active',
filterable:true,
trueText:'Active',
falseText:'Inactive'
}]
I realise this is an old question but it took me a while to find a solution, therefore I thought I would share.
1) The filter can be set using the value property in the filter.
filter: {
type: 'LIST',
value: ['VALUE TO FILTER']
}
2) In order to initially filter the data use the filterBy() method in the store. This could be defined in the onRender event handler.
this.getStore().load({
scope:this,
callback: function() {
// filter the store
this.getStore().filterBy(function(record, id) {
// true will display the record, false will not
return record.data.DATA_TO_FILTER == 'VALUE TO FILTER ';
});
}
});
The answer was in the Filter.js source code. The filter object within the column definition can be used to configure the default behavior.
}, {
xtype:'booleancolumn',
dataIndex:'f_active',
id:'f_active',
header:'Active',
trueText:'Active',
falseText:'Inactive',
filterable:true,
filter: {
value:1, // 0 is false, 1 is true
active:true // turn on the filter
}
}
I have encountered the same problem and I found that #John's answer is right, I can make it work with the sample http://dev.sencha.com/deploy/ext-4.0.0/examples/grid-filtering/grid-filter-local.html, for the grid-filter-local.js, just add the code like:
grid.getStore().load({
scope:this,
callback: function() {
// filter the store
grid.getStore().filterBy(function(record, id) {
// true will display the record, false will not
return record.data.size === 'small';
});
}
});
before the original code store.load(), and wipe off the store.load().
Then it will only show the record with size equals 'small' at the first load of the web page. Cheers!
I've made a universal helper class that allows you to set any default values in column definition.
https://gist.github.com/Eccenux/ea7332159d5c54823ad7
This should work with both remote and static stores. Note that this also works with filterbar plugin.
So your column item is something like:
{
header: 'Filename',
dataIndex: 'fileName',
filter: {
type: 'string',
// filename that starts with current year
value: Ext.Date.format(new Date(), 'Y'),
active:true
}
},
And then in your window component you just add something like:
initComponent: function() {
this.callParent();
// apply default filters from grid to store
var grid = this.down('grid');
var defaultFilters = Ext.create('Ext.ux.grid.DefaultFilters');
defaultFilters.apply(grid);
},