Question

当我使用js（下面的部分代码）向kendo网格添加新行时，文本不适合行内部，如图所示：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;
}

Kendo Grid：

 @(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>";
}

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

剑道网格最后还有一个工具栏，用步骤描述和步骤时间添加一个新步骤（＆＃34; add-recipe-step＆＃34; class）。

Answer 1

如果我理解正确你想要溢出包装：你的列的破解词

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

td {
    overflow-wrap: break-word;
}

一旦单词达到最大宽度，你的单词就会中断。对于cource来说，它会在任何地方打破这个词。这适用于您的示例，因为您不会破坏您的单词。

对于具有某些含义的单词，

overflow-normal会更好。有关详细信息，请查看this

Answer 2

我找到了解决方案。问题是这个＆＃34; pre＆＃34;上课前：

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

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

＆＃34;标签定义了预先格式化的文本。元素中的文本以固定宽度字体（通常为Courier）显示，并保留空格和换行符。元素中的文本以固定宽度字体（通常为Courier）显示，并保留空格和行符＆＃34;

因此，当我删除它时，它停止在kendo网格中删除较大行的文本

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

2 个答案: