向 Kendo Grid 添加新行时文本空间不适合答案

【问题标题】：Text space doesn't fit when adding new row to Kendo Grid向 Kendo Grid 添加新行时文本空间不适合
【发布时间】：2018-03-31 13:10:14
【问题描述】：

当我使用 js（下面的部分代码）向剑道网格添加新行时，文本不适合该行，正如您在这张图片中看到的那样：print-screen-kendo-grid。

我该如何解决？

var dataSource = section.find(".k-grid").getKendoGrid().dataSource;
dataSource.add({
        Description: description.val(),
        StepTimer: timer
    });

谢谢。

编辑：我添加了更多信息

列的css规则

.recipe-steps-grid .step-description { 
    max-height: 60px; 
    overflow: hidden; 
    white-space: pre-wrap; 
    margin-top: 0; 
    margin-bottom: 0; 
    text-indent: 0; 
    text-align: left; 
    font-family: inherit; 
    font-size: inherit; 
    color: inherit; 
    border: none; 
    background-color: inherit; 
    padding: 0; 
}

.recipe-steps-grid .step-order-col, .recipe-steps-grid .step-description-col { 
    vertical-align: top; 
} 

.recipe-steps-grid tr.k-state-selected .step-order-col, .recipe-steps-grid tr.k-state-selected .step-description-col { 
    vertical-align: middle; 
}

.recipe-steps-grid {
    font-size: 13px;
    color: #342922;
    margin: 0 -30px;
}

.recipe-steps-grid .step-order-col {
    vertical-align: top;
    color: #9d9d9d;
    font-size: 11px;
}

.recipe-steps-grid .step-order-col,
.recipe-steps-grid .step-description-col {
    vertical-align: top;
}

.recipe-steps-grid tr.k-state-selected .step-order-col,
.recipe-steps-grid tr.k-state-selected .step-description-col {
    vertical-align: middle;
}

剑道网格：

 @(Html.Kendo().Grid<RecipeStepsViewModel>()
.Name(gridName)
.HtmlAttributes(new { @class = "recipe-steps-grid" })
  .Columns(columns =>
  {
      columns.Template(t => { }).ClientTemplate("#= generateHandleTemplate() #").HtmlAttributes(new { @class = "dummy-col" }).Width("30px");
      columns.Template(t => { }).ClientTemplate("STEP #= StepOrder #").HtmlAttributes(new { @class = "step-order-col" }).Width("50px");
      columns.Bound(p => p.Description).ClientTemplate("#= generateStepDescriptionTemplate(Description) #")
          .HtmlAttributes(new { @class = "step-description-col" }).Width("100%");
      columns.Bound(p => p.StepTimer).ClientTemplate("#= generateTimerTemplate(StepTimer) #").HtmlAttributes(new { @class = "right-cell" }).Width("80px");
      columns.Template(t => { }).ClientTemplate("#= generateDeleteTemplate(" + isLocked.ToString().ToLower() + ") #").HtmlAttributes(new { @class = "dummy-col" }).Width("30px");
  })
  .DataSource(dataSource => dataSource
      .Ajax()
      .Batch(true)
      .ServerOperation(false)
      .Read(read => read.Action("GetRecipeSteps", "RecipeSteps", new { sectionId = Model.Item1 }).Data("getLanguage"))
      .Create(create => create.Action("CreateRecipeStep", "RecipeSteps"))
      .Update(update => update.Action("UpdateRecipeStep", "RecipeSteps"))
      .Destroy(destroy => destroy.Action("DeleteRecipeStep", "RecipeSteps"))
      .Model(model =>
      {
          model.Id(a => a.Id);
          model.Field(a => a.Description).Editable(true);
          model.Field(a => a.StepTimer).Editable(true);
      })
  )
  .Events(e =>
  {
      e.Save("onStepSave");
      e.DataBound("onStepDatabound");
      e.Change("onStepRowSelection");
  })
  .Selectable(s => s.Mode(GridSelectionMode.Single))
  .Editable(editable => editable.Mode(GridEditMode.InCell)
      .CreateAt(GridInsertRowPosition.Bottom))
            )

            @(Html.Kendo().Sortable()
                .For("#" + gridName)
                .ConnectWith(".recipe-steps-grid")
                .Filter("table > tbody > tr:not(.k-grid-edit-row)")
                .Handler("table > tbody .drag-handle-icon")
                .Cursor("move")
                .Disabled(".no-drag")
                .HintHandler("noHint")
                .PlaceholderHandler("placeholder")
                .ContainerSelector(".section-container[data-type=recipe-steps]")
                .Events(events => events.Change("onStepSort"))
            )

            @{
                if (Model.Item3 && !Convert.ToBoolean(isLocked.ToString().ToLower()))
                {
                    <table class="add-recipe-step">
                        <colgroup>
                            <col class="add-colgroup" />
                            <col class="description-colgroup" />
                            <col class="timer-colgroup" />
                        </colgroup>
                        <tr>
                            <td class="centered-cell"><img class="add-btn" src='@Url.Content("~/Content/Images/grey-plus-thin.png")'></td>
                            <td>
                                <input class="input-box" type="text" placeholder='@Resources.placeholderNewRecipeStep' name="description" />
                            </td>
                            <td class="timer">
                                @(Html.Kendo().TimePicker()
                                    .Name("timer-" + guid)
                                    .HtmlAttributes(new { @class = "gl-timer" })
                                    .Format("mm:ss")
                                    .Interval(1)
                                    .Value("00:00:00")
                                    .Min("00:00:00")
                                    .Max("00:59:00")
                                )
                            </td>
                        </tr>
                    </table>
                }
            }

