将EditorTemplate添加到Kendo Grid

时间:2013-07-30 17:19:01

标签: c# asp.net-mvc asp.net-mvc-4 kendo-ui kendo-grid

我正在尝试将EditorTemplate添加到我的Kendo网格中,这是我能够做到的。

我遇到的问题是,当我进入编辑模式时,下拉列表会自动转到列表中的第一项而不是它应该编辑的项目。

VIEW(INDEX.CSHTML):

@(Html.Kendo().Grid<DropDown.Models.MarkupState>()
              .Name("PayrollMarkupGrid")
              .Columns(columns =>
                       {
                           columns.Bound(p => p.PayrollMarkupId).Hidden(true);
                           columns.Bound(p => p.StateId).Hidden(true);
                           columns.Bound(p => p.State).Width(80);
                           columns.Bound(p => p.MaintenancePercentage).Title("Maint. %").Width(80);
                           columns.Bound(p => p.OfficePercentage).Title("Office %").Width(80);
                           columns.Command(command =>
                                           {
                                               command.Edit();
                                               command.Destroy();
                                           }).Title("Actions");
                       })
              .ToolBar(toolbar => toolbar.Create())
              .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
              .DataSource(dataSource => dataSource
                                            .Ajax()
                                            .Model(model => model.Id(p => p.State))
                                            .Read(read => read.Action("Read", "Home"))
                                            .Create(create => create.Action("Create", "PayrollMarkup"))
                                            .Update(update => update.Action("Create", "PayrollMarkup"))
                                            .Destroy(destroy => destroy.Action("Delete", "PayrollMarkup"))
              ))

VIEW(StatesEditor.cshtml):

@model DropDown.Models.State
@{
    var shortName = "";
}
@if (Model != null)
{
    shortName = Model.ShortName;
}




@(Html.Kendo().DropDownList()
    .Name("State")
    .DataValueField("StateId")
    .DataTextField("ShortName")
    .Value(shortName)
    .BindTo((System.Collections.IEnumerable)ViewData["states"])
)

CONTROLLER(INDEX):

public ActionResult Index()
    {
        var stateList = new List<State>();

        var state1 = new State
        {
            StateId = 1,
            ShortName = "CA"
        };
        stateList.Add(state1);

        var state2 = new State
        {
            StateId = 2,
            ShortName = "CT"
        };
        stateList.Add(state2);

        var state3 = new State
        {
            StateId = 3,
            ShortName = "MA"
        };
        stateList.Add(state3);

        var state4 = new State
        {
            StateId = 4,
            ShortName = "RI"
        };
        stateList.Add(state4);

        var state5 = new State
        {
            StateId = 5,
            ShortName = "TX"
        };
        stateList.Add(state5);

        var state6 = new State
        {
            StateId = 6,
            ShortName = "SC"
        };
        stateList.Add(state6);

        ViewData["states"] = stateList;

        return View();
    }

CONTROLLER(READ):

public ActionResult Read([DataSourceRequest] DataSourceRequest request)
    {
        var payrollMarkupList = new List<MarkupState>();

        var markup1 = new MarkupState()
        {
            PayrollMarkupId = 1,
            StateId = 1,
            State = "CA",
            MaintenancePercentage = (decimal?)1.1
        };
        payrollMarkupList.Add(markup1);

        var markup2 = new MarkupState()
        {
            PayrollMarkupId = 2,
            StateId = 2,
            State = "CT",
            MaintenancePercentage = (decimal?)3.2
        };
        payrollMarkupList.Add(markup2);

        var markup3 = new MarkupState()
        {
            PayrollMarkupId = 3,
            StateId = 3,
            State = "MA",
            MaintenancePercentage = (decimal?)8.5
        };
        payrollMarkupList.Add(markup3);


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

MODEL(State.cs):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DropDown.Models
{
    public class State
    {
        public int StateId { get; set; }
        public string ShortName { get; set; }
    }
}

MODEL(MarkupState.cs):

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace DropDown.Models
{
    public class MarkupState
    {
        public int PayrollMarkupId { get; set; }
        [UIHint("StatesEditor")]
        public string State { get; set; }
        public int StateId { get; set; }
        public decimal? MaintenancePercentage { get; set; }
        public decimal? OfficePercentage { get; set; }
    }
}

这是测试解决方案的链接,但我提供了上述所有代码:

http://www.kendoui.com/clientsfiles/67b8816e-9aae-631b-85d4-ff000054ddc5_dropdown.zip?sfvrsn=0

1 个答案:

答案 0 :(得分:3)

将StateId设置为可见列,并使用ClientTemplate显示“State”字段:

columns.Bound(p => p.StateId).Width(80).ClientTemplate("#=State#");
columns.Bound(p => p.State).Hidden(true);

将自定义EditorTemplate设置为模型中的“StateId”字段:

public class MarkupState
{
    public int PayrollMarkupId { get; set; }
    public string State { get; set; }
    [UIHint("StatesEditor")]
    public int StateId { get; set; }
    public decimal? MaintenancePercentage { get; set; }
    public decimal? OfficePercentage { get; set; }
}

按以下方式修改EditorTemplate:

@model int?


@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("StateId")
    .DataTextField("ShortName")
    .BindTo((System.Collections.IEnumerable)ViewData["states"])
)