2

I had previously asked question Set header width and column properly during freeze the header in gridview By using those solution I found some problem with resolution So I added all columns in design itself.But still I am facing problem when columns have large length text.

I am trying to freeze the header of Gridview by using code given in this link

It works but the problem is fixing the Gridview to full page size width. That is Gridview should appear full screen in the browser. It works properly if a content of column are small. But if a column has large length value then the data require about 2 or 3 lines inside a cell . In this case grid header width and columns width not being set equally and looks odd. I tried using HeaderStyle-Width and ItemStyle-Width with % vales.I didn't change anything in script. But it didn't help. So i tried to fix this by specifying HeaderStyle-Width and ItemStyle-Width for each column. Then it works fine. But here I face another problem . That is due to fixed width the grid will not display full screen. For a high resolution display grid shows only about 75% width of screen.

So how can it be fixed. I want grid to be appear full screen and columns and header should be aligned properly.

Community
  • 1
  • 1
IT researcher
  • 3,274
  • 17
  • 79
  • 143

1 Answers1

3

If you don't mind using a little jquery plugin then it might save your time. I know I used to try out all the recommendations out there in internet using css expression and javascript solutions for one of my earlier projects but it always breaks in one or the other browsers and the header column width and row column width may not align for dynamic data length.

Link to GridViewScroll Demo that does this job perfect.

Here is how I used it in my application and it works flawlessly. Refer my another answer on SO for the similar problem. 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="gridviewScroll.min.js"></script>
<link href="GridviewScroll.css" rel="stylesheet" />

function pageLoad(sender, args) {
   gridviewScroll ();
}

function gridviewScroll() {
   gridView1 = $('#GridView1').gridviewScroll({
        width: 915,
        height: 449,
        railcolor: "#F0F0F0",
        barcolor: "#CDCDCD",
        barhovercolor: "#606060",
        bgcolor: "#F0F0F0",
        freezesize: 5,
        arrowsize: 30,
        varrowtopimg: "../../../images/arrowvt.png",
        varrowbottomimg: "../../../images/arrowvb.png",
        harrowleftimg: "../../../images/arrowhl.png",
        harrowrightimg: "../../../images/arrowhr.png",
        headerrowcount: 1,
        onScrollVertical: function (delta) {
         // store the scroll offset outside of this function in a hidden field and restore if you want to maintain vertical scroll position
        },
        onScrollHorizontal: function (delta) {
          //store the scroll offset outside of this function in a hidden field and restore if you want to maintain horizontal scroll position
        }
    });
}

And the screen print on how the frozen grid header looks in my application. You can event freeze certain columns of the grid if you have a lengthy row data. From the image the columns that are grayed out are the ones being frozen in my application.

enter image description here

Community
  • 1
  • 1
Dennis R
  • 3,195
  • 1
  • 19
  • 24
  • But i want grid appear in full screen width. How it can be achieved? Also i don't want horizontal scroll bar.The column should be fixed within the screen width. If text length large in column it should take 2 or 3 more lines(wrap) but should not increase the column width and make horizontal scroll bar to appear. I am not able to do this using your solution. In my case most of the column values vary in length. – IT researcher Aug 26 '14 at 05:01
  • @IT researcher, if you want a full screen then don't specify the value for width parameter as shown in the js or give a greater no. You can control the style and specify width for each individual template field in gridview. I'm sure you can tweak this to fit your situation. You can prevent horizondal scrolling if your grid's width is less than the size of the page. – Dennis R Aug 26 '14 at 06:34
  • if width not specified then column and header does not align properly due to large length text. – IT researcher Aug 26 '14 at 07:04
  • Thank you.I was able to do it . By modifying "Cell Wrap" logic u mentioned in the link and then I used window.width and set the grid width. Then for some column I used fixed width using itemstyle-width and headerstyle-width, where I know that there will be fixed length strings. For other column I didn't specify width and it would display properly in all resolutions. But $(window).height() does not work good . If i set grid height to window.height then i get page scroll bar. I have a text label in that page so i used 'window.height-height of that label' But still it gives problem. Any idea? – IT researcher Aug 26 '14 at 10:54
  • @ITresearcher, You'll get a vertical scroll only if the data you bind to the grid exceeds the the height you set if for the grid. Something is wrong in your case. Try the other way `window.height+height of that label` or give some greater absolute no for the `height` property until you don't get the scroll. You may need to post your code so I can suggest possible solution. – Dennis R Aug 26 '14 at 16:48
  • Yes. I want to determine the proper height i need to specify for the grid.If data rows are more then it should give scroll bar for the grid and it works. But in case if i set grid height to a height more than window height then i will get scrol bar for the page ,not grid. Which is also proper. But i want to know how i can set proper height of the grid so that page scroll does not appear and grid scroll appears when required. Now i used window.height-100 and it worked in all resolution. I was expecting that "window.height- height of lablel" is the accurate method .But its not worked properly. – IT researcher Aug 27 '14 at 08:17
  • This didn't completely work for me without some hidden fields and additional lines of code inside of .gridviewScroll({: startVertical: $("#<%=hdn_gridActionItems_vPos.ClientID%>").val(), startHorizontal: $("#<%=hdn_gridActionItems_hPos.ClientID%>").val(), onScrollVertical: function (delta) { $("#<%=hdn_gridActionItems_vPos.ClientID%>").val(delta); }, onScrollHorizontal: function (delta) { $("#<%=hdn_gridActionItems_hPos.ClientID%>").val(delta); } – Taylor Brown Jan 03 '20 at 16:49