Загрузить данные в сетке Telerik по выпадающему списку выбранное значение

Question

Я начинаю работу в сетке Telerik в ASP.NET MVC3. Я пытаюсь связать Grid с выбранным значением dropdownlist. См. Мой код ниже.

Мой веб-модель класса

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

Если вы хотите добавить выпадающий список в Telerik MVC сетку при редактировании строки, вам нужно будет следовать следующим несколько шагов (кроме создания Аякса сетки связана и строки редактируемые).

Предположим, мы хотим, чтобы столбец, представляющий имя («Имя» из модели), был выпадающим списком, из которого можно выбрать имя, а не вводить его. Добавьте папку с именем «EditorTemplates» в папку, содержащую представление, в котором включена сетка. Он будет содержать отдельный частичный вид для каждого раскрывающегося списка, который мы хотим показать в редактируемой строке. Сделайте частичный вид (упомянутый выше), назовите его, например. «ClientName.cshtml», содержащий Telerik DropDownList с именем «Имя» и привязанный к требуемому списку имен.

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

Добавьте следующий атрибут свойства «Name» типа данных, что сетка используется, например, Сетка используется класс «Клиента», содержащее поле «строка Name»:

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

Свойство определяет UIHint каких полей шаблона использовать, когда определенный столбец оказан.

Добавьте следующий Java-скрипт на страницу, содержащую функцию сетки: 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 
    };