I have coded the following which I copied from an example:
var cellEditableTemplate = "<input style=\"width: 90%\" step=\"any\" type=\"text\" data-ng-class=\"'colt' + col.index\" data-ng-input=\"COL_FIELD\" data-ng-blur=\"updateEntity(col, row)\"/>";
// Configure ng-grid
$scope.gridOptions = {
data: 'myData',
enableCellEdit: true,
multiSelect: false,
columnDefs: [
{ field: 'Id', displayName: 'Id' },
{ field: 'Name', displayName: 'Name', enableCellEdit: true, editableCellTemplate: cellEditableTemplate },
{ field: 'Description', displayName: 'Description', enableCellEdit: true, editableCellTemplate: cellEditableTemplate }
]
};
// Update Entity on the server side
$scope.updateEntity = function (column, row) {
console.log(row.entity);
console.log(column.field);
// code for saving data to the server...
// row.entity.$update() ... <- the simple case
}
Everything works and the correct data is logged to the console.
Now I need to understand how I can update data on my server. The creator of the example is suggesting
row.entity.$update()
Can someone help me out. Is this a function that's part of the ng-grid and if not then how could I implement the $update to change data on my server through http?
Now that you know the column, the row, and the new value, you can use $http or $resource or even jQuery.ajax to update your model.
Related
i have spent lots of hours finding a solution but no success every time i am finding a solution it ends up with static data not from any web API or database. i want dynamic data to be populated in drop down list in UI grid. i have read in one blog in which guy was saying for dynamic data we have to use editDropdownRowEntityOptionsArrayPath but i did not find any useful solution. any one can provide any useful information than i will be vary thankful. thanks in advance. this is what i have done.
$scope.listOptions = []; $scope.ddlist = [];
$http.get('http://localhost:26413/api/MenuVDN/GetVDNList')
.then(function (data) {
$scope.listOptions = data;
$scope.ddlist = $scope.listOptions.data.Table;
console.log($scope.ddlist);
})
$scope.gridOptions = {
enableColumnResizing: true,
enableSorting: true,
enableCellSelection: true,
canSelectRows: true,
// enableCellEdit: true,
columnDefs: [
{ field: 'NameEn', displayName: ' Menu Name', grouping: { groupPriority: 0 }, sort: { priority: 0, direction: 'asc' }, width: '25%' },
{ field: 'id', displayName: 'ID' },
{ field: 'language', displayName: 'VDN Language', grouping: { groupPriority: 1 }, sort: { priority: 1, direction: 'asc' } },
{ field: 'vdnname', displayName: 'VDN Name' },
{
field: 'vdnnum', displayName: 'VDN Number',
editableCellTemplate: 'ui-grid/dropdownEditor',
// editDropdownIdLabel: 'id',
editDropdownValueLabel: 'value',
// enableFocusedCellEdit: true,
enableCellEditOnFocus :true,
enableCellEdit: true,
editType: 'dropdown',
editDropdownRowEntityOptionsArrayPath : $scope.ddlist
// , cellEditableCondition: function( $scope ) { return true; }
}
]
};
plus i am getting response from webapi in json format like this.
{"Table":[{"id":2,"value":"AR-BOOKING-NEW (7101)"},
{"id":3,"value":"EN-BOOKIN-NEW (7102)"},
{"id":4,"value":"AR-BOOKING-CANCEL (7103)"},
{"id":5,"value":"EN-BOOKING-CANCEL (7104)"},
{"id":6,"value":"AR-BOOKING-MODIFY (7105)"}]}
$scope.columns = completedFiles.columns;
$scope.rows = completedFiles.rows;
//prepare custom column for ui-grid
var customColumns = [];
angular.forEach($scope.columns, function(column) {
customColumns.push({
field : column.fieldName,
displayName : column.displayName,
editable : column.editable,
dataType : column.dataType,
});
}
});
angular.forEach(customColumns, function(customColumn) {
customColumn['width'] = 200;
if (customColumn.dataType === 'dropDown') {
customColumn['cellTemplate'] = "<div class='ui-grid-cell-contents' id='col-description'><select class="form-control" data-ng-options="item in grid.appScope.arrayName track by item" ><option value="" selected hidden />/></select></div>";
customColumn['width'] = 180;
}
});
You can create custom template like above and after that just assign in $scope.gridOptions customColumns to columnDefs rather then defining the column definition there.
I'm using Angular Ui Grid.How can I show multiple fields for the single column ? Thanks.
I need to show both streetNumber and StreetName on the same column.How can I do that ?
vm.propertyListGridOptions = {
appScopeProvider: vm,
flatEntityAccess: false,
fastWatch: true,
showHeader: false,
columnDefs: [
{
name: app.localize('IplNumber'),
field: 'id',
width: 100,
},
{
name: app.localize('BrAddress'),
field: 'address.streetNumber',
width: 140,
}
],
data: []
};
You can use custom template like this
$scope.gridOptions['columnDefs'] = [
{field: 'name', displayName: 'Name'},
{field: 'options',displayName: 'Options', cellTemplate: '<span>{{row.entity.streetNumber}} {{row.entity.StreetName}}</span>'}
];
You can also refer this page for documentation for custom templates http://ui-grid.info/docs/#/tutorial/317_custom_templates
I'm trying to get UI-Grid on my Angular App to filter dates properly but it doesn't seem to respond to any kind of filter change. I've tried going over the docs and using their example:
displayName: "Long Date", cellFilter: 'date:"longDate"', filterCellFiltered:true,
But nothing seems to change the format of the date, here is my code currently: (updated)
$scope.gridOptionsClaims = {
enableSorting: true,
enableFiltering: true,
showColumnFooter: true,
enableGridMenu: true,
columnDefs: [
{ field: 'date', name: 'Date', displayName: "Date", type: 'date', cellFilter: 'date:"MM-dd-yyyy"', filterCellFiltered: true },
{ field: 'transaction_id', name: 'Purchase Order', displayName: "Purchase Order" },
{ field: 'full_name', name: 'Salesperson', displayName: "Salesperson" }
]};
I've tried using filters 'date:MM-dd-yyy' and that didn't work either. Could anyone please tell me what I'm missing?
Did you enable filtering with enableFiltering: true property?
Also, try to define cellFilter with filters as you already mentioned:
cellFilter: 'date:"yyyy-MM-dd HH:mm"'
I have a ng-grid on my page which is used to display details.
Is there a way to add action buttons like edit or delete to my ng-grid?
Or any property in gridOpts that needs to be set so as to enable the edit and delete button.
Also, On click of the button how will I get the details of the row selected.
Here is the code for my ng-grid.
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
multiSelect: false,
enableCellEdit: true,
enableRowSelection: true,
enableColumnResize: true,
enableCellSelection: true,
columnDefs: [
{ name: 'Name' },
{ name: 'Description' },
{ name: 'FinalModuleWisePrivileges' },
{ name: 'FinalFunctionWisePrivileges' },
{ name: 'Active' },
]
};
HTML:
I tried options like enableCellEdit and enableRowSelection but they dont seem to work.
Would this have to be done by using a loop when the grid is loaded?
I also tried to look at the following reference but it didn't help much.
ng-grid how to enable Edit and Delete buttons
Edit: I added the following line of code to the gridOptions. This solves the temporary purpose but is there a neat way to do this?
cellTemplate: '<button ng-click="grid.appScope.editClicked(row)" ng-if="row.entity.Active == true">Edit</button>'
you would need to add a column in ColumnDefs with a custom cell template..
columnDefs: [{ field: 'name', displayName: 'Name'},
{ field: 'description', displayName: 'Description'},
{ displayName: 'Actions', cellTemplate:
'<div class="grid-action-cell">'+
'<a ng-click="deleteThisRow(row.entity);" >Delete</a></div>'}
]
};
this example shows how to add custom Delete button
the example code is taken from here
I am new to angular and am trying to make a CRUD app with the ng-grid plugin. I found an example from the web that gets me the info I need, but not a good explanation on how to update the info using a REST route. Here is the code:
var cellEditableTemplate = "";
// Configure ng-grid
$scope.gridOptions = {
data: 'myData',
enableCellEdit: true,
multiSelect: false,
columnDefs: [
{ field: 'Id', displayName: 'Id' },
{ field: 'Name', displayName: 'Name', enableCellEdit: true, editableCellTemplate: cellEditableTemplate },
{ field: 'Description', displayName: 'Description', enableCellEdit: true, editableCellTemplate: cellEditableTemplate }
]
};
// Update Entity on the server side
$scope.updateEntity = function (column, row) {
console.log(row.entity);
console.log(column.field);
// code for saving data to the server...
// row.entity.$update() ... <- the simple case
}
How do I use the following from the example to update my model?
row.entity.$update()
Inject $http into your controller.
Then in your $scope.updateEntity:
$scope.updateEntity = function() {
$http.get('getDataFromServerUrl').success(function(data) {
//update data
$scope.gridOptions.data = data;
}).error(function(err) {
console.log('Error getting data', err);
});
}
and then your data will be updated, as $http activate the $digest cycle.