검도 UI에서 스타일을 지정하는 방법 asp.net mvc 그리드 편집기

Question

일부 검도 UI 자습서를 통해 작업 중이며 그리드의 텍스트 상자 모양에 문제가 있습니다. 내가 따르는 데모는 http://demos.kendoui.com/web/grid/editing-inline.html입니다.

그리드에서 날짜의 서식을 지정하고 편집기에서 날짜에 datepicker를 사용하는 방법을 알아 냈습니다. 이렇게하려면 편집기 템플릿을 사용했습니다.

나는 CSS 클래스를 적용 할 수 있으므로 이름 열의 편집기 템플릿을 추가 했으므로 더보기는하지만 제대로 작동하지 않습니다. 편집기가 열리면 텍스트 상자의 값이 비어 있습니다 (이미지 참조). 분명히 CSS 클래스를 적용하는 더 쉬운 방법이 있어야합니다.

그리드의 모든 텍스트 상자에 대한 편집기 템플릿을 만들어야합니까? 그렇다면 편집 할 때 어떻게 값을 가져올 수 있습니까?

@(Html.Kendo().Grid<Product>()  
.Name("Grid")  
.Columns(columns => {   
    columns.Bound(p => p.Name); 
    columns.Bound(p => p.UnitPrice).Width(140); 
    columns.Bound(p => p.Units).Width(140); 
    columns.Bound(p => p.Discontinued).Width(100); 
      columns.Bound(p => p.Date).Width(100).Format("{0:d/M/yyyy}"); 
    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200); 
}) 
.ToolBar(toolbar => toolbar.Create()) 
.Editable(editable => editable.Mode(GridEditMode.InLine)) 
.Pageable() 
.Sortable() 
.Scrollable() 
.DataSource(dataSource => dataSource   
    .Ajax()     
    .Events(events => events.Error("error_handler")) 
    .Model(model => model.Id(p => p.Id)) 
    .Create(update => update.Action("EditingInline_Create", "Home")) 
    .Read(read => read.Action("EditingInline_Read", "Home")) 
    .Update(update => update.Action("EditingInline_Update", "Grid")) 
    .Destroy(update => update.Action("EditingInline_Destroy", "Grid")) 
) 

)

여기 이름 편집기 템플릿에 대한 코드입니다 :

@using Kendo.Mvc.UI 
@model KendoUiOne.Models.Product 

@Html.TextBoxFor(x=>x.Name, new {@class = "k-input k-textbox"}) 

Answer 1

이 문제가 전달하는 모델입니다 편집기 템플릿은 제품이 아니라 문자열입니다. 즉, 편집기 템플리트의 모델은 string입니다. 그리고 TextBox 도우미를 모델 자체로 선언해야합니다.

편집기 템플릿은 다음과 같아야합니다

@model string 

@Html.TextBoxFor(x=>x, new {@class = "k-input k-textbox"}) 

Answer 2

흥미로운는 설정하려고 여기

는 그리드에 대한 코드입니다 TextBoxFor 도우미 대신 "Name"이 될 위젯 이름 .

@Html.TextBox("Name", new {@class = "k-input k-textbox"}) 

Answer 3

시도 :

@Html.TextBox("Name", Model.Name, new {@class = "k-input k-textbox"}) 

또는 것은, 첫째 HTML과 시도 후 문제를 디버깅 Html.TextBox 도우미로 다시 되돌릴 수 :

<input type="text" id="Name" value="@Model.Name" class="k-input k-textbox"/>