js:

function generateStepDescriptionTemplate(text) {
    var bold = /\*(.*?)\*/gm;
    var html = text.replace(bold, '<span class="emph-word">$1</span>');

    return "<pre class='step-description'>" + html + "</pre>";
}

在剑道网格之上，有一个名为“recipe-steps-section section”的 div 类。这个想法是在配方中添加一个步骤。 recipe-steps-grid 有 5 列：第一列是句柄，以便用户可以拖动步骤来更改其顺序。第二列是配方步骤顺序号，然后是配方步骤描述（这是我要增加文本空间的那个）。以下列是食谱步骤烹饪所需的时间。最后一列有删除这一步的选项。

剑道网格最后还有一个工具栏，用于添加带有步骤描述和步骤时间的新步骤（“add-recipe-step”类）。

【问题讨论】：

这似乎是一个 CSS 问题。你能提供你的代码吗？
@AnastasiosSelmanis 对于网格的列步骤描述，这是 css：.recipe-steps-grid .step-description { max-height: 60px; overflow: hidden; white-space: pre-wrap; margin-top: 0; margin-bottom: 0; text-indent: 0; text-align: left; font-family: inherit; font-size: inherit; color: inherit; border: none; background-color: inherit; padding: 0; }
还有这个：.recipe-steps-grid .step-order-col, .recipe-steps-grid .step-description-col { vertical-align: top; } .recipe-steps-grid tr.k-state-selected .step-order-col, .recipe-steps-grid tr.k-state-selected .step-description-col { vertical-align: middle; }
我给出了获得所需包装的方法的答案。现在看到你的 cmets 我看到你有溢出：隐藏和空白：预包装。这适用于有空格的普通文本。您的示例没有空格，这是您的实际问题。我不知道您的应用程序是否要处理此问题。 (w3schools.com/cssref/…)

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

【解决方案1】：

如果我理解正确，您需要溢出换行：为您的列换行

通常你可以把它插入你的页面

td {
    overflow-wrap: break-word;
}

一旦单词达到最大宽度，您的单词就会中断。当然，它会随心所欲地破坏这个词。这适用于您的示例，因为您不会在任何地方中断您的话。

overflow-normal 对于具有某些含义的单词会更好。欲了解更多信息，您可以查看this

【讨论】：

它不起作用，我认为这是因为 Kendo Grid 中的某些特定内容。不过还是谢谢你的建议
你能提供你的网格吗？如果您不介意尝试使用我建议的答案删除溢出：隐藏和空白预包装并试一试。
当我这样做时，它看起来像这样：i.stack.imgur.com/FXNSc.png我希望文本垂直而不是水平适合:) 我已经编辑了我的初始帖子以包含网格

【解决方案2】：

我找到了解决方案。问题是上课前的这个“预”：

 return "<pre class='step-description'>" + html + "</pre>";

根据https://www.w3schools.com/tags/tag_pre.asp：

"标签定义了预格式化的文本。元素中的文本以固定宽度字体（通常是 Courier）显示，并且保留空格和换行符。元素中的文本以固定宽度字体（通常是 Courier）显示，并且保留空格和行休息。”

所以当我删除它时，它会停止切割剑道网格中较大行的文本

【讨论】：