moonstorm / trnggrid Goto Github PK

If fields are defined by a variable the custom column will not show. If I let the columns load by default the column will show.

<table data-tr-ng-grid="" data-items="targetResults" data-page-items="5" data-enable-filtering="false" data-fields="columnDefs" data-selection-mode="SingleRow" data-selected-items="selected">
  <tbody>
    <tr>
      <td>
        <a class="btn" data-ng-click="openNewWindow()">
          <i title="Open New Window" class="fa fa-files-o" ></i>
        </a>
      </td>
    </tr>
  </tbody>            
</table>

I have tried out all the grids for angular, but your solutions seems to be very extensible and easy to reuse. I am facing a problem, when I just use the table without column definition it is fetching the data, but if i give the column definition using and it is not picking the data from scope. Can you please help me asap..

I have a column of dates. When I sort the column the dates do not order correctly. For Example, after I click the sort button, my format for dates look like this:

6/27/2014
4/26/2013
2/07/2014

I believe it is sorting on a string and not a date type. Is there any way to sort dates correctly?

In my grid i have error fields which i dont want to filter .How can i exclude some fileds from filtering .Please suggest

In order to leverage bootstrap styling, the styling that trnggrid adds on top of it should be minimal.

E.g. by making .table-bordered apply in default in trnggrid.js, a user has to override the css settings it imposes. If it was left out, a user who wants it can simply add the class to < table> element.

This would keep things simple, in line with trNgGrid philosophy. In fact I would argue that tr-ng-grid shouldn't make any styling decisions except for the features it adds (e.g. sorting).

I just want to start off by saying well done on a fantastic grid. I've been playing around with it for a couple days and I'm a big fan so far.

I've noticed 2 problems and will be opening separate issues on both. This one I have a fix for. Trying to customize the display name using display-name="blah" in the html is not working.

The segment below is where I think the problem is. From what I understand, $eval is used to evaluate angular expressions.

