Question

我在C＃中使用带有Razor和Telerik Grid控件的MVC-3设计模式。所有伟大的人都会对一个小问题感到不满，这会阻止我们发布产品。

我们只使用标准的telerik样式，因此没有自定义CSS。但是，正如预期的那样，它们看起来都很不错......直到你向右水平滚动。

滚动前： enter image description here

滚动后： enter image description here

telerik控件本身实际上似乎不支持水平滚动，所以我们在它周围弹出一个div标签并在其上设置滚动条。即使使用Telerik窗口控件也会发生同样的事情。 Telerik确实支持垂直滚动，并设置.Scrollable（）激活它。有没有办法说出类似.Scrollable（＆＃34; Horizontal＆＃34;）等等。

根据我的猜测，它似乎与页眉和页脚不扩展以包含所有列有关。有什么方法可以解决它。我在最后一天左右尝试了一下telerik样式表和JQuery，但无济于事。

提前感谢您提供的任何帮助。

编辑1：正如下面的答案中指出的那样，我应该将.Width（xxx）添加到每一列，它将起作用。我以前做过这个，但它没有用。对于此之前暂不说的道歉。

编辑2：所要求的代码：

<div id="ListContent">
    @{
        Html.Telerik()
            .Grid<YeatsClinical.PatientPortal.Web.ViewModels.PatientEducation>("PatientEducations")
            .Name("grid")
            .DataKeys(k => k.Add(o => o.MrPatientEducationId))

            .Columns(c =>
                {
                    c.Bound(o => o.MrPatientEducationId).ReadOnly().Width(100);
                    c.Command(s =>
                    {
                        s.Select();
                    }).Width(100);
                    c.Bound(o => o.PatientId).Visible(false).Width(100);
                    c.Bound(o => o.MrPatientEncounterId).Visible(false).Width(100);
                    c.Bound(o => o.MrPatientEducationResourceId).Visible(false).Width(100);
                    c.Bound(o => o.GivenAsPrint).Width(100);
                    c.Bound(o => o.DatePrinted).Width(100);
                    c.Bound(o => o.SentViaEmail).Width(100);
                    c.Bound(o => o.DocumentTitle).Width(100);
                    // image is temporary disabled because its causing huge lag spikes and very long database retrievals
                    c.Bound(o => o.File).Visible(false).Width(100);
                    c.Bound(o => o.DateCreated).Width(100);
                    c.Bound(o => o.CreatedByUserId).Visible(false).Width(100);
                    c.Bound(o => o.DateLastUpdated).Width(100);
                    c.Bound(o => o.LastUpdatedByUserId).Visible(false).Width(100);
                })
            .Pageable()
            .Sortable()
            .Filterable()
            .Groupable()
            .Render();
    }
</div>

上面的外部div是用蓝色滚动条设置的那个。

Answer 1

首先，感谢Jeff和Pollirrata，他们都帮助找到了问题的部分答案。然而，经过一番研究后，我在其他地方找到了答案。但我决定在这里发布一个链接，供其他可能遇到同样问题的人使用。

在阅读pollirrata指出的telerik手册时，我需要将.Width添加到所有列（步骤1），然后添加Scrollable（）（步骤2）< / strong>即可。虽然之前我确实这样做过，但由于下面解释的原因，它没有用，但是由于需要这样做，所以给pollirata提供了有用的答案+1。

还要感谢杰夫在他的评论中同样提出建议的帮助，我不能给出答案，因为我已经采取了.Pageable远离它并没有任何区别，正如所解释的那样，当我在他发布时添加代码时，我得到了一个执行。但是，不幸的是，我可以给评论+1，而他的评论是正确的，他提供的答案不是。）

自从我开始发帖以来，我遇到了this link并注意到我使用的jQuery版本是1.5而Telerik需要V1.7.1。我已经更新了我的版本，这部分帮助解决了问题（第3步）。我还检查并仔细检查了链接引用的所有其他依赖项，并且所有这些依赖项都是必需的。但是，我确实注意到其中一个次要依赖缺失了。在我的情况下，我的网格需要DatePicker - 我有，但DatePicker需要Calender - 我没有（必须偶然删除它）（步骤4）。我还确保我在整个项目中使用.Compressed（）和.Combined（）方法在第二个链接中使用了正确的参考。在最后一步之后，一切顺利（步骤5）。

感谢大家的帮助和指导。

Answer 2

Telerik MVC Grid支持水平滚动。只需设置所有列的宽度，然后将。Scrollable()添加到网格中即可。

Answer 3

请使用以下技巧

