Kinda new to this.
I'm attempting to use igGrid with a RESTful data source. This is taken primarily from the Help Topics, igDataSource Overview and Binding igDataSource to REST services. Everything seems to work. No errors in the client debugger (Chrome or IE). DOM shows <td> data as expected so all the RESTy stuff appears to be working as expected.
The issue is that while the header rows (column names and filtering drop down) appear correctly and the filtering menu opens, etc, none of the actual table data shows up on the grid. Kinda frustrating when I can look at the DOM and see the data but it does not show up in the grid. I'm sure it is something I've done incorrectly, but not sure what.
Also, I've put break point(s) in render function but it never seems to get called. Not sure if that is significant or not.
Any ideas?
Thanks!
Hello Tom,
Thank you for posting in our forum.
When inspecting the cells in the DOM via the browser's Dev Tools, could you check if perhaps there are some additional styles applied to them that may be displacing/hiding them from the grid container?
I’m looking forward to your reply.
Regards,
Maya Kirova
I'm unfamiliar with any styles applied that may be hiding the data from the grid. I'm attaching a couple of screen shots showing the DOM in the debugger. There are some classes at the tbody level but I don't see any styles applied.
Please let me know if you have additional questions or require additional information.
I am glad that you find Maya`s suggestion helpful.
Thank you for using Infragistics components.
Martin Dragnev,
Infragistics
Thank you for the information. I didn't have a lot of time yesterday to work on this. But this morning I finally got it to work. I had to add, in the head of the html:
<style>
div[style] {
overflow: visible !important;
}
</style>
before any other css files were included. The problem was that,
element.style {
overflow: hidden auto;
was defined for the div element in question. I searched through all the css and js files but could not find the offending "hidden" in any of them so still confused where it is coming from.
Thank you for your help with this,
Tom
Please refer to the following screenshot. Note that when using Chrome’s dev tools you can hover over the related elements in the DOM, which will highlight the related rendered element on the page.
In this way you can check where/if the row is displayed. On the right you will see a Styles section, which lists all styles affecting the selected DOM element. You can scroll through the list and check if perhaps there’s a custom style applied in your application that affects the element, perhaps overwriting and settings a different display/visibility/position for the rows/cells. You can also check the Computed section that lists all inherited styles that also affects the element.
You can also check if your application loads any custom styles sheets that may target table elements globally and hence overwrite the default styles.