1
js（以下の部分コード）を使用して剣道グリッドに新しい行を追加すると、これでわかるようにテキストが行の内側に収まらない写真：print-screen-kendo-grid。剣道グリッドに新しい行を追加するときにテキストスペースが合わない
どうすれば解決できますか？
var dataSource = section.find(".k-grid").getKendoGrid().dataSource;
dataSource.add({
Description: description.val(),
StepTimer: timer
});
ありがとうございます。
EDIT：
@(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：私はより多くの情報の列の
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;
}
剣道グリッドを追加
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クラスがあります。 考え方はレシピにステップを追加することです。レシピステップグリッドには5つの列があります。最初の列はハンドルで、ユーザーは段をドラッグして順序を変更できます。 2番目の列はレシピステップの注文番号です。次にレシピステップの説明が続きます（これはテキストスペースを増やしたいものです）。次の列は、レシピステップで調理する時間です。最後の列には、このステップを削除するオプションがあります。
剣道グリッドには最後にツールバーがあり、ステップの説明とステップ時間（「add-recipe-step」クラス）で新しいステップを追加します。
これはCSSのようです。あなたのコードを教えていただけますか？ –
@AnastasiosSelmanis グリッドの列ステップ記述については、これはcss： 'です。レシピステップグリッド。ステップ説明{ 最大高さ：60px; オーバーフロー：非表示。 空白：プレ・ラップ; margin-top：0; margin-bottom：0; text-indent：0; text-align：left; font-family：inherit; font-size：inherit; color：inherit; border：none; background-color：継承; パディング：0; } ' – Rute
これは： ' .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：中間; } ' – Rute