css - KendoUI Column Center 自定义MVC扩展方法

标签 css kendo-ui kendo-grid extension-methods kendo-asp.net-mvc

我正在寻找一种为 KendoUI 列创建自定义扩展方法的方法,这样我就可以使用扩展方法轻松地将 css 类添加到标题或单元格本身。

现在我正在使用以下内容将标题和单元格的内容居中:

columns.Bound(x => x.Value).HeaderHtmlAttributes(new { @class = "cent" }).HtmlAttributes(new { @class = "cent" });

cent css 类在哪里:

.cent { text-align:center; }

对我来说,对于这么简单的事情来说,这似乎需要编写大量代码。

我正在寻找的是一个创建自定义列生成器扩展方法的解决方案,我可以在其中执行如下操作:

columns.Bound(x => x.Value).CenterHeader().CenterCell();

其中 CenterHeader() 和 CenterCell() 将是自定义扩展方法,分别将此 css 类添加到标题和单元格。在我看来,如果这是可能的话,代码看起来会干净得多。

有人知道如何做到这一点吗?

最佳答案

为什么不直接创建这些扩展呢?

using Kendo.Mvc.UI.Fluent;

namespace MyNamespace
{
    public static class MyExtensions
    {
        public static GridTemplateColumnBuilder<T> CenterHeader<T>(this GridTemplateColumnBuilder<T> builder) where T : class
        {
            return builder.HeaderHtmlAttributes(new { @class = "cent" });
        }

        .....
    }
}

并在 Views/web.config 中添加此命名空间(这样您就不必一直导入它):

<system.web.webPages.razor>
  <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
  <pages pageBaseType="System.Web.Mvc.WebViewPage">
    <namespaces>
      ......
      <add namespace="Kendo.Mvc.UI"/>
      <add namespace="MyNamespace"/>
      ......
    </namespaces>
  </pages>
</system.web.webPages.razor>

关于css - KendoUI Column Center 自定义MVC扩展方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25393692/

相关文章:

javascript - 选择 Kendo Grid 行时获取特定列

kendo-ui - 在 Kendo Grid 中单击鼠标右键获取选定的行

html - 如何在css中的两行相同文本之间提供一些空间

html - 如何使双列表响应第二列在第一列之下?

kendo-ui - Kendo UI DropDownList 作为带有复选框的多选

javascript - 如何将 <label> 和普通文本与 Kendo UI 对齐?

kendo-grid - Kendo UI Grid 获取行值

CSS-强制单词换行而不是断字

html - 停止侧边栏在 y 轴上滚动

jquery - 关闭/打开 Kendo UI 网格可编辑模式