title: Text space doesn't fit when adding new row to Kendo Grid
body: <p>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: <a href="https://i.stack.imgur.com/b0KGI.png" rel="nofollow noreferrer">print-screen-kendo-grid</a>. </p>
  
  <p>How I can solve it?</p>
  
  <pre><code>var dataSource = section.find(".k-grid").getKendoGrid().dataSource;
  dataSource.add({
          Description: description.val(),
          StepTimer: timer
      });
  </code></pre>
  
  <p>Thank you.</p>
  
  <p><strong>EDIT:</strong> I added more info</p>
  
  <p>css rules for columns</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Kendo Grid:</p>
  
  <pre><code> @(Html.Kendo().Grid&lt;RecipeStepsViewModel&gt;()
  .Name(gridName)
  .HtmlAttributes(new { @class = "recipe-steps-grid" })
    .Columns(columns =&gt;
    {
        columns.Template(t =&gt; { }).ClientTemplate("#= generateHandleTemplate() #").HtmlAttributes(new { @class = "dummy-col" }).Width("30px");
        columns.Template(t =&gt; { }).ClientTemplate("STEP #= StepOrder #").HtmlAttributes(new { @class = "step-order-col" }).Width("50px");
        columns.Bound(p =&gt; p.Description).ClientTemplate("#= generateStepDescriptionTemplate(Description) #")
            .HtmlAttributes(new { @class = "step-description-col" }).Width("100%");
        columns.Bound(p =&gt; p.StepTimer).ClientTemplate("#= generateTimerTemplate(StepTimer) #").HtmlAttributes(new { @class = "right-cell" }).Width("80px");
        columns.Template(t =&gt; { }).ClientTemplate("#= generateDeleteTemplate(" + isLocked.ToString().ToLower() + ") #").HtmlAttributes(new { @class = "dummy-col" }).Width("30px");
    })
    .DataSource(dataSource =&gt; dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Read(read =&gt; read.Action("GetRecipeSteps", "RecipeSteps", new { sectionId = Model.Item1 }).Data("getLanguage"))
        .Create(create =&gt; create.Action("CreateRecipeStep", "RecipeSteps"))
        .Update(update =&gt; update.Action("UpdateRecipeStep", "RecipeSteps"))
        .Destroy(destroy =&gt; destroy.Action("DeleteRecipeStep", "RecipeSteps"))
        .Model(model =&gt;
        {
            model.Id(a =&gt; a.Id);
            model.Field(a =&gt; a.Description).Editable(true);
            model.Field(a =&gt; a.StepTimer).Editable(true);
        })
    )
    .Events(e =&gt;
    {
        e.Save("onStepSave");
        e.DataBound("onStepDatabound");
        e.Change("onStepRowSelection");
    })
    .Selectable(s =&gt; s.Mode(GridSelectionMode.Single))
    .Editable(editable =&gt; editable.Mode(GridEditMode.InCell)
        .CreateAt(GridInsertRowPosition.Bottom))
              )
  
              @(Html.Kendo().Sortable()
                  .For("#" + gridName)
                  .ConnectWith(".recipe-steps-grid")
                  .Filter("table &gt; tbody &gt; tr:not(.k-grid-edit-row)")
                  .Handler("table &gt; tbody .drag-handle-icon")
                  .Cursor("move")
                  .Disabled(".no-drag")
                  .HintHandler("noHint")
                  .PlaceholderHandler("placeholder")
                  .ContainerSelector(".section-container[data-type=recipe-steps]")
                  .Events(events =&gt; events.Change("onStepSort"))
              )
  
              @{
                  if (Model.Item3 &amp;&amp; !Convert.ToBoolean(isLocked.ToString().ToLower()))
                  {
                      &lt;table class="add-recipe-step"&gt;
                          &lt;colgroup&gt;
                              &lt;col class="add-colgroup" /&gt;
                              &lt;col class="description-colgroup" /&gt;
                              &lt;col class="timer-colgroup" /&gt;
                          &lt;/colgroup&gt;
                          &lt;tr&gt;
                              &lt;td class="centered-cell"&gt;&lt;img class="add-btn" src='@Url.Content("~/Content/Images/grey-plus-thin.png")'&gt;&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input class="input-box" type="text" placeholder='@Resources.placeholderNewRecipeStep' name="description" /&gt;
                              &lt;/td&gt;
                              &lt;td class="timer"&gt;
                                  @(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")
                                  )
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  }
              }
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>function generateStepDescriptionTemplate(text) {
      var bold = /\*(.*?)\*/gm;
      var html = text.replace(bold, '&lt;span class="emph-word"&gt;$1&lt;/span&gt;');
  
      return "&lt;pre class='step-description'&gt;" + html + "&lt;/pre&gt;";
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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).</p>