3

我在 C# 中使用带有 Razor 和 Telerik Grid 控件的 MVC-3 设计模式。除了一个会阻止我们发布产品的小问题之外，一切都很好。

我们只是使用标准的 Telerik 样式，所以没有自定义 CSS。然而，正如预期的那样，这一切看起来都很好，直到……您向右水平滚动。

滚动前： 在此处输入图像描述

滚动后： 在此处输入图像描述

Telerik 控件本身实际上似乎不支持水平滚动，因此我们在其周围弹出了一个 div 标签并在其上设置了滚动条。即使使用 Telerik 窗口控件也会发生同样的事情。Telerik 确实支持垂直滚动，并且设置 .Scrollable() 会激活它。有没有办法说 .Scrollable("Horizo​​ntal") 之类的东西。

根据我的猜测，这似乎与页眉和页脚没有扩展到包含所有列有关。有什么办法可以修复它。在过去的一天左右，我尝试过在 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 是带有蓝色滚动条的样式。

4

3 回答 3

3

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

在阅读 pollirrata 指出的 Telerik 手册时，我确实需要将 .Width 添加到所有列（步骤 1）并添加 Scrollable() （步骤 2）。虽然我之前这样做过，但由于下面解释的原因，它没有工作，但是 +1 给 pollirata 的有用答案，因为这需要完成。

还要感谢 Jeff 通过在他的评论中提出同样的建议来提供帮助，我无法 +1 答案，因为我已经拿走了 .Pageable 并且它没有任何区别，并且正如解释的那样，当我在他发布时添加代码时，我得到了一个 execption . 但是，不幸的是，我可以对评论 +1，虽然他的评论是正确的，但他提供的答案却不是）。

自从我开始这篇文章以来，我发现了这个链接，并注意到我使用的 jQuery 版本是 1.5，而 Telerik 需要 V1.7.1。我已经更新了我的版本，这部分地帮助解决了问题（第 3 步）。我还检查并仔细检查了链接引用的其他依赖项，并且所有这些依赖项都符合要求。但是，我确实注意到其中一个子依赖项丢失了。就我而言，我的网格需要 DatePicker - 我有，但 DatePicker 需要 Calender - 我没有（一定是意外删除了它）（第 4 步）。我还确保我在整个项目中使用 .Compressed() 和 .Combined() 方法的正确参考，如第二个链接中的参考。在这最后一步之后，一切顺利（步骤 5）。

感谢大家对此的帮助和指导。

于 2012-07-06T19:10:23.187 回答
1

Telerik MVC Grid 确实支持水平滚动。只需设置所有列的宽度并添加 . Scrollable()到网格，就是这样

于 2012-07-06T16:08:05.607 回答
0

请使用以下技术

<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;
}
于 2012-07-31T05:21:50.760 回答