Columns in Kendo Grid MVC Multiline

Question

I have kendo grid MVC like this:

@(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")
              )


)

so the problem is when the lengh of a coulmn is more than what i set in width it makes 2line like this picture so how can i make it 1ine without set specific width?

Answer 1

Add the CSS attributes overflow: hidden; white-space: nowrap; to the column definition, something like this:

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;" });

I tested and it works, see if it works for you too.

EDIT

Since you're using column templates, you also have the option of adding the CSS properties directly in your CSS file or even inline (although the latter isn't a good practice)