C# 水平滚动时Telerik网格未正确设置样式

我在C#中使用MVC-3设计模式，带有Razor和Telerik网格控件。所有这些都是因为一个小问题而导致的，这将阻止我们发布产品

我们只是使用标准的telerik样式，因此没有定制CSS。然而，正如所料，这一切看起来相当不错，直到。。。您可以水平向右滚动

滚动前：

滚动后：

telerik控件本身似乎并不支持水平滚动，所以我们在它周围弹出了一个div标签，并在上面设置了滚动条。即使使用Telerik窗口控件，同样的事情也会发生。Telerik支持垂直滚动，设置.Scrollable（）会激活垂直滚动。有没有一种方式可以说像.Scrollable（“水平”）之类的东西

据我猜测，这似乎与页眉和页脚没有扩展到包含所有列有关。我有什么办法可以修吗。在过去的一天左右，我试着在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>

@{
Html.Telerik（）
.Grid（“耐心教育”）
.名称（“网格”）
.DataKeys（k=>k.Add（o=>o.MrPatientEducationId））
.列（c=>
{
c、 绑定（o=>o.MrPatientEducationId.ReadOnly（）.Width（100）；
c、 命令（s=>
{
s、 选择（）；
}).宽度（100）；
c、 绑定（o=>o.tid）。可见（假）。宽度（100）；
c、 绑定（o=>o.mrPatientCounterId）。可见（false）。宽度（100）；
c、 绑定（o=>o.MrPatientEducationResourceId）。可见（false）。宽度（100）；
c、 边界（o=>o.GivenAsPrint）。宽度（100）；
c、 装订（o=>o.DatePrinted）。宽度（100）；
c、 边界（o=>o.SentViaEmail）。宽度（100）；
c、 绑定（o=>o.DocumentTitle）。宽度（100）；
//映像被临时禁用，因为它会导致巨大的延迟峰值和很长的数据库检索时间
c、 绑定（o=>o.File）.Visible（false）.Width（100）；
c、 绑定（o=>o.DateCreated）.Width（100）；
c、 绑定（o=>o.CreatedByUserId）.Visible（false）.Width（100）；
c、 绑定（o=>o.DateLastUpdated）.Width（100）；
c、 绑定（o=>o.LastUpdatedByUserId）.Visible（false）.Width（100）；
})
.Pageable（）
.Sortable（）
.可过滤（）
.Groupable（）
.Render（）；
}

---

上面的外部div是一个带有蓝色滚动条的div。

Telerik MVC网格支持水平滚动。只需设置所有列的宽度，然后将.

Scrollable（）

添加到网格中，就这样了

首先要感谢Jeff和Pollirrata，他们都帮助找到了问题的部分答案。然而，经过更多的研究，我在别处找到了答案。但是我决定在这里为其他可能有同样问题的人发布一个链接

在阅读pollirrata指出的telerik手册时，我确实需要为所有列添加.Width（步骤1），并添加Scrollable（）（步骤2）。虽然我以前确实这样做过，但由于下面解释的原因，它不起作用，但是+1感谢pollirata的帮助回答，因为这需要完成

同样感谢Jeff，他在评论中提出了同样的建议，提供了帮助。我不能像我所得到的那样+1答案。可以分页，这没有什么区别，正如解释的那样，当我在他发布时添加代码时，我得到了一个执行选项。然而，我可以+1的评论，不幸的是，虽然他的评论是正确的，但他提供的答案是不正确的）

自从我开始写这篇文章后，我发现我使用的jQuery版本是1.5，Telerik需要1.7.1。我已经更新了我的版本，这部分帮助解决了问题（步骤3）。我还检查并再次检查了链接引用的其他依赖项，并使它们都符合要求。然而，我确实注意到其中一个次级依赖项缺失。在我的例子中，我的网格需要DatePicker——我有，但DatePicker需要Calendar——我没有（一定是意外删除了它）（步骤4）。我还确保在整个项目中使用.Compressed（）和.Combined（）方法时有正确的参考资料，如第二个链接中所述。在这最后一步之后，一切都顺利（步骤5）

---

感谢大家在这方面的帮助和指导。

请使用以下技巧

<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>

---

为什么人们甚至在评论中都没有解释他们的原因或提出如何改进的建议就把问题记下来了。你能发布你的网格代码（html.Telerik的东西）吗？当你在底部的方法字符串中添加.Scrollable（）时会发生什么？您在另一条评论中提到您尝试了它，但没有效果，但是您是否得到了一个错误，或者网格根本没有随着添加而改变？我得到了一个垂直的滚动条，但没有水平的滚动条。对不起，我当时很困惑。我的一个项目中有很多telerik网格，只要设置了列宽，它们都可以毫无问题地滚动horz和vert。否则，柱将塌陷到可用空间中。有时候telerik很挑剔，很难调试（如果不是不可能的话）。过去帮助我的一件事是将控制权减到最低限度。然后一次添加一件东西，尝试查看它在哪里中断或冲突。对不起，我帮不上忙了，很好，我

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