Search Posts

Category: angular-ui-grid

How to set an added row as dirty in Angular UI-Grid

There are lots of ways to set a row dirty on edit. I need to set the row dirty on adding it to the grid. Here is what I have so far: $scope.gridOptions.data.push(someNewRow); //this new row is imported from some external source One option would be to use a function in rowEdit to set a row dirty, but it requires a rowEntity object. I could do this: var newRowsEntityObject = ____? // I would need […]

Jasmine / Karma test error using angular.mock.inject

I am trying to run some Angular karma/jasmine tests to test functionality for ui-grid. But my issue is that my tests are breaking when they get to the injector.Here is my error: C:/Users/schmitzb/Projects/RCO/rco-project/test/index.js:9:280261 [email protected]:/Users/schmitzb/Projects/RCO/rco-project/test/index.js:9:11940 [email protected]:/Users/schmitzb/Projects/RCO/rco-project/test/index.js:9:277471 [email protected]:/Users/schmitzb/Projects/RCO/rco-project/test/index.js:9:139593 [email protected]:/Users/schmitzb/Projects/RCO/rco-project/test/index.js:9:1071148 [email protected]:/Users/schmitzb/Projects/RCO/rco-project/test/index.js:9:1069633 C:/Users/schmitzb/Projects/RCO/rco-project/test/index.js:9:1007389 TypeError: undefined is not a constructor (evaluating ‘$compile(‘<bss></bss>’)’) in C:/Users/schmitzb/Projects/RCO/rco-project/test/index.js (line 9) C:/Users/schmitzb/Projects/RCO/rco-project/test/index.js:9:1008235 I’m doing something incorrectly at this line I believe, when I remove this line and put in a different module it doesn’t error: […]

jQuery Datatable’s fnReloadAjax() equivalent in Angular UI Grid

I’m using a form to add data to the database and an Angular UI grid with pagination to show database data in the front. I want to reload the Angular UI gird every time I submit the form. In jQuery I have used , function submitForm() { . . /* form submitting process */ . $(‘#datatable’).dataTable().fnReloadAjax(); // to reload table } In AngularJs I used , (as mentioned in this) $scope.submitForm = function() { . […]

UI Grid header taking up entire page

So, I’ve been beating my head against the wall on a problem where angular-ui-grid’s header is taking up the entire height of the screen. I’ve reduced the issue down to one file in one plunk. http://plnkr.co/edit/XR7OVXjwSodqTNRBAVnv?p=preview <html> <head> <title>Broken ui-grid</title> <script src=”http//plnkr.co//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script> <script src=”http//plnkr.co///ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js”></script> <script> var app = angular.module(‘sample’, [‘ui.grid’]); </script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.7/ui-grid.min.js”></script> <script> angular.module(‘sample’).controller(‘SampleController’, [‘$scope’, ‘$timeout’, function($scope, $timeout) { $scope.uiGridOptions = { rowHeight: 36, data: [ { date: Date.now() / 1000, blah1: “Test data”} […]

Difference between name and field in ColumnDefs for ui-grid (AngularJS)?

Can anyone provide a practical example? From my understanding, field refers to the actual field you want to reference. That is, field should be the name of the variable (in the code) that you want to put in the table. displayName is more clear: it just specifies how the column name will be displayed in the table. This seems to be everything you need. What is the purpose of “name” then? Here is the documentation […]

how to implement accordion with ui-grid to collapse and expand the columns

string question = “Hey guys i am using ui-grid and running into an issue” +”where i have long descriptions in the column that i want to show it.Is” +”there any way that i can collapse all the columns when view it on mobile” +”phone and user can expand the accordian.There is an example in jquery” +”that uses footable pluin. I was wondering if i can do the same thing” +”with ui-grid.All you help will be […]

Expand row immediately after populating ui grid with data?

I want to expand the row in the ui grid immediately after populating it with data. This is the function for populating the data. $http({ url: ‘/Parameters/GetQuarterJson’, data: { AccountID: $scope.selectedProject, Year: $scope.selectedYear }, method: ‘POST’ }).then(function (response) { $scope.quarterGrid.data = response.data; }); And this is the function which is called based on some condition right after populating data to expand the row. $scope.paramerterGridApi.expandable.collapseAllRows(); var index, rows = $scope.quarterGrid.data; //$scope.quarterGrid.data contains the new data for […]

ng-click won’t trigger in ui-grid columnDef template

I am trying to trigger a custom function inside of my columnDef cell template as follows: export class GridComponent { constructor() {} this.gridOptions = { // grid options defined here columnDef.cellTemplate = ‘<bss-cell cellval=”{{row.entity[col.name]}}”></bss-cell>’; } private cellClicked () { // need to get the click event here but can’t console.log(‘got here’); } } This column definition holds the data in my grid. Bss Cell is a custom angular component I made which looks like this: […]

Next Page »