Kendo Grid MVC Multiline中的列

Question

我有这样的kendo grid 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的长度超过我在宽度设置的长度时它会像这张图片一样2行，所以如何在不设置特定宽度的情况下使其成为1？

Answer 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属性，甚至可以内联（尽管后者不是一个好习惯）