Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

using a url in cellTemplate in columnDef causes grid to malfunctions. #2053

Closed
joshmackey opened this issue Nov 10, 2014 · 9 comments
Closed
Assignees
Milestone

Comments

@joshmackey
Copy link
Contributor

If I include the html inline, it works fine, but as soon as its a remote file, the entire grid malfunctions having the headers be only a few pixels in height and the contents of the grid be invisible.

@PaulL1
Copy link
Contributor

PaulL1 commented Nov 12, 2014

Which version are you using?

@joshmackey
Copy link
Contributor Author

Reported on rc14, but similar issues happens on rc15.

On rc15, the grid contents show, but the header is still only a few pixels in height.

@c0bra
Copy link
Contributor

c0bra commented Nov 13, 2014

Here's a plunker demonstrating the problem: http://plnkr.co/edit/vXitx2XI5aLvG2YCRY4c?p=preview I think it may have something to do with leading/trailing whitespace in the cellTemplate when trying to $compile it. Investigating...

@c0bra c0bra added this to the 3.0 milestone Nov 13, 2014
@c0bra c0bra self-assigned this Nov 13, 2014
@c0bra
Copy link
Contributor

c0bra commented Nov 13, 2014

OK, the leading and trailing whitespace is not a problem. It's purely the remote $http call that is causing the cell to be blank...

@c0bra
Copy link
Contributor

c0bra commented Nov 13, 2014

Got it, I think. The problem is right here: https://github.com/angular-ui/ng-grid/blob/c19ffb101e86e02836dd3b9c760e9f769197e363/src/js/core/directives/ui-grid.js#L79

The dataWatchFunction gets called twice. First with an empty array, then with an array containing the data from the $http call. The problem is that the promises are getting resolved out of order. So the callback for the empty array is occuring AFTER the callback with the data. Your data gets set, then it gets cleared out.

Update: It appears to happen because when the initial empty data array comes in, it tries to build the columns off of it and creates a promise. But on the second go-around it skips that attempt and thus there's no promise, which probably resolves instantaneously with $q.all(). Meanwhile buildColumns() promise gets resolved and its callback, with the empty data set, blows away the rows.

@c0bra c0bra closed this as completed in 2b25f24 Nov 13, 2014
@joshmackey
Copy link
Contributor Author

Still happening. If I do a ctrl-F5, the header columns get set to only a few pixels in height, whereas if I just navigate to the page, they work fine.

Only happens when I include a column using cellTemplate.

@McShazy
Copy link

McShazy commented Nov 16, 2014

@joshmackey If you're having issues with the inline template, I've fixed this in the past by wrapping the whole template in a <div>. For example:

<script type="text/ng-template" id="blah2.html">
    <div class="ui-grid-cell-contents">TEST: {{COL_FIELD CUSTOM_FILTERS}}</div>
</script>

I also looked at your example and changed cellTemplate to blah.html and things seem to work fine.

@joshmackey
Copy link
Contributor Author

This was due to a different issue. #2110 caused it.

When I removed the offending styles, it all worked.

@prathik457
Copy link

I am also facing this issue.
I wanted auto-focus on the input element on click of filter button(external filter). So I explicitly defined the headerCellTemplate in columnDefs. I am keeping the html code in a separate template and I am trying to reference the in columnDefs.
In the console it says fetching URL and does not actually apply the template in the header.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants