angular-ui-grid

In ui-grid, I want to use a function for the colDef's field property. How can I pass in another function as a parameter to it?

徘徊边缘 提交于 2019-12-06 22:50:28
When configuring an Angular ui-grid, you specify the field for each column definition. You can either use a string to point to the right field in the row.entity, or you can use a function. See this github issue for a quick summary of how: https://github.com/angular-ui/ui-grid/issues/723 When specifying the field using a function, I can pass in strings, objects, and arrays as arguments. For some reason, though, it doesn't work when I pass another function. In fact, the primary function to define the field doesn't even seem to execute at all. Here is a plunkr that shows two tables. The top one

How to make Angular ui grid expand all rows initially?

落花浮王杯 提交于 2019-12-06 22:36:57
问题 I am using ui grid to show a list of data and I am trying to initially expand all rows. I am trying to do this in the onRegisterApi event: scope.GridOptions = { data: properties, columnDefs: [ { name: "Full Address", field: "FullAddress" }, { name: "Suburb", field: "Suburb" }, { name: "Property Type", field: "PropertyType" }, { name: "Price", field: "Price", cellFilter: 'currency'}, { name: "Status", field: "Status" }, { name: "Sale Type", field: "SaleType" }, { name: "Date Created", field:

Problems getting Bootstrap DateRangePicker to work in filterHeaderTemplate with Modal popup in UI-Grid

浪尽此生 提交于 2019-12-06 17:02:53
问题 I'm trying to add a bootstrap DateRangePicker in the Filter Header Template for an Angular UI-Grid. I can see that the template is working properly because it shows the Bootstrap Icon. I do not want to use the native angular Type:'date'. I want to use a bootstrap date picker. I have a Plunker as an example further down, that shows the native datepicker working and the Bootstrap Datepicker button clickable but not displaying anyting. I have all the includes needed for this to show up. <!--

Hide horizontal scrollbar (Angular ui-grid)

情到浓时终转凉″ 提交于 2019-12-06 16:41:57
问题 I'm trying to hide the horizontal scrollbar of a Angular ui-grid, but I can't find the right property. (Property enableScrollbars=false removes both.) Is it possible to remove only the horizontal scrollbar? 回答1: With the latest version on Github v3.0.0-rc.16 you can disable horizontal and vertical Scrollbar separately. Instead of enableScrollbars = false; use enableHorizontalScrollbar = value; enableVerticalScrollbar = value; with value = 0; /* NEVER */ value = 1; /* ALWAYS */ value = 2; /*

AngularJS ui-grid import XLSX data best approach

混江龙づ霸主 提交于 2019-12-06 16:19:12
What would be the best approach to import XLSX data to be displayed using an AngularJS ui-grid? Is the js-xlsx parser a good choice for this, or are there other open source XLSX parser tools better suited for this task? In my case the XLSX data is very basic, nothing complicated, but I would like to preserve the style info as much as possible. I anticipate the the data grid will be less than 20 col x 1000 rows. Or would it be better to use an alternative data grid, such as the Hansontable, instead of ui-grid? Would that be better suited for spreadsheet data? Importing data into the grid with

angular-ui-grid pagination missing

我怕爱的太早我们不能终老 提交于 2019-12-06 10:34:25
问题 I have an ui-grid options as follows { "enableHorizontalScrollbar":false, "enableHiding":false, "enableColumnResizing":true, "enableSorting":true, "enableColumnResize":true, "paginationPageSize":20, "enablePagination":true, "enablePaginationControls":true, "columnDefs":[ // skipped for clarity ], "data":"griddata", "excludeProperties":[ "$$hashKey" ], "enableRowHashing":true, "showHeader":true, "headerRowHeight":30, "rowHeight":30, "maxVisibleRowCount":200, "minRowsToShow":10, "showFooter"

How to filter displayed data in ui-grid by using angularjs?

孤街浪徒 提交于 2019-12-06 07:14:14
问题 This is my code var app = angular.module('app', ['ui.grid']); app.controller('TableCrtl', ['$scope', '$filter', function ($scope, $filter) { var myDummyData = [{name: "Moroni",address:"one", age: 50}, {name: "Tiancum",address:"vij", age: 43}, {name: "Jacob",address:"dfr", age: 27}, {name: "Nephi",address:"mnc", age: 29}, {name: "Enos",address:"trr", age: 34}]; $scope.filterOptions = { filterText: '' }; $scope.gridOpts = { data: myDummyData, // enableFiltering: true, columnDefs: [ {name: 'Name

angular js ui-grid double click on row not working

限于喜欢 提交于 2019-12-06 05:10:13
I want to call a function myFunc on doubleclick of ui-grid row. for that I have used <ng-dblclick="grid.appScope.myFunc()"> but it is not being called and showing no error. here is the calling part of html : <div ui-grid="gridOptions" ui-grid-selection class="gridStyle" ng-dblclick="grid.appScope.myFunc()"> </div> and here is the js script: var myData = [{name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}]; var app = angular.module('myApp', ['ui.grid', 'ui.grid.selection']); app.controller('MainCtrl', function(

Angular UI Grid - Click event on selected row

廉价感情. 提交于 2019-12-06 05:09:11
问题 Target I've got a UI Grid. When I click on a row it should get selected and a function with the row as a parameter should be called. Current Approach I use the following config code to generate the Grid: $scope.gridOptions = { enableFiltering: true, enableRowHeaderSelection: false, enableRowSelection: true, multiSelect: false, noUnselect: true, onRegisterApi: function (gridApi) { $scope.gridApi = gridApi; $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row) { var name = row

Any better approaches in achieving multi-column grouping in UI-Grid header?

血红的双手。 提交于 2019-12-06 03:14:32
问题 I've tried to achieve the multi column grouping at column header level for UI-Grid with the below approach. Steps I've followed: Include the below header cell template, of the UI grid, with another "UI Grid row": <div class="ui-grid-header custom-ui-grid-header"> <div class="ui-grid-top-panel"> <div class="ui-grid-header-viewport"> <div class="ui-grid-header-canvas"> <div class="ui-grid-header-cell-wrapper" ng-style="colContainer.headerCellWrapperStyle()"> <div class="ui-grid-header-cell-row"