Text space doesn't fit when adding new row to Kendo Grid

Question

When I add a new row to a kendo grid using js (partial code below), the text doesn't fit inside the row, as you can see with this picture: print-screen-kendo-grid.

How I can solve it?

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

Thank you.

EDIT: I added more info

css rules for columns

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

Above the kendo grid, there is a div class named "recipe-steps-section section". The idea is to add a step to a recipe. The recipe-steps-grid has 5 columns: the first is the handle so that the user can drag the step to change its order. The second column is the recipe step order number, then it is followed by the recipe step description (this is the one that I want to increase the text space). The following column is the time that recipe step takes to cook. The last column has the option to delete this step.

The kendo grid also has a toolbar at the end to add a new step with the step description and step time ("add-recipe-step" class).

This seems like a css matter. Could you please provice your code? — Anastasios Selmani
@AnastasiosSelmanis For the column step-description of the grid, this is the 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; } — Rute
And this: .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; } — Rute
I gave under an answer of ways to get the wrap you want. Now seeing your comments I see that you have overflow: hidden and white-space: pre-wrap. This works correctly on normal text where there are spaces. You example doesn't have spaces and this is your actual problem. I don't know if you application wants to handle this. (w3schools.com/cssref/…) — Anastasios Selmani

Anastasios Selmani Anastasios Selmani · Accepted Answer · 2017-10-20T14:20:24

If I understood correctly you want overflow-wrap: break word for your columns

Generally you could just insert this to your page

td {
    overflow-wrap: break-word;
}

and your word will break once the word gets to the maximum width. Of cource it will break the word wherever it wants. This works for your example because you don't break anywhere your words.

overflow-normal would work better for words with some meaning. For more information you could check this

Text space doesn't fit when adding new row to Kendo Grid

2 Answers