<div class="DataGridXScroll">
    @(Html.Telerik().Grid(Model)
    .Name("grvSalesSummary")
    .DataKeys(keys => keys.Add(k => k.Unit_Code))
    .Columns(column =>
    {
        column.Bound(s => s.Zone_Name).Width(100).HtmlAttributes(new { @class = "GridColumnLeftAlign" }).Hidden(true)
            .GroupHeaderTemplate(@<text>Zone: @item.Key</text>);
        column.Bound(s => s.Region_Name).Width(100).HtmlAttributes(new { @class = "GridColumnLeftAlign" }).Hidden(true)
            .GroupHeaderTemplate(@<text>Region: @item.Key</text>);
        column.Bound(s => s.Unit_Code).Width(100).HtmlAttributes(new { @class = "GridColumnLeftAlign" });
        column.Bound(s => s.Unit_Name).Width(150).HtmlAttributes(new { @class = "GridColumnLeftAlign" });

        column.Bound(s => s.TotalCustomer).Width(70).HtmlAttributes(new { @class = "GridColumnRightAlign" })
             .Aggregate(aggreages => aggreages.Sum())
                .Format("{0:N}")
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)
                .GroupFooterTemplate(@<text>@item.Sum.Format("{0:N}")</text>);

        column.Bound(s => s.TotalActiveCustomer).Width(70).HtmlAttributes(new { @class = "GridColumnRightAlign" })
             .Aggregate(aggreages => aggreages.Sum())
                .Format("{0:N}")
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)
                .GroupFooterTemplate(@<text>@item.Sum.Format("{0:N}")</text>);

        column.Bound(s => s.NoOfSalesInCurrentMonth).Width(70).HtmlAttributes(new { @class = "GridColumnRightAlign" })
             .Aggregate(aggreages => aggreages.Sum())
                .Format("{0:N}")
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)
                .GroupFooterTemplate(@<text>@item.Sum.Format("{0:N}")</text>);

        column.Bound(s => s.TotalRecoveredWithoutDP).Width(100).HtmlAttributes(new { @class = "GridColumnRightAlign" })
             .Aggregate(aggreages => aggreages.Sum())
                .Format("{0:N}")
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)
                .GroupFooterTemplate(@<text>@item.Sum.Format("{0:N}")</text>);

        column.Bound(s => s.CollectionInCurrentMonth).Width(100).HtmlAttributes(new { @class = "GridColumnRightAlign" })
             .Aggregate(aggreages => aggreages.Sum())
                .Format("{0:N}")
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)
                .GroupFooterTemplate(@<text>@item.Sum.Format("{0:N}")</text>);

        column.Bound(s => s.TotalOverdue).Width(70).HtmlAttributes(new { @class = "GridColumnRightAlign" })
             .Aggregate(aggreages => aggreages.Sum())
                .Format("{0:N}")
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)
                .GroupFooterTemplate(@<text>@item.Sum.Format("{0:N}")</text>);

        column.Bound(s => s.TotalAdvance).Width(70).HtmlAttributes(new { @class = "GridColumnRightAlign" }) .Aggregate(aggreages => aggreages.Sum())
                .Format("{0:N}")
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)
                .GroupFooterTemplate(@<text>@item.Sum.Format("{0:N}")</text>);

        column.Bound(s => s.TotalOutstanding).Width(80).HtmlAttributes(new { @class = "GridColumnRightAlign" })
             .Aggregate(aggreages => aggreages.Sum())
                .Format("{0:N}")
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)
                .GroupFooterTemplate(@<text>@item.Sum.Format("{0:N}")</text>);

        column.Template(@<a href="http://172.25.40.50/MonthlyEntrySales/SalesReports.aspx?lc=@item.Unit_Code" target="_blank">Show</a>).Width(50);

        column.Bound(s => s.FinalizedByRM).Format("{0:dd-MMM-yyyy}").Width(90).HtmlAttributes(new { @class = "GridColumnLeftAlign" });
        column.Bound(s => s.FinalizedByZM).Format("{0:dd-MMM-yyyy}").Width(90).HtmlAttributes(new { @class = "GridColumnLeftAlign" });
        column.Bound(s => s.FinalizedByHO).Format("{0:dd-MMM-yyyy}").Width(90).HtmlAttributes(new { @class = "GridColumnLeftAlign" });

        column.Template(@<a href="#" onclick="return SaveSalesStatus('@item.Unit_Code','@item.FinalizedByRM','@item.FinalizedByZM','@item.FinalizedByHO');">Save</a>).Width(50);
    })
    .Selectable()
    .Scrollable(scroll => scroll.Height(300))
    .Groupable(settings => settings.Groups(group =>
    {
        group.Add(g => g.Zone_Name);
        group.Add(g => g.Region_Name);

    }).Visible(false))
    )
</div>

添加以下CSS

.DataGridXScroll
{
    width: 1000px;
    overflow-x: scroll;
    text-align: left;
}

在水平滚动时，Telerik Grid没有正确设置样式

3 个答案: