Question

我是ASP.NET MVC3中Telerik Grid的初学者。我尝试使用下拉列表选择值绑定Grid。请参阅下面的代码。

我的网络模型类

public class CustomerEventRolesModels
{
    public int Event { get; set; }
    public IEnumerable<System.Web.Mvc.SelectListItem> Events { get; set; }
    public Telerik.Web.Mvc.GridModel<CustomerEventRolesModel> GridData { get; set; }
}

public class CustomerEventRolesModel : BaseNopEntityModel
{
    public string Customer { get; set; }
    public bool Sponsor { get; set; }
    public bool Speaker { get; set; }
}

我的.cshtml

<table id="grdCustomerEventRoleData" class="adminContent" style="display: none">
<tr>
    <td>
        <p>
        </p>
    </td>
</tr>
<tr>
    <td>
        @(Html.Telerik().Grid<CustomerEventRolesModel>(Model.GridData.Data)
    .Name("grdCustomerEventRoles")
              .Columns(columns =>
              {

                  columns.Bound(x => x.Customer);

                  columns.Bound(x => x.Speaker).Template(x => Html.CheckBox("spk", x.Speaker));
                  columns.Bound(x => x.Sponsor).Template(x => Html.CheckBox("spn", x.Sponsor));
              }
        )   .Pageable(settings => settings.Total(Model.GridData.Total)
                        .PageSize(gridPageSize)
                        .Position(GridPagerPosition.Both))
                        .ClientEvents(events => events.OnDataBinding("onDataBinding"))
                        .DataBinding(dataBinding => dataBinding.Ajax().Select("FilterByDropdown", "Customer"))
                        .EnableCustomBinding(true))
        ) )
    </td>
</tr>

<script type="text/javascript">
var initialLoad = true;
$("#select-event").change(function () {
    if ($("#select-event option:selected").val() > 0) {
        $("#grdCustomerEventRoleData").show();
        $("#grdCustomerEventRoles").data("tGrid").rebind();
    }
    else {
        $("#grdCustomerEventRoleData").show();
    }
});

function onDataBinding(e) {
    if (initialLoad == true) {
        e.preventDefault();
        initialLoad = false;
    }
    else {
        var classificationId = $("#select-event option:selected").val();
        if (classificationId != "")
            e.data = $.extend(e.data, {
                selEvent: classificationId
            });
        else {
            e.preventDefault();
            $("#grdCustomerEventRoleData").hide();
        }
    }

}

控制器中的操作

   public ActionResult FirstBind()
    {
        if (!_permissionService.Authorize(StandardPermissionProvider.ManageCustomers))
            return AccessDeniedView();

        var model = new CustomerEventRolesModels();

        model.Event = 0;

        List<Nop.Core.Domain.Catalog.Product> products = _productRepository.Table.Where(p => p.EventDate != null && p.EventDate >= DateTime.Now).ToList();

        model.Events = products.Select(p => new System.Web.Mvc.SelectListItem
        {
            Text = p.Name,
            Value = p.Id.ToString()
        });

        var grdmodel = new GridModel<CustomerEventRolesModel>
        {
            Data = null,
            Total = 0
        };

        model.GridData = grdmodel;

        return View(model);
    }

    [HttpPost, GridAction(EnableCustomBinding = true)]
    public ActionResult FilterByDropdown(GridCommand command, int selEvent)
    {
        if (!_permissionService.Authorize(StandardPermissionProvider.ManageCustomers))
            return AccessDeniedView();

        if (selEvent == 0)
            return View();

        var model = new CustomerEventRolesModels();

        model.Event = selEvent;

        var roles = (from lst in _customerEventRoleRepository.Table
                     join cust in _customerRepository.Table on lst.CustomerId equals cust.Id
                     join product in _productRepository.Table on lst.EventId equals product.Id
                     join role in _customerRoleRepository.Table on lst.RoleId equals role.Id
                     orderby lst.Id descending
                     select new CustomerEventRolesModel
                     {
                         Id = lst.Id,
                         Customer = cust.Email,
                         Sponsor = (role.Name == "Sponsor") ? true : false,
                         Speaker = (role.Name == "Speaker") ? true : false
                     }).ToList();

        var grdmodel = new GridModel<CustomerEventRolesModel>
        {
            Data = roles,
            Total = roles.Count
        };

        model.GridData = grdmodel;

        return new JsonResult
        {
            Data = model
        };
    }

FilterByDropdown 操作正常但网格没有绑定。

我无能为力。

请帮忙。

Answer 1

你回来的模型不对。

在FilterByDropdown中尝试此操作：

    var grdmodel = new GridModel<CustomerEventRolesModel>
    {
        Data = roles,
        Total = roles.Count
    };

    return new JsonResult
    {
        Data = grdmodel
    };

Answer 2

如果要在编辑行时向Telerik MVC Grid添加下拉列表，则需要执行以下几个步骤（除了使网格绑定并且行可编辑）。

假设我们希望表示名称的列（来自模型的“名称”）是一个下拉列表，可以从中选择名称而不是键入名称。将名为“EditorTemplates”的文件夹添加到包含网格所在视图的文件夹中。它将包含我们要在正在编辑的行中显示的每个下拉列表的单独部分视图。制作局部视图（如上所述），将其命名为“ClientName.cshtml”，包含名为“Name”的Telerik DropDownList，并绑定到必需的名称列表。

@(Html.Telerik().DropDownList() .Name("Name") .BindTo(new SelectList((IEnumerable)ViewData["CustomerNames"], "Text", "Value")) )

将以下属性添加到网格使用的数据类型的“名称”属性，例如Grid使用“Customer”类，包含“string Name”字段：

public class Customer{ [UIHint("ClientName"), Required] public string Name { get; set; } }

UIHint属性指定在呈现特定列时使用的字段模板。

将以下java脚本添加到包含grid函数的页面： function onEditCustomerList(e) { if (e.dataItem != null) { $(e.form).find('#Name').data('tDropDownList').select(function (dataItem) { return dataItem.Text == e.dataItem['Name']; }); } }

这应该可以解决问题。

通过下拉列表选择的值在Telerik网格中加载数据

2 个答案: