gridview的固定头和全页面宽度的网格 [英] Gridview with fixed header and full page width grid

问题描述

我已经previously问的问题<一href=\"http://stackoverflow.com/questions/25178417/set-header-width-and-column-properly-during-freeze-the-header-in-gridview\">Set标题的宽度和列妥善期间冻结的GridView 头
通过使用这些解决方案，我发现了一些问题，解决所以我添加的设计itself.But还是我面临的问题都列在列具有大长度的文本。

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.

我想用这个给定的链接

它的工作原理，但问题是固定在GridView到全页面大小宽度。那是的GridView应该出现全屏幕在浏览器中。它正常工作，如果列的含量都很小。但是，如果一个列有大的长度值，然后将数据需要一个细胞内大约2或3行。在这种情况下，网格标题的宽度和列宽度不被相等地设定和看起来很奇怪。
我尝试使用HeaderStyle宽度和ItemStyle宽度与％vales.I没有改变任何东西的脚本。但它并没有帮助。
所以，我想通过指定HeaderStyle宽度和ItemStyle宽度为每列来解决这个问题。
然后，它工作正常。但在这里我面对的另一个问题。这是由于固定宽度的网格不会全屏显示。对于高分辨率显示网格显示屏幕只有约75％的宽度。

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.

推荐答案

如果你不介意使用一个小的jQuery插件，那么它可能节省您的时间。我知道我用用css前pression和我以前的项目之一JavaScript的解决方案，尝试了所有的建议赫然出现在互联网，但它总是以一种或另一种浏览器的休息时间和标题列宽和行列宽度没有动态数据长度一致。

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.

链接到GridViewScroll 演示做这件工作完美。

Link to GridViewScroll Demo that does this job perfect.

下面是我用它在我的应用程序，它完美的作品。请参考我的另一个<一个href=\"http://stackoverflow.com/questions/25438835/floating-gridview-header/25452213#25452213\">answer对因此对于类似的问题。

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.

这篇关于gridview的固定头和全页面宽度的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！