grid for angularjs project. I need datetime picker for the filter.
So I have used angular angular-bootstrap-datetimepicker-directive for that
Now my filter text box shows the datetimepicker.
But when i change the date it doesn't trigger filter change event
Here is my code:
$scope.gridOptions = {
paginationPageSizes : [1],
paginationPageSize : 1,
useExternalPagination: true,
showGridFooter : true,
showColumnFooter : true,
enableFiltering : true,
useExternalFiltering : true,
onRegisterApi : function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.filterChanged($scope, function(){
console.log("teststs");
angular.forEach(this.grid.columns, function(column){
console.log(column.filters[0].term);
if(column.filters[0].term)
$scope.searchParams[column.name] = column.filters[0].term;
else if(column.filters[0].term === null)
delete $scope.searchParams[column.name];
});
getPages(1, $scope.searchParams);
});
},
columnDefs : [
{
field: 'createdAt',
filterHeaderTemplate: '<div class="ui-grid-filter-container"><input type="text" id="dt1" class="form-control input-sm" datetimepicker ng-model="colFilter.term" placeholder="RAMA" name="time"></div>',
cellFilter: 'date: "yyyy-MM-dd"'
},
{
field: 'updatedAt',
cellFilter: 'date: "' + ENV.dateFormat + '"'
}
]
};
on the change event of the datepicker, you could add:
$scope.gridPacksApi.core.raise.filterChanged();
to force the event.
Related
I have a ui-grid, that allows the user selecting one row. If a row is selected I want to bind some fields of the selected row to input fields. How is this possible?
$scope.gridOptions = {
data : items,
columnDefs: [
{ name: 'ITEMNO', field: 'ITEMNO', displayName: 'Pos.', enableHiding : false, width: 75 },
{ name: 'SERIALN_REQ', field: 'SERIALN_REQ', displayName: 'Serialpflichtig', enableHiding : false, width: 175 }
],
enableScrollbars : false,
enableHorizontalScrollbar : 0,
enableVerticalScrollbar : 0,
enableFullRowSelection : true,
enableRowSelection: true,
enableSelectAll: false,
multiSelect : false,
selectionRowHeaderWidth: 0,
rowHeight: 55,
enablePaginationControls: false,
paginationPageSize: 5
};
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.grid.modifyRows($scope.gridOptions.data);
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
var rows = $scope.gridApi.selection.getSelectedRows();
}
In my HTML i have the following:
<div class="large-2 columns">
<input type="text" disabled ng-model={{}}> <!-- here i want to bind a cell of the selected grid row -->
</div><div ui-grid="gridOptions" ui-grid-selection ui-grid-pagination class="myGrid"></div>
Here is your expected one(get selected row values and bind them to the input elements).
Use the below code
$scope.rowtobebinded=undefined;
$scope.gridOptions.onRegisterApi = function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.grid.modifyRows($scope.gridOptions.data);
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
var rows = $scope.gridApi.selection.getSelectedRows();
//aravind's code to get the selected row elements is as below
gridApi.selection.on.rowSelectionChanged($scope,function(row){
console.log("selected row is ",row);
//binding the row's no to the textbox
$scope.rowtobebinded=row.entity.ITEMNO;
});
});
LIVE DEMO
I have a dynamically-driven ng-click call inside a cellTemplate call that should fire a function call to open a previously defined Ionic modal, but when I run the click event on entries in the datagrid, the associated scope function call never fires.
I'm not clear if the issue is caused by scope range, or the mechanism of building the function call problematically. Any ideas as to what the cause could be?
//Generator for edit links in the grid cell
$scope.makeEditButtons = function (gridName) {
return "<i class='icon ion-gear-a' ng-click='openEdit" + gridName + "Modal(row.entity)' title='Edit' style='cursor:pointer;'></i> <i class='icon ion-alert' ng-click='openDelete" + gridName + "Modal(row.entity)' title='Delete' style='cursor:pointer;'></i>";
};
//Cell declarations for grid for "Custom Costs"
$scope.custom_costs_columns = [
{field: "description", displayName: "Description", width: '35%'},
{field: 'cost', displayName: "Cost", width: '35%', cellClass: 'text-right', cellFilter: 'currency'},
{field: 'edit', displayName: "Actions", cellTemplate: $scope.makeEditButtons("CustomCost"), cellClass: 'text-center'}
];
// UI-Grid initalize
$scope.CustomCostOptions = {
enableSorting: true,
columnDefs: $scope.custom_costs_columns,
enableCellSelection: true,
enableRowSelection: false,
enableCellEdit: false,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
//Ionic Modal declare and click function
$scope.deleteCustomCostModal = $ionicModal.fromTemplate({{Template}}, function ($ionicModal) {
$scope.modal = $ionicModal;
},
{
scope: $scope,
focusFirstInput: true
});
$scope.openDeleteCustomCostModal = function (row) {
console.debug(row);
$scope.deleteCustomCostModal.show();
};
One possible issue with not being able to click the created button is because the $scope has not recieved the compiled elemt yet.
Modify the function to
$scope.makeEditButtons = function (gridName) {
return $compile("<i class='icon ion-gear-a' ng-click='openEdit" + gridName + "Modal(row.entity)' title='Edit' style='cursor:pointer;'></i> <i class='icon ion-alert' ng-click='openDelete" + gridName + "Modal(row.entity)' title='Delete' style='cursor:pointer;'></i>")($scope);
};
Use the following function and call it right before the click event.
$scope.applyToview=function(){ if ($scope.$root.$$phase != '$apply' &&
$scope.$root.$$phase != '$digest') {
$scope.$apply();
}
}
Good luck.
First, you need to declare the function to handle click event in appScopeProvider.
Then call it in cellTemplate
Ex:
vm.gridOptions = {
columnDefs: [
{field: 'edit', displayName: "Actions", cellTemplate: '<span ng-click="grid.appScope.clickHandler(row)">Edit</span>'}
],
................
appScopeProvider: {
clickHandler: onCellClick
}
}
function onCellClick(row){
console.log(row.entity);
}
Hope it helps!
First, your cellTemplate should be just that. It should look something like this:
cellTemplate: '<i class="icon ion-gear-a" style="text-decoration:underline; color: blue; cursor:pointer;" ng-click="grid.appScope.openDeleteCustomCostModal(row)">{{COL_FIELD}}</i><i class='icon ion-alert' ng-click="grid.appScope.deleteCostModal(row)" title='Delete' style='cursor:pointer;'></i>'
This will call the two functions you have when clicked.
I'm using Angular UI-Grid.
This is the grid implementation:
JS
var statusCellTemplate =
'<div class="ui-grid-cell-contents"><span ng-
if="row.entity.statusDetails.length>=2" title="My Tooltip">[Multiple Statuses]
</span></span></div>';
vm.propertyListGridOptions = {
appScopeProvider: vm,
flatEntityAccess: false,
fastWatch: true,
showHeader: false,
columnDefs: [
{
name: app.localize('ListingStatus'),
cellTemplate: statusCellTemplate,
width: 240,
},
],
data: []
};
I need to show the ToolTip by using below logic.Can you tell me how to implement such a logic with the above cellTemplate ?
_.each(row.entity.statusDetails, function (s) {
vm.statusValues += s.status.name + ', ';
});
Note : _.each can be a ng-repeat on angular.
I have data of messages including {id,message,date}.
I would like to display a grid for each Date with data{message} in AngularJs using ui-grid
I was thinking of something like this:
<div ng-repeat="(item in data | groupBy: 'Date'">
<div>{{ item.Date }}</div>
<div id="grid1" ui-grid="gridOptions(item.Date) " class="grid"></div>
</div>
but it's not working!
$scope.gridOptions = function (date) {
return {
enableSorting: true,
enableFiltering: true,
data: 'data',
columnDefs: $scope.filterGrid(date),
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
},
};
};
$scope.filterGrid= function (date){
return [
{ field: 'id', enableFiltering: False},
{
field: 'Date', enableFiltering: false, filter: {
noTerm: true,
condition: function (searchTerm, cellValue) {
return cellValue.match(date);
}
}
},
{ field: 'Message' , enableFiltering: false },
]
}
First of all - ui-grid has a grouping feature, but this is still in beta.
You can try to use this example to group the data and build grids accordingly.
var dataSource = {};
$scope.gridOptions = {};
var generalGridOptions = {
enableSorting: true,
columnDefs: [
{ name: 'prop1' },
{ name: 'prop2' },
],
data: null
};
// group the data
for(var i = 0; i < data.length; i++){
if(!dataSource[data[i].month]){
dataSource[data[i].month] = [];
}
var obj = {};
for(var prop in data[i]){
if(prop!='month'){
obj[prop] = data[i][prop];
}
}
dataSource[data[i].month].push(obj);
}
// build the grid options
for (var item in dataSource) {
$scope.gridOptions[item] = angular.copy(generalGridOptions);
$scope.gridOptions[item].data = dataSource[item];
}
ui-grid attribute recieves a gridOptions object containing several parameters. Two of them are:
columnDefs - defining the columns and their data-binding.
data - the message objects in your case.
Look at the the documentation for further study: http://ui-grid.info/docs/#/tutorial
Code Example
template:
<div ng-repeat='item in items track by item.id' ui-grid='getItemGridOptions($index)'></div>
Passing the item index to the controller allows you to process your data. Then you can return an object containing the data and columnDefs properties. Like this:
private getItemGridOptions(index): IGridOptions {
//get the data you need for your items array using the index...
// then return the gridOptions object (I put random values)
return {
columnDefs: this.columns,
rowHeight: 24,
rowTemplate: rowtpl,
enableHorizontalScrollbar: this.uiGridConstants.scrollbars.NEVER,
enableColumnMenus: false,
enableRowSelection: true,
enableRowHeaderSelection: false,
enableFiltering: true,
modifierKeysToMultiSelect: true,
multiSelect: true,
data: null,
};
}
I have an ExtJS field as:
field = {
xtype : 'datefield',
format : 'Y/m/d',
draggable : true,
allowBlank : true,
pickerAlign : 'tr-br',
getValue : function()
{
return this.getRawValue();
}
};
This works fine and I get the date in the field in the specified format. I want to be able the parse the date coming in from the datepicker and then display the date in locale specific format. How do I do it?
field = {
xtype: 'datefield',
format: 'Y/m/d',
draggable: true,
allowBlank: true,
pickerAlign: 'tr-br',
isValid : function()
{
return true;
},
setValue : function(value)
{
var valueToSet = "";
if (value)
{
valueToSet = moment(value).lang(lang + "-" + cntry).format('L');
}
this.setRawValue(valueToSet);
},
getValue: function () {
return this.getRawValue();
}
};