var setupColumnTitle = function (scope) {
     if (scope.columnOptions.displayName) {
          scope.columnTitle = scope.$eval(scope.columnOptions.displayName);
     }

If you remove the $eval, it grabs the text directly and uses that as it should.

var setupColumnTitle = function (scope) {
     if (scope.columnOptions.displayName) {
          scope.columnTitle = scope.columnOptions.displayName;
     }

I have a fairly default table without column filters. This table nicely sizes columns to fit the content. As soon as I add column filters, all the columns become the same size despite having different textual content. How can the default non-filtered behavior be retained, sizing columns without manually specifying sizes?

Have been looking for a decent grid for a while now and wasn't happy at all with ng-grid, ng-table, wijmo or kendo... this looks SUPER promising.

I'm trying to convert an ng-table directive that contained an ng-click="open(myItems.id)" directive on which would call the open method in the controller (and handle opening a new route with the details for that record). It's not entirely clear if that's possible or how I would do that in trNgGrid, both defining a custom click method in place of selections or referencing that row's id value.

Any ideas, or is this possible as an enhancement?

Thanks for the great work to date, it seems like you've made some serious progress in the last few months!

The summary at http://moonstorm.github.io/trNgGrid/ says the only dependencies are angular and bootstrap, the readme here says it also requires jQuery...

Which is it? I have no desire to add jQuery to my project, so I'm hoping that's old info.

If there is a dependency, what do I lose if I don't have it? Can it be removed relatively easily?

My example is that I am presenting dates in this format "Wed, Dec 15, 2010" via a "display-format" filter, and while entering "15" and "2010" leave the row displayed, entering "Wed" filters the row out.

Individual header filtering enable/disable appears not to be working in beta. Applogies if I shouldn't be raising issues on the beta.

Hi, and thanks for this library. After trying a couple others, I liked trNgGrid better, one of the main reasons being that it uses a real html table and doesn't generate an indigestible div soup.

I have a question / request : I am implementing a search controller with the grid for search results with server-side paging. Each line represents a record and has a button that can be clicked to see the details. The click takes the user to a different controller.

Now, When the user comes back to the list, I want the state of the page to be the same as when he left it. So for example if he had made a search for records between 1.1.2014 and 30.6.2014, and had navigated the 4th page of results, then clicked on a record to see the details, then clicked on the back button, the user should be back to the same search, at the same page, with the same sorting etc..

To do that, I implemented an angular service that can be used to save and restore the state. It works for the search criteria and result. I would like to also restore the paging state of the grid, but the main currentPage attribute seems to be read-only. Adding a current-page attribute with a value matching a scope property to the table has no effect.

Would it be possible to make this attribute "bidirectional-bindable", such as for example order-by ? So that the page of the grid initially selected can be specified externally and it doesn't always has to be the first page ?

This will cause both the SingleRow event to fire and the link ng-click even to fire. When clicking the link button in a custom field, only the ng-click event should fire.

<body data-ng-controller="ManagementController">
        <table data-tr-ng-grid="" data-items="targetResults" data-page-items="5" data-fields="columnDefs" data-enable-filtering="false" data-selection-mode="SingleRow" data-selected-items="selected">
            <tbody>
                <tr>
                    <td>
                        <a class="btn" data-ng-click="openNewWindow(gridItem)">
                            <i title="Open New Window" class="fa fa-files-o" ></i>
                        </a>
                    </td>
                </tr>
            </tbody> 
        </table>
    </body>

(I am very new to angular, so might be trivial to workaround or not an issue at all)
I want to build up the table columns completely from metadata (so no field names in thead), however if i create the header using ng repeat, trNgGrid fails.

Code:

    <div class="row"> <!-- this below works (data is correct) -->
        <table tr-ng-grid="" items="systables.list" enable-filtering="false">
            <thead>
            <tr>
                <!--<th field-name="key" enable-filtering="false" enable-sorting="true" cell-width="4em" display-align="right"></th>-->
                <th field-name="key" enable-filtering="false" enable-sorting="true"></th>
                <th field-name="version" enable-filtering="false" ></th>
                <th field-name="tableName" enable-filtering="false" ></th>
                <th field-name="description" enable-filtering="false"></th>
            </tr>
            </thead>
        </table>
    </div>
    <div class="row">
        <table tr-ng-grid="" items="systables.list" enable-filtering="false">
            <thead> <!-- *********** FAILS: -->
                <tr><th ng-repeat="column in visibleColumns(model.tables.SysTable.columns)" field-name="{{column.name}}"></th></tr>
            </thead>
        </table>
    </div>

Hi, is there way to make fixed headers and footers?

Like in ng-grid:

Thanks!

To trigger the sorting of a column you currently have to hit the small triangle arrow.
Better especially on mobile devices would be the whole column header be the clickable area.

This is another issue that arose while I was playing with a data set. I can access the entire subarray, but not individual elements. Example: {{owner.login}} works in html, however owner.login does not work as a field name. Using owner will pull the entire owner array and display it in the table.

Sample Dataset: https://api.github.com/users/mralexgray/repos

I was using ngGrid before and it worked there, so I dug around and ripped a small section of code from them and it worked well.

Present Code:

if (fieldName) {
     var displayFormat = gridColumnDef.displayFormat;
     if (displayFormat) {
          // apply the format
          if (displayFormat[0] == ".") {
               outputItem[fieldName] = eval("inputItem[fieldName]" + displayFormat);
          } else {
               // angular filter
               outputItem[fieldName] = scope.$eval("gridOptions.items[" + inputIndex + "]['" + fieldName + "'] | " + displayFormat);
          }
     } else {
          outputItem[fieldName] = inputItem[fieldName];
     }

Updated Code:

if (fieldName) {
     var displayFormat = gridColumnDef.displayFormat;
     if (displayFormat) {
          // apply the format
          if (displayFormat[0] == ".") {
               outputItem[fieldName] = eval("inputItem[fieldName]" + displayFormat);
          } else {
               // angular filter
               outputItem[fieldName] = scope.$eval("gridOptions.items[" + inputIndex + "]['" + fieldName + "'] | " + displayFormat);
          }
     } else {
          if (fieldName.match(/\./g)) {
               var properties = fieldName.split('.');
               var currentProperty = inputItem;
               for (var j = 0; j < properties.length - 1; j++) {
                    currentProperty[properties[j]] = currentProperty[properties[j]] || {};
                    currentProperty = currentProperty[properties[j]];
               }
               outputItem[fieldName] = currentProperty[properties[properties.length - 1]];
          } else {
               outputItem[fieldName] = inputItem[fieldName];
          }
     }

I was wondering the best approach to be able to dynamically add or remove columns. I have data objects with many more fields than I want to display and I want to let the user select the columns they want.

Right now all the column properties are defined on the TH elements in the table head. It would be nice to be able to define them on a watched object in the parent controller scope. I'm not an angular expert and would appreciate any pointers.

I recently started experimenting with (and using!) this tool and I'm finding it great!

I've looked at the documentation and a bit at the code and so far it seems that the filter-by functionality only accepts a string. It would be very convenient to have extra flexibility here, for example to optionally specify a function to perform the filtering logic. Perhaps this would be rather straightforward to implement by someone here already more familiar with the internals of the tool, and I would be willing to give it a try if anyone can give hints.

Thanks,
Carlos

After sorting on a column the up/down arrow is missing. Comparing before and after CSS

Before snippet:
class="tr-ng-sort-inactive text-muted tr-ng-sort-order-normal glyphicon glyphicon-chevron-down"

After snippet:
class="tr-ng-sort-active text-info tr-ng-sort-order-normal glyphicon-chevron-down"

Could it be possible that the class glyphicon has been missed?

Probably, I've just missed some obvious solutions to my problem, but even after checking the source code, I couldn't find anything better.
I have a custom json, where each row basically : {id : 1, item:{ name : "some", serialNumber:"123" } }, and the item should be displayed in one column. Unfortunately I couldn't figure out, how to do it with the display-format attribute: "name + " ("+serialNumber+")" doesn't work.
However I found an ugly hack, specifying field-name as field-name="item.name + ' (' + inputItem.item.serialNumber+ ')'" but I would rather see some nicer solution, if exists

I didn't experiment yet with your lib, but it looks promising: how hard would you say it is to integrate editing features with http://vitalets.github.io/angular-xeditable/#overview ?

If I place 2 grids on the page and switch between them using ng-switch. The row data does not render if I switch back and forth between the two grids. However, the paging shows the correct number of items.

Is it possible to change the display-name of a field using ng-repeat from an array of field name and display names?

th ng-repeat="field in fields" field-name="{{field.Id}}" display-name="{{field.Name}}" /th

We are using angular-translate ( http://angular-translate.github.io/ ) to translate our application. One great feature is the translation switch inside the page updating all texts without the need to reload the page.

When defining column names, the text of the column name is not updated on language change when specified using the documented display-name attribute.
It works fine when the column name is put as text inside the th element, but that is not documented on your page,

In this example definition below the "name" does not update when the language is changed, It works fine for the "zip" column.

<thead>
<tr>
<th field-name="name" display-name="{{ 'customer_name' | translate }}"></th>
<th field-name="zip">{{ 'zip_code' | translate }}</th>
</tr>
</thead>

So you could either:

1. Make display-name properly monitor the argument for changes
   or
2. clarify if what I did for zip code is valid code and supported in future versions

Thank you very much for the trNgGrid!

can you plz add a bower package

Here's a plunker that should work as it is just a minimum setup defining columns inside thead, but as you will note, the "I'm never shown" is indeed never shown, and the last field in the array is used instead:

http://plnkr.co/edit/UwB2pVTqhKi9Im9SY0nz?p=preview

When setting the data-fields=[...] attribute, it works correctly, but I want to set up my column templates. I don't know how you got it to work in the demo site.

Can you add package.json to your repository so that I can use this with grunt/gulp and list this awesome project as my dependency?

Thanks!

For multilanguage support at least the following texts should be accessible for translation:

• The pager containing for example "First Page", "Next Page", "Previous Page", "Last Page", "No items to display", "...displayed, ... in total", "No items to display"
• The placeholder "Search"

First of all, thanks so much for such a clean grid implementation!

Moving on to a potential enhancement, the current 'sticky' multi-select behaviour is good for touch screens but inconvenient and unnatural for desktops. It would be good if the selection behaviour came in 3 modes:

1. single (already implemented)
2. sticky multi (already implemented)
3. non-sticky multi.

In the third case, if a user clicks on a new row, all other previously selected rows would be unselected. Modifier keys would enable multi-select: control would include an additional single row; shift would include a range of rows, much like any desktop OS file navigation.

As an aside, using shift currently doesn't do anything but strangely highlight the text, which is somewhat unexpected behaviour.

Look forward to seeing more enhancements! :)

I am using global filter

input class="form-control" type="text" ng-model="gridOptions.filterBy" ng-change="onChange()" placeholder="Search"/>' +

How can i customize this to filter only some fields .

something like this filter-by-filelds = ['name','place','designation']
So it will filter only the mentioned fields . I was trying this , somehow i couldn't able to achieve .Any help will be appreciable .

i am binding like item = model.data ,and displaying only for fields , but the array contains other fields like email id ,error ect , now what is happening is that the grid is filtering through out the object rather than the visible fields in the grid

This may look like traditional style but sometime user still need this feature.
How did you thought ?

Started using trNgGrid today and its been great. Nice job.

Hit these niggles with the default sorting though:

• once a sort has been selected, the up/down icon no longer reacts to clicks giving you the impression something is broken; the heading text does react
• the heading text doesn't show the pointer icon even though it is clickable
• when there is limited horizontal space, the icon wraps causing the filter boxes to go out of alignment (see screen shot); the header text and icon not wrapping as a group would be better (as other table sorting JavaScript allows)

Happy to use any work-arounds you suggest; would be good if eventually these were addressed "out of the box".

Any chance to get rid of jquery? Looking at the code it seems to be doable...

Look to examples but didn't find out the solution.
If I want to highlight a row by its field value (for example: item.Id = 1) with certain class, look like:

How to implement?
Thanks for help.

I really like trNgGrid... There's just one feature missing - groupping... Once groupping is there - it's all I need...

Excellent, excellent project.

Was trying to see if I could have multiple filters within a column. Thus, filtering within a column could be within multiple fields. For example, in a column, if there were A, B, C...you could, filter on A and B which would yield A, B (no C) rather than just A, just B, or just C. I don't think it was designed to handle this, but would definitely love to hear suggestions as to the possibility.

Many thanks.

Great module. Works fine in Chrome and FF

However in IE8 I can only see a blank table. Is there a way to make this work in IE8? Any advice is appreciated.

Here are screenshots:

In IE8

In Chrome

Hello,
this is really the best Angular grid project I've stumbled upon till now. AFAIK, no other grid implements this degree of separation between the table markup and the controller.
Anyway, it's probably my fault, but I'm not getting the rows displayed. My HTML seems correct, yet when I run it the footer tells me the number of records, but nothing is displayed in the table body. If I remove the thead element and let it go with automatic column definitions, it works fine. Otherwise, nothing is displayed. I tried with only th, and even with custom templates in the body, with no luck. Here is my HTML (I use brackets instead of <> to avoid issues in the post):

(table tr-ng-grid
items="items" page-items="pageSize" total-items="itemCount"
on-data-required="onitemPageRequested(currentPage, filterBy, filterByFields, orderBy, orderByReverse)"
enable-multi-row-selections="false" selected-items="selectedItems")
(thead)
(tr)
(th field-name="label" display-name="label")(/th)
(th field-name="category" display-name="category")(/th)
(th field-name="author" display-name="author(s)")(/th)
(th field-name="lastUpdated" display-name="updated")(/th)
(th field-name="stepCount" display-name="steps")(/th)
(/tr)
(/thead)
(/table)

Could you give my any suggestion? Thanks!

I love this angular grid, one thing that make me love it more would be if I could have a pagination that let you click on pages instead of just a next/previous button.

keep up the great work.

To get sort arrows to show up for those using bower/grunt, the css file needs to be included:
"main": ["./release/trNgGrid.min.js", "./release/trNgGrid.min.js", "./release/trNgGrid.min.css"],

The pager rendered as a select makes no sense when a large number of pages are available. Also a form type element is not compatible with the Bootstrap CSS for pagination.

Currently the grid uses a cooldown delay before firing up the callback linked via the on-data-required attribute. Ideally it should immediately proceed to ask for data as soon as:

• the ENTER key is pressed in the global filter and the column filter
• the pager or the bound variable changes the current page
• sorting glyphs are actioned
• on first grid render

Can I get an example of how to pass fields as a variable? As far as field name, display name, etc.

The reason I'm asking is because I would like to hide fields from the view but be able to access them when selected in the grid. Like when selecting a row I need the ID but I don't want that information displayed.

I'd like to put an HTML link tag into column cells. I tried to use a custom column, but then I can't sort or filter. I also tried a normal column using display-format attribute with a custom Angular filter, but in this case Angular converts the tag into text, e.g. it replaces < with > and < with <. Based on my research I would need to use ng-bind-html-unsafe attribute for the elements to be able display the HTML properly. Is there anything I can do to make this work ?

Hello,
I use fields= in table definition. No header. Fields list is dynamic and retrieved from the server.
I would like to set enable-filtering and enable-sorting for each field.
But I can't write header on the fly with ng-repeat.
No idea ?
http://plnkr.co/edit/nzgB4hyLOsOSTNx1cBFi?p=preview
By the way ... great work !
Thank you,
Philippe

I'm working on a better way to override the default templates, this time via the angular template cache service. This way you can keep your changes consistent throughout your entire website, rather than copy&pasting the changes in every single instance of the grid.

Any CRUD example?

Using a select component to submit a list of fields to the trNgGrid. When changing between field sets, it comes up with the following error.

Error: [$compile:ctreq] Controller 'trNgGrid', required by directive 'trNgGridBodyCell', can't be found!
http://errors.angularjs.org/1.2.8-build.local+sha.affcbad/$compile/ctreq?p0=trNgGrid&p1=trNgGridBodyCell
at https://i-rh6-tomcat2:7443/ODINCore/js/angular/angular.js:78:12
at getControllers (https://i-rh6-tomcat2:7443/ODINCore/js/angular/angular.js:6050:19)
at nodeLinkFn (https://i-rh6-tomcat2:7443/ODINCore/js/angular/angular.js:6201:35)
at compositeLinkFn (https://i-rh6-tomcat2:7443/ODINCore/js/angular/angular.js:5630:15)
at nodeLinkFn (https://i-rh6-tomcat2:7443/ODINCore/js/angular/angular.js:6214:24)
at compositeLinkFn (https://i-rh6-tomcat2:7443/ODINCore/js/angular/angular.js:5630:15)
at publicLinkFn (https://i-rh6-tomcat2:7443/ODINCore/js/angular/angular.js:5535:30)
at boundTranscludeFn (https://i-rh6-tomcat2:7443/ODINCore/js/angular/angular.js:5649:21)
at controllersBoundTransclude (https://i-rh6-tomcat2:7443/ODINCore/js/angular/angular.js:6241:18)
at ngRepeatAction (https://i-rh6-tomcat2:7443/ODINCore/js/angular/angular.js:19239:15)

Other than the error the grid seems to load the new fields and work fine.

I have the following structure but I can't seem to get the selectedItems to update

<div ng-controller="TableController">
<p ng-bind="mySelectedItems"></p>
<table tr-ng-grid="" items="items" page-items="10" selected-items="mySelectedItems" enable-multi-row-selections="true" enable-selections="true">
</table>
</div>

myApp.controller('TableController', function($scope) {
  $scope.items = [{key:value}...]
})

mySelectedItems never seems to get updated - am I doing something wrong?