Hi,
I'm using version 14.1.20141.2392 for webdatagrid and facing some issue about the width and header of webdatagrid.
When I set the width of the webdatagrid to 100%, the header of the webdatagrid will expand out, please see the second pic in the attachment.
If I removed the width="100%", under higher resolution there is no problem. But under lower resolution, the whole datagrid will go outside of the panel. Please see the first pic in the attachment.
Could you please advise how to fix this issue? If have to set the width="100%", how to make header not expand out?
Thanks,
Bill
Hello,
Thank you for contacting us!
Providing more information will be highly appreciated, for example with which browser this behavior is happening, when exactly (for example after you have upgraded you product with the current service release 2392), do you have some custom styles applied to your page.
Or you can just send to me isolated sample that is showing the issue.
Looking forward to hearing from you.
I uploaded example site code.
There are two webdatagrid, the first one represent the example when columns' total width is bigger than updatepanel, if no width="100%" is set, webdatagrid will go outside of the panel. If set the width="100%" it will be fine BUT for the same webdatagrid if under higher resolution screen the columns' total width will be smaller than the updatepanel, then the header will go outside of the webdatagrid as the second webdatagrid shown.
So my dilemma is with same webdatagrid:
If put width="100%", for the user with higher resolution, the header will go outside of the webdatagrid.
If not put width="100%", for the user with lower resolution, the webdatagrid will go outside of the updatepanel.
Could you please advise how to make the user with higher resolution and lower resolution both work? Maybe some setting needs to be set in ig_res?
By the way, I use IE11.
Thanks.
Thank you for the provided sample.
As I see it is not exactly related to the images that you shared with me with your first reply. The styles are different and with IE 11, I am not able to reproduce the issue (have a look at the attached image).
Could you please let me know what is your exact version of IE?
Possible solution would be exactly your assumption, just check if some classes or styles are missing. For example use our Default theme and check if the issue is appearing then. Compare the two styles which are applied to the header.
I created a dummy sample in the previous thread and it did reproduce the issue according to your image attached.
The style I used is in the ig_res folder. I don't know why your webdatagrid's body's background is lightgray but you can still see the first webdatagrid goes outside of the updatepanel.
If you change the background of the webdatagrid on your side to a different color with header's you will see the issue clearer.
The attachment is what I see on my side.
Please advise how to fix the issue.
Hello Bill,
I will try to summarize my thoughts on this. If Columns width is set (as it is in your scenario) it is expected the boundaries of the WebDataGrid to go outside of the bordered div, since the sum of them is bigger than the div. Yes, in order to overcome this, you should set WebDataGrid width, and then the scrollbar will appear. When I set it to be "100%" the scrollbar appear and the columns that exceed the WebDataGrid width are hidden (as you can see from the attached image). The problem is that I don't see the behavior that you've described.
So could you please share with me your exact product version and the browser that you use in order to invoke the issue. I have tested it with Chrome, FF and IE and everything is working fine.
Don't know what styleset you used in my example. The problem is the background color of the header fills the whole width of the webdatagrid while the body is not. You can see it when the background color is different in header and body as I showed in the image in previous thread.
Good news is I finally figured out where the issue is and fixed it.
The background color should not be set in
.igg_TedGridHeader {
}
It should be set in
.igg_TedGridHeaderCaption {
Anyway, Thanks for your help.