L'espace de texte ne tient pas lors de l'ajout d'une nouvelle ligne à la grille de Kendo

Question

Lorsque j'ajoute une nouvelle ligne à une grille de kendo en utilisant js (code partiel ci-dessous), le texte ne rentre pas dans la ligne, comme vous pouvez le voir image: .

Comment puis-je le résoudre?

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

Merci.

EDIT: Je ajouté plus d'informations

règles pour les colonnes 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 Grille:

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

Au-dessus de la grille de kendo, il existe une classe div appelée "section recipe-steps-section". L'idée est d'ajouter une étape à une recette. Le recipe-steps-grid a 5 colonnes: la première est la poignée de sorte que l'utilisateur peut faire glisser l'étape pour changer son ordre. La deuxième colonne est le numéro de commande de l'étape de recette, suivie de la description de l'étape de recette (c'est celle que je veux augmenter l'espace de texte). La colonne suivante indique le temps nécessaire pour cuisiner. La dernière colonne a la possibilité de supprimer cette étape. La grille de kendo dispose également d'une barre d'outils à la fin pour ajouter une nouvelle étape avec la description de l'étape et le temps de l'étape (classe "add-recipe-step").

Answer 1

Si je comprends bien, vous voulez trop-plein-wrap: mot de rupture pour vos colonnes

En général, vous pouvez simplement insérer ce à votre page

td { 
    overflow-wrap: break-word; 
} 

et votre mot casserez une fois que le mot arrive à la largeur maximale. De courtce il va casser le mot où il veut. Cela fonctionne pour votre exemple car vous ne cassez pas vos mots.

débordement normal fonctionnerait mieux pour les mots ayant une certaine signification. Pour plus d'informations, vous pouvez vérifier this

Answer 2

J'ai trouvé la solution. Le problème était « avant » avant la classe:

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

Selon https://www.w3schools.com/tags/tag_pre.asp.

« La balise définit le texte préformaté texte dans un élément est affiché dans une police à largeur fixe (généralement Courier) , et il conserve à la fois les espaces et les sauts de ligne. Texte dans un élément est affiché dans une police à largeur fixe (généralement Courier), et il préserve les espaces et les sauts de ligne. "

Donc, quand je l'ai enlevé, il a cessé de couper le texte de plus grandes lignes dans la grille de kendo