ng-grid | 易学教程

Column header wrapping when using Angular ui-grid

阅读更多关于 Column header wrapping when using Angular ui-grid

问题 I have upgraded my AngularJS SPA application from ng-grid v2.0.7 to ui-grid v3 and my column headers no longer wrap around. My column headers are now single lined and show an ellipsis ... when the column header doesn't fit. Has this feature been removed or is had it been superseded by a different method? 回答1: I believe I have found a way of wrapping text in the header columns by overriding the ui-grid-cell-contents CSS class. .ui-grid-header-cell .ui-grid-cell-contents { height: 48px; white

How to render html formatted content in ng-grid?

阅读更多关于 How to render html formatted content in ng-grid?

I have jsonData which consist of HTML content. I want to render that HTML in ng-grid. The content is not rendered however -- it only shows up in normal string format. Below is the plnkr which shows all the code: http://plnkr.co/edit/RlWyDqCUUR15dmLM7ePV?p=preview There's a few things going on here: Not related to your exact issue, but you've got nested single quotes in your firstName field. You need to do some escaping or your ng-click expression is going to break. So instead of ng-click='show('F:/cox/main.html')' you can do ng-click=\"show('F:/cox/main.html')\" . Also not related to your

Change the MenuItem icon in angular ui.gird

阅读更多关于 Change the MenuItem icon in angular ui.gird

问题 How to toggle the customizing_column_menu icons in angular ui.grid like shown below 回答1: I didn't found any best solution to change menuItems dynamically, Here is what I did for workaround Code $scope.gridOptions = { rowHeight: 75, columnDefs: [{ field: 'name', enableColumnMenu: false }, { field: 'gender', enableHiding: false, suppressRemoveSort: true, sort: { direction: uiGridConstants.ASC } }, { field: 'All Details', cellTemplate: '<p ng-show="grid.appScope.company"><label><b>Company:</b><

How to hide column in ng grid

阅读更多关于 How to hide column in ng grid

here is my code: index.html <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng- grid/css/ng-grid.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script> <script src="app.js"

How to mock ng-grid when unit testing a controller

阅读更多关于 How to mock ng-grid when unit testing a controller

问题 I'm currently trying to write tests for existing blocks of code and running into an issue with a controller that has a nested ng-grid inside of it. The issue comes from the controller trying to interact with the grid on initialization. Testing Software node@0.10.14 karma@0.10.2 karma-jasmine@0.1.5 karma-chrome-launcher@0.1.2 My Test: define(["angularjs", "angular-mocks", "jquery", "js/3.0/report.app", "js/3.0/report.controller", "js/3.0/report.columns" ], function(angular, ngMocks, jquery,

How to hide rows in ng-grid

阅读更多关于 How to hide rows in ng-grid

Background: I've been working on converting few pages in our applications to use AngularJS as an attempt for major architecture overhaul. So far Angular had proven to be friendly to me while its learning curve is pretty sharp, but that's okay. In one of our main page, we have slickgrid and I had decided to use ng-grid instead of slickgrid to save myself from headache in my first pass. Due to the nature of our app, the same data will be filtered/un-filtered many times throughout the page lifecycle. The whole dataset will always remain exactly the same and there is only 20-40 data points so far.

AngularJS: change color of a cell based on a condition ng-grid

阅读更多关于 AngularJS: change color of a cell based on a condition ng-grid

问题 Here is the plnkr code. I want to change the color of the age cell for all the rows that their alert property is true. I am not sure how to do it. I don't have a separate column for the alert. 回答1: Here you go. Refer this modified PLUNKER. Escaping single quote here but indenting the template for better readability. <div class="ngCellText" ng-class="{\'green\': row.getProperty(\'alert\') == \'true\' }"> {{ row.getProperty(col.field) }} </div> Above case is when alert is the string

angularjs ng-grid: parent child relations between the rows (hide/show rows)

阅读更多关于 angularjs ng-grid: parent child relations between the rows (hide/show rows)

I'm trying to implement rendering the ng-grid with predefined hidden rows and on some particular event I want to show them. I'm trying to simulate kind of parent-children relation between rows, but all rows will be rendered and placed in usual manner. By default the "child" rows will be rendered as "collapsed" When the parent item is clicked the children rows will be shown as expanded I'm trying to find some solutions with gridOptions rowTemplate settings, but I hope somebody has already faced with this kind of problem and maybe you have already solved it and it would be very helpful if you

ngGrid scroll vertically keeps jumping back up

阅读更多关于 ngGrid scroll vertically keeps jumping back up

This bug happens on IE9, it probably happens in earlier version of IE as well. The bug cannot be reproduced on Chrome. ngGrid, scrolling with mouse does not scroll the page down. It keeps jumping back to same location. You need to use the scroll bar on browser edge to get down the page. Annie C The problem is in the ngGridDirectives.directive'ngViewport' in the ngGrid js . It tries to focus on 'top' element, and this causes flickering/jumping. Solution: Look for element bind mousewheel elm.bind("mousewheel DOMMouseScroll", function() { isMouseWheelActive = true; // if (elm.focus) { elm.focus()

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

阅读更多关于 Any better approaches in achieving multi-column grouping in UI-Grid header?

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"> <div class="ui-grid-header-cell" ng-repeat="superCol in grid.options.superColDefs track by $index"