负载数据在teleerik网格通过下拉列表选择的值

Question

我是ASP中teleerik Grid的初学者。净MVC3。我尝试绑定网格与下拉列表选择的值。请看下面我的代码

My web model class

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; }
}

My .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

如果您想在编辑行时向Telerik MVC网格添加下拉菜单，则需要遵循以下几个步骤(除了使网格ajax绑定和行可编辑之外)。

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

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

将以下属性添加到网格使用的数据类型的" Name "属性中，例如: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']; }); } }

Answer 2

您返回了错误的模型。

试试FilterByDropdown:

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