Kendo Grid MVC Multiline 中的列答案

【问题标题】：Columns in Kendo Grid MVC MultilineKendo Grid MVC Multiline 中的列
【发布时间】：2014-10-06 08:45:00
【问题描述】：

我有这样的剑道网格 MVC：

@(Html.NFSGrid<dynamic>("PortfolioGrid")
      .Name("PortfolioGrid")
      .EnableCustomBinding(true)
      //.Selectable()
      .BindTo(Model)
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(countpaging)
          .Model(m =>
          {

              foreach (var Allcoulms in (List<HtmlHelperGridBuilder.GridCol>)ViewData["ViewDataGridfildes"])
              {
                  if (Allcoulms.ColumnName == "Id")
                  {
                      m.Id(Allcoulms.ColumnName);
                  }
                  else
                  {
                      m.Field(Allcoulms.ColumnName, Type.GetType("System.String")).Editable(true);
                  }

              }

          })

          .ServerOperation(true)

          .Read(read => read.Action("Read", "Portfolio").Data("portFolioNameSpace.additionalInfo")
          )
      )
      .HtmlAttributes(new { style = "width:2000;" })
      .Columns(columns =>
      {


          columns.Template(p => { }).ClientTemplate("<input name='selectedIds' type='checkbox' value=\"#=Id#\" class='check_row' onchange='portFolioNameSpace.changeChk(event,this.checked,this);'/>")
              .HeaderTemplate("<div  style='background=#C7CA21 ;width= 40%'><input type='checkbox' style='outline: 2px solid #cfbe62' class='selectAll' onclick='portFolioNameSpace.buttonclick(event)'/></div>")
              .HeaderHtmlAttributes(new { style = "text-align:center;" })
              .Width(30);

          columns.Template(@<text></text>).Title(T("روند").ToString()).Width(30).ClientTemplate("<a onclick='portFolioNameSpace.onclickFlowFPortfolio(event)'><i class='iconmain-showall'></i></a>");
          columns.Template(@<text></text>).Title(T("اصل سند").ToString()).Width(50).ClientTemplate("<a onclick='portFolioNameSpace.GetFormData(event)'><i class='iconmain-Accepted'></i></a>");
          foreach (var Allcoulms in (List<HtmlHelperGridBuilder.GridCol>)ViewData["ViewDataGridfildes"])
          {
              if (Allcoulms.ColumnName == "Id")
              {
                  columns.Bound(Allcoulms.ColumnName).Visible(false);
              }
              else if (Allcoulms.ColumnName == "Subject")
              {
                  columns.Bound(Allcoulms.ColumnName).Width(Allcoulms.ColumnWidth).Title(T(Allcoulms.ColumnTitle).ToString()).HtmlAttributes(new { style = "text-align:center;" });
              }
              else if (Allcoulms.ColumnName == "Comment")
              {
                  columns.Bound(Allcoulms.ColumnName).Width(200).Title(T(Allcoulms.ColumnTitle).ToString()).HtmlAttributes(new { style = "text-align:center;" }).ClientTemplate("<input type=\"text\" id=\"#=Id#\" value=\"#=Comment#\"/>");
              }
              else if (Allcoulms.ColumnName == "notViewdRows")
              {

              }
              else
              {
                  columns.Bound(Allcoulms.ColumnName).Width(Allcoulms.ColumnWidth).Title(T(Allcoulms.ColumnTitle).ToString()).HtmlAttributes(new { style = "text-align:center;" }).HeaderHtmlAttributes(new { style = "text-align:center;" });
              }
          }



      })


              .Pageable(pager => pager.Enabled(true))
              .Scrollable()
              .Filterable()
               .Resizable(resize => resize.Columns((true)))
              .Reorderable(reorder => reorder.Columns(true))

              .Events(e => e
                          .DataBound("portFolioNameSpace.gridDataBound")
              )


)

所以问题是当一个 coulmn 的长度超过我设置的宽度时，它会像这张图片一样变成 2line，那么我怎样才能在不设置特定宽度的情况下使它成为 1ine？

【问题讨论】：

标签： asp.net-mvc kendo-grid kendo-asp.net-mvc

【解决方案1】：

将 CSS 属性 overflow: hidden; white-space: nowrap; 添加到列定义中，如下所示：

columns.Bound(Allcoulms.ColumnName).Width(Allcoulms.ColumnWidth).Title(T(Allcoulms.ColumnTitle).ToString()).HtmlAttributes(new { style = "text-align:center; overflow: hidden; white-space: nowrap;" }).HeaderHtmlAttributes(new { style = "text-align:center;" });

我测试过，它有效，看看它是否也适合你。

编辑

由于您使用的是列模板，因此您还可以选择将 CSS 属性直接添加到您的 CSS 文件中，甚至是内联（尽管后者不是一个好的做法）

【讨论】：