2013-08-29 3 views
6

나는 서버 측 바인딩에서 아약스 사용으로 이동할 2 계층 계층 격자를 가지고 있습니다. 아약스 독서 데이터의 두 계층에 대해 제대로 작동하지만 난 어려운 조건부 논리를 기반으로 내 열을 렌더링 ClientTemplate를 사용하는 데 읽습니다.mvc 검도 그리드의 ajax 바인딩에서 클라이언트 템플릿 표현식을 사용하는 방법은 무엇입니까?

아래는 서버 측 바인딩 버전입니다. 나는 같은 효과를 ClientTemplate와 표현 # = #를 사용할 필요가 이해하지만 두 가지 문제가 오전 :

  1. 어떻게 변수 'i'를 각 행에 대해 내가 CheckBoxFor를 사용하여 HTML 헬퍼 메소드와 같은 수 증가하기를?
  2. @를 ClientTemplate 식을 사용하는 방법으로 변환하는 방법. 조건부 논리가 가장 도움이 될 것입니다 표현이 변환 모델

에서 특성의 혼합물을 사용하여보기의 모델의 속성과도 조건부 논리와 결합 된 요소 (MyViewModel)의 속성을 사용합니다.

var i = -1; 

@(Html.Kendo().Grid<MyViewModel>() 
    .Name("grid") 
    .Columns(columns => 
    { 
    columns.Bound(c => c.Selected).Title("") 
     .Template(
     @<text> 
      @{i++;} 
      @if (Model.Permissions.HasInsertAccess && item.Status == Status.Created) 
      { 
      <input type="hidden" name="MyViewModels.Index" value="@i" /> 
      @Html.CheckBoxFor(m => m.MyViewModels[i].Selected) 
      } 
      </text>); 

      columns.Bound(c => c.Id) 
      .Template(@<text>@Html.HiddenFor(m => m.MyViewModels[i].Id)@item.Id</text>) 

답변

5

다음 코드 스 니펫으로 시도해보십시오.

VIEW

@model MvcApplication1.Models.TestModels 

<script type="text/javascript"> 
var rowNumber = 0; 

function resetRowNumber(e) { 
    rowNumber = 0; 
} 

function renderNumber(data) { 
    return ++rowNumber; 
} 

function renderRecordNumber(data) { 
    var page = parseInt($("#Grid").data("kendoGrid").dataSource.page()) - 1; 
    var pagesize = $("#Grid").data("kendoGrid").dataSource.pageSize(); 
    return parseInt(rowNumber + (parseInt(page) * parseInt(pagesize))); 
} 

</script> 
@(Html.Kendo().Grid<MvcApplication1.Models.TestModels>() 
.Name("Grid") 
.Columns(columns => 
{ 
    columns.Bound(p => p.ID); 
    columns.Bound(p => p.Name); 

    columns.Template(t => { }).Title("Row No").ClientTemplate("# if ('" + @Model.Permissions.HasValue.ToString().ToLower() + "' == 'true') { #" + 
     "<input type='text' name='MyViewModels.Index' value='#= renderNumber(data) #' /> " + 
     "# } #"); 

}) 
.Pageable(x => x.PageSizes(new int[] { 10, 20, 30, 50 }).Refresh(true)) 
.Sortable() 
.Filterable() 
.DataSource(dataSource => dataSource 
    .Ajax() 
     .Read(read => read.Action("Grid_Read", "Home")) 

) 
    .Events(ev => ev.DataBound("resetRowNumber")) 
) 

CONTROLLER

public ActionResult Index() 
{ 
     TestModels model = new TestModels(); 
     model.Permissions = true; //Please comment this line and check 
     return View(model); 
} 

public ActionResult Grid_Read([DataSourceRequest] DataSourceRequest request) 
{ 
     List<TestModels> models = new List<TestModels>(); 

     for (int i = 0; i < 50; i++) 
     { 
      TestModels t1 = new TestModels(); 
      t1.ID = i; 
      t1.Name = "Name" + i; 
      models.Add(t1); 

     } 

     return Json(models.ToDataSourceResult(request)); 
} 

모델

public class TestModels 
{ 
    [Display(Name = "ID")] 
    public int ID { get; set; } 

    [Display(Name = "Name")] 
    public string Name { get; set; } 

    public bool? Permissions { get; set; } 
} 

위의와 시도하십시오 코드 스 니펫. 우려 사항이 있으면 알려주십시오.

+1

감사합니다. 잘 작동합니다. 행 증가를 사용하는 대신 검도 - 격자에 의해 생성 된 uid를 사용하기로 결정했습니다. 클라이언트 템플릿이 mvc html 클래스에서 잘 작동하지 않는 것은 부끄러운 일입니다. 이제는 못생긴 html을 직접 작성해야합니다. 서버 측과 Ajax 바인딩을 함께 사용할 수 있는지 알고 있습니까? 모델에서 첫 번째 그리드를 누른 다음 행을 확장하여 아약스 호출을하면? 나는 쓸모없는 수많은 방법을 시도했다